mobile menu trap focus and/or escape to close overlay menu

Hey sky19er,
Thank you for your patience and the link to your site. The following javascript will trap focus in the burger menu when it is opened and cycle though the items until the escape key is used, which will then focus on the close button and trigger it.
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function trap_focus_in_burger_menu_esc_to_close() { ?>
  <script>
function trapFocusInBurgerMenu() {
  let menu = document.getElementById('av-burger-menu-ul');
  let burgerButton = document.getElementById('burger-button');
  let focusableElements = [];
  let firstFocusableElement = null;
  let lastFocusableElement = null;

  
  function getFocusableElements() {
    focusableElements = menu.querySelectorAll(
      'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    focusableElements = Array.from(focusableElements).filter(
      (el) => !el.hasAttribute('disabled')
    );
    firstFocusableElement = focusableElements[0];
    lastFocusableElement = focusableElements[focusableElements.length - 1];
  }

  
  function closeMenu() {
    if (menu) {
      
      menu.style.display = 'none';
      
      
      const mainMenuItem = document.querySelector('li.av-burger-menu-main');
      if (mainMenuItem) {
        
        const focusableChild = mainMenuItem.querySelector(
          'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
        );
        if (focusableChild && !focusableChild.hasAttribute('disabled')) {
          focusableChild.focus();
          focusableChild.click();
        } else {
          
          if (!mainMenuItem.hasAttribute('tabindex')) {
            mainMenuItem.setAttribute('tabindex', '0');
          }
          mainMenuItem.focus(); 
          mainMenuItem.click(); 
        }
      } else if (burgerButton) {
        
        burgerButton.setAttribute('aria-expanded', 'false');
        burgerButton.focus();
      }
      
      
      if (burgerButton) {
        burgerButton.setAttribute('aria-expanded', 'false');
      }
    }
  }

  
  function handleKeyDown(e) {
    if (e.key === 'Escape') {
      e.preventDefault();
      closeMenu();
    } else if (e.key === 'Tab') {
      if (e.shiftKey) {
        
        if (document.activeElement === firstFocusableElement) {
          e.preventDefault();
          lastFocusableElement.focus();
        }
      } else {
        
        if (document.activeElement === lastFocusableElement) {
          e.preventDefault();
          firstFocusableElement.focus();
        }
      }
    }
  }

  
  const observer = new MutationObserver((mutations) => {
    menu = document.getElementById('av-burger-menu-ul');
    if (menu) {
     
      getFocusableElements();
      if (focusableElements.length > 0) {
        firstFocusableElement.focus();
        document.addEventListener('keydown', handleKeyDown);
      }
     
      if (burgerButton) {
        burgerButton.setAttribute('aria-expanded', 'true');
      }
    } else {
     
      document.removeEventListener('keydown', handleKeyDown);
      if (burgerButton) {
        burgerButton.setAttribute('aria-expanded', 'false');
      }
    }
  });


  observer.observe(document.body, { childList: true, subtree: true });


  window.addEventListener('unload', () => {
    observer.disconnect();
  });
}


document.addEventListener('DOMContentLoaded', trapFocusInBurgerMenu);
</script>
  <?php
}
add_action( 'wp_footer', 'trap_focus_in_burger_menu_esc_to_close', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
This is because the mobile menu “av-burger-menu-ul” is not loaded until the burger menu is clicked when you use the desktop menu, it is when you use the burger menu for desktops. But mobile devices don’t have a tab key.

Best regards,
Mike

Hi,
I see that we can tab though the flip box links, but since the flip boxes only flip on mouse-over I don’t see a way to flip them via tabing.
If you would like to request this feature please post in our Github Feature Request page for the Dev Team to review.

Best regards,
Mike