trapfocus.js

/*
  Creates a focus trap inside the specified trap wrapper element.
  - trapWrapper: DOM node inside which the focus should be trapped.
  - customFocusableFirst: a custom DOM node(usually outside the trapWrapper)
    which should be treated as a first focusable element.
  - customFocusableLast: a custom DOM node(usually outside the trapWrapper)
    which should be treated as the last focusable element.
  - closeButton: DOM node, if provided will be used to remove focus trap event listeners.
  - customEventContainer - DOM node container to be used as event listener.
 */
export  function focusTrap(
  trapWrapper,
  customFocusableFirst,
  customFocusableLast,
  closeButton,
  customEventContainer
) {
  const focusableElements = trapWrapper.querySelectorAll('a[href]:not([disabled]), button:not([disabled])');
  const firstFocusable = customFocusableFirst || focusableElements[0];
  const lastFocusable = customFocusableLast || focusableElements[focusableElements.length - 1];
  const KEYCODE_TAB = 9;
  const eventListenerContainer = customEventContainer || trapWrapper;

  function manipulateFocus(e) {
    const isTabPressed = (e.key === 'Tab' || e.keyCode === KEYCODE_TAB);

    if(!isTabPressed) {
      return;
    }

    if (e.shiftKey) {
      // Covers the shift + tab case.
      if (document.activeElement === firstFocusable) {
        lastFocusable.focus();
        e.preventDefault();
      }
    } else {
      // Covers the tab case.
      if (document.activeElement === lastFocusable) {
        firstFocusable.focus();
        e.preventDefault();
      }
    }
  }

  eventListenerContainer.addEventListener('keydown', manipulateFocus);

  if(closeButton) {
    closeButton.addEventListener('click', function () {
      eventListenerContainer.removeEventListener('keydown', manipulateFocus);
    })
  }
}