Repository: hashicorp/vault
File: ui/lib/open-api-explorer/addon/components/swagger-ui.js (JavaScript)

Code before:
        // it's already been pre-pended
        if (!req.loadSpec) {
          const { protocol, host, pathname, search } = parseURL(req.url);
          //paths in the spec don't have /v1 in them, so we need to add that here
          //           http(s):  vlt.io:4200  /sys/mounts
          req.url = `${protocol}//${host}/v1${pathname}${search}`;
        }
        return req;
      },
      onComplete: () => {
        componentInstance.swaggerLoading = false;
        this.applyA11yFixes();
      },
    };
  };

  // using an action to bind the correct "this" context
  @action async swaggerInit() {
    const configSettings = this.CONFIG(SwaggerUIBundle, this);
    SwaggerUIBundle(configSettings);
  }

  applyA11yFixes() {
    const container = document.querySelector('.swagger-ui');
    if (container) {
      const observer = new MutationObserver(() => {
        this.updateCaretTabIndex();
        this.updateCopyToClipboard();
        this.updateTryItOutButtonDescription();
      });
      observer.observe(container, { childList: true, subtree: true });
      // Run once on initial load
      this.updateCaretTabIndex();
      this.updateCopyToClipboard();
      this.updateTryItOutButtonDescription();
    }
  }

  updateCaretTabIndex() {
    document.querySelectorAll('.opblock-control-arrow').forEach((el) => {
      el.tabIndex = 0;
    });
  }

  updateCopyToClipboard() {
    document.querySelectorAll('.copy-to-clipboard').forEach((div) => {
      div.tabIndex = 0;
      div.setAttribute('role', 'button');
      div.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' || e.key === ' ') {
          const svg = div.querySelector('svg');

Review comment (performance):
reading the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver), it looks like we should call `observer.disconnect()` to cleanup the observer?

Even if the observer _should_ technically cancel when the page unloads, it seems like it might be a good idea to avoid memory leaks, etc.


Code after:
        // we want to link to the right JSON in swagger UI so
        // it's already been pre-pended
        if (!req.loadSpec) {
          const { protocol, host, pathname, search } = parseURL(req.url);
          //paths in the spec don't have /v1 in them, so we need to add that here
          //           http(s):  vlt.io:4200  /sys/mounts
          req.url = `${protocol}//${host}/v1${pathname}${search}`;
        }
        return req;
      },
      onComplete: () => {
        componentInstance.swaggerLoading = false;
        this.applyA11yFixes();
      },
    };
  };

  // using an action to bind the correct "this" context
  @action async swaggerInit() {
    const configSettings = this.CONFIG(SwaggerUIBundle, this);
    SwaggerUIBundle(configSettings);
  }

  applyA11yFixes() {
    const container = document.querySelector('.swagger-ui');
    if (container) {
      this.observer = new MutationObserver(() => {
        this.updateCaretTabIndex();
        this.updateCopyToClipboard();
        this.updateTryItOutButtonDescription();
      });
      this.observer.observe(container, { childList: true, subtree: true });
      // Run once on initial load
      this.updateCaretTabIndex();
      this.updateCopyToClipboard();
      this.updateTryItOutButtonDescription();
    }
  }

  updateCaretTabIndex() {
    document.querySelectorAll('.opblock-control-arrow').forEach((el) => {
      el.tabIndex = 0;
    });
  }

  updateCopyToClipboard() {
    document.querySelectorAll('.copy-to-clipboard').forEach((div) => {
      div.tabIndex = 0;
      div.setAttribute('role', 'button');
      div.addEventListener('keydown', function (e) {
        if (e.key === keys.ENTER || e.key === keys.SPACE) {