Handle tabbing focus with cross-origin iFrame inside modal trap

user_9302793 0
Viewed 606

I am trying to solve a tabbing issue inside my modal when a cross-origin <iframe> is present.

What I am noticing:

  1. If the iFrame is not the first or last focusable element in the modal, there is no need to set .focus() with javascript.
  2. If the iFrame is the first or last focusable element in the modal, I need to set .focus() with javascript to maintain keyboard accessibility.

.focus() is restricted in this use. And as I can't set focus, the modal keyboard tabbing trap is broken.

Has anyone had success in this area?

HTML examples:

Works (I don't need to set focus with javascript on the iframe)

<input type="text" />
<iframe />
<input type="text" />

If iframe is the first or last focusable element, I will need to use javascript to set focus to maintain the modal keyboard trap

<input type="text" />
<iframe />

or

<iframe />
<input type="text" />

javascript:

var KEY = {
    TAB: 9,
  },
  allowedFocusableElements =
  'a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';

function openDialog(e) {

  // Get focusable elements.
  dialogFocusableElements = dialog.querySelectorAll(allowedFocusableElements);
  dialogFirstElement = dialogFocusableElements[0];
  dialogLastElement = dialogFocusableElements[dialogFocusableElements.length - 1];

  document.addEventListener("keydown", processKeys);
}

function processKeys(event) {
  if (event.keyCode === KEY.TAB && !event.shiftKey) {
    if (document.activeElement === dialogLastElement) {
      event.preventDefault();
      dialogFirstElement.focus();
    }
  } else if (event.keyCode === KEY.TAB && event.shiftKey) {
    if (document.activeElement === dialogFirstElement) {
      event.preventDefault();
      dialogLastElement.focus();
    }
  }
}
iframe html javascript
1 Answers

This all came down to trying to use .focus() on a cross-origin iFrame. Since there doesn't seem to be any way around this (considering tab order control and focus with javascript), I have (not so ideally) implemented some additional tab elements either before or after the iFrame depending on where it sits in the modal.

If the iFrame is the first focusable element, we place a "pseudo" tabbable element before it, and likewise, if it's the last focusable element we place a tabbable element after it.

Here is that particular snippet of code:

var KEY = {
    TAB: 9,
  },
  allowedFocusableElements =
  'a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';

function openDialog(e) {

  // Get focusable elements.
  dialogFocusableElements = dialog.querySelectorAll(allowedFocusableElements);
  dialogFirstElement = dialogFocusableElements[0];
  dialogLastElement = dialogFocusableElements[dialogFocusableElements.length - 1];

  // Tab helpers for iFrames.
  if (dialogFirstElement.tagName && dialogFirstElement.tagName === "IFRAME") {
    iframeTabHelper = document.createElement("div");
    iframeTabHelper.setAttribute("tabindex", "0");
    iframeTabHelper.classList.add("iframe-helper-button");
    dialogFirstElement.parentNode.insertBefore(iframeTabHelper, dialogFirstElement);

    // Re-get focusable elements.
    dialogFocusableElements = dialog.querySelectorAll(
      allowedFocusableElements
    );
    dialogFirstElement = dialogFocusableElements[0];
  }

  if (dialogLastElement.tagName && dialogLastElement.tagName === "IFRAME") {
    iframeTabHelper = document.createElement("div");
    iframeTabHelper.setAttribute("tabindex", "0");
    iframeTabHelper.classList.add("iframe-helper-button");
    dialogLastElement.parentNode.insertBefore(iframeTabHelper, dialogLastElement.nextSibling);

    // Re-get focusable elements.
    dialogFocusableElements = dialog.querySelectorAll(
      allowedFocusableElements
    );
    dialogLastElement = dialogFocusableElements[dialogFocusableElements.length - 1];
  }

  document.addEventListener("keydown", processKeys);
}

function processKeys(event) {
  if (event.keyCode === KEY.TAB && !event.shiftKey) {
    if (document.activeElement === dialogLastElement) {
      event.preventDefault();
      dialogFirstElement.focus();
    }
  } else if (event.keyCode === KEY.TAB && event.shiftKey) {
    if (document.activeElement === dialogFirstElement) {
      event.preventDefault();
      dialogLastElement.focus();
    }
  }
}

Not perfect, but keeps the keyboard tabbing and trap functioning.

Could probably add some checks to verify if the iFrame is indeed cross-origin, or even better, rewrite to check if there is any element that would restrict applying .focus(), not just iFrames.

user_93027930
Related