Explore web accessibility

Focus management for Modals

When working with modals or dialogs, we need to manage the focus on current active element through JavaScript code, so that it is accessible through keyboard too.

Sample code:

HTML

  <section class="accessible-modal">
        <button class="open-modal-button">Click here to open modal</button>
        <button class="button-other">Some other button</button>

        <div class="modal" role="dialog" aria-modal="true">
          <div class="modal-content">
            <button class="close-modal-button" aria-label="Close modal">
              <i class="fa fa-close fa-lg" aria-hidden="true"></i>
            </button>
            <h1>Hello, the modal has opened!</h1>
            
            <button class="submit-modal-button">
              Submit
            </button>
          </div>
        </div>
      </section>

JavaScript

  const modal = document.querySelector(".accessible-modal .modal");
  const openModalButton = document.querySelector(
    ".accessible-modal .open-modal-button"
  );
  const closeModalButton = document.querySelector(
    ".accessible-modal .close-modal-button"
  );
  const submitButton = document.querySelector(
    ".accessible-modal .submit-modal-button"
  );
  let previousActiveElement;

  const toggleModal = () => {
    modal.classList.toggle("show-modal");
  };

  const toggleModelWithFocusRestored = () => {
    toggleModal();
    previousActiveElement.focus();
  };

  const getAllFocusableElements = context =>
    Array.from(context.querySelectorAll("button"));

  const getFocusableElement = (context = "document") => {
    let focusable = getAllFocusableElements(context);
    return focusable[0];
  };

  openModalButton.addEventListener("click", () => {
    previousActiveElement = document.activeElement;
    toggleModal();
    getFocusableElement(modal).focus();
  });

  closeModalButton.addEventListener("click", () => {
    console.log("Close icon on modal clicked");
    toggleModelWithFocusRestored();
  });

  submitButton.addEventListener("click", () => {
    console.log("Submit button on modal clicked");
    toggleModelWithFocusRestored();
  });

  window.addEventListener("click", event => {
    if (event.target === modal) {
      toggleModelWithFocusRestored();
    }
  });

  // code to trap focus inside modal and close modal on ESC keypress
  let focusableElementsInModal = getAllFocusableElements(modal);
  var firstFocusableElement = focusableElementsInModal[0];
  var lastFocusableElement = focusableElementsInModal[focusableElementsInModal.length - 1];

  const handleKeyDownInModal = event => {
    // code to trap focus inside modal
    if (event.key === "Tab") {
      if (event.shiftKey) {
        if (document.activeElement === firstFocusableElement) {
          event.preventDefault();
          lastFocusableElement.focus();
        }
      } else {
        if (document.activeElement === lastFocusableElement) {
          event.preventDefault();
          firstFocusableElement.focus();
        }
      }
    } else if (event.key === "Escape") {
      // close modal on ESC keypress
      toggleModelWithFocusRestored();
    }
  };

  modal.addEventListener("keydown", handleKeyDownInModal);

Focus management for Modals

Inaccessible Modal

Customize your spicy burger

Accessible modal

Sample code:

HTML

JavaScript

Reference: