PLANET-8026 Trapped focus within mobile nav menu when open

- Updated codebase to trap focus with mobile menu when open

Author: Osong-Michael

assets/src/js/header/setupAccessibleNavMenu.js

@@ -5,6 +5,9 @@ const NAV_DONATE_CLASS = '.nav-donate';
 const NAV_SUBMENU_CLASS = '.nav-submenu';
 const SITE_LOGO_CLASS = '.site-logo';
 const NAV_MENU_CLOSE_CLASS = '.nav-menu-close';
+const MOBILE_NAV_ID = '#nav-main';
+const PAGE_WRAPPER_ID = '#content';
+const NAV_MENU_TOGGLE_CLASS = '.nav-menu-toggle';
 
 /**
  * Function to handle keyboard accessibility in the navigation menu.
@@ -121,6 +124,9 @@ export const setupAccessibleNavMenu = () => {
   }
 
   if (mobileNav) {
+    const doc = mobileNav.ownerDocument;
+    let lastFocusedElement = null;
+    const isMobileMenuOpen = () => mobileNav.classList.contains('open');
     /**
      * Adds event listeners to create a keyboard trap between the buttons.
      */
@@ -156,10 +162,16 @@ export const setupAccessibleNavMenu = () => {
         return;
       }
 
-      hamburgerBtn.addEventListener('keydown', event => {
-        if (event.key === 'Enter') {
-          setTimeout(() => logo.focus(), 0);
-        }
+      hamburgerBtn.addEventListener('click', () => {
+        lastFocusedElement = doc.activeElement;
+
+        // Wait for CSS class to apply
+        requestAnimationFrame(() => {
+          if (isMobileMenuOpen()) {
+            syncMobileNavAria(true);
+            logo.focus();
+          }
+        });
       });
     };
 
@@ -168,21 +180,25 @@ export const setupAccessibleNavMenu = () => {
      */
     const focusLogoOnMenuClose = () => {
       const closeBtn = mobileNav.querySelector(NAV_MENU_CLOSE_CLASS);
-      const hamburgerLogo = mobileNav.querySelector(SITE_LOGO_CLASS);
-      const mainLogo = document.querySelector(`#header ${SITE_LOGO_CLASS}`);
+      const toggleBtn = document.querySelector(NAV_MENU_TOGGLE_CLASS);
 
-      if (!mainLogo || !hamburgerLogo || !closeBtn) {
+      if (!closeBtn || !toggleBtn) {
         return;
       }
 
-      closeBtn.addEventListener('keydown', event => {
-        if (event.key === 'Enter') {
-          setTimeout(() => mainLogo.focus(), 0);
-        }
-        if (event.key === 'Tab' && event.shiftKey) {
-          setTimeout(() => hamburgerLogo.focus(), 0);
-        }
+      closeBtn.addEventListener('click', () => {
+        const page = document.querySelector(PAGE_WRAPPER_ID);
+        page.removeAttribute('aria-hidden');
+        page.inert = false;
+
+
+        requestAnimationFrame(() => {
+          (lastFocusedElement || toggleBtn).focus();
+          mobileNav.setAttribute('aria-hidden', 'true');
+          toggleBtn.setAttribute('aria-expanded', 'false');
+        });
       });
+
     };
 
     addKeyboardTrap();
@@ -209,3 +225,36 @@ export const updateNavMenuTabIndex = () => {
   ];
   tabbingItems.forEach(item => item.setAttribute('tabindex', menu.classList.contains('open') ? 0 : -1));
 };
+
+/**
+ * Function to update aria attributes for mobile navigation.
+ * @param {boolean} isOpen - Whether the mobile navigation is open.
+ */
+const syncMobileNavAria = isOpen => {
+  const mobileNav = document.querySelector(MOBILE_NAV_ID);
+  const page = document.querySelector(PAGE_WRAPPER_ID);
+  const toggleBtn = document.querySelector(NAV_MENU_TOGGLE_CLASS);
+
+  if (!mobileNav || !page || !toggleBtn) {
+    return;
+  }
+
+  // Mobile menu
+  if (isOpen) {
+    mobileNav.removeAttribute('aria-hidden');
+  } else {
+    mobileNav.setAttribute('aria-hidden', 'true');
+  }
+
+  // Page behind
+  if (isOpen) {
+    page.setAttribute('aria-hidden', 'true');
+    page.inert = true;
+  } else {
+    page.removeAttribute('aria-hidden');
+    page.inert = false;
+  }
+
+  // Toggle button state
+  toggleBtn.setAttribute('aria-expanded', String(isOpen));
+};

templates/burger-menu.twig

@@ -1,4 +1,10 @@
-<div id="nav-main" class="burger-menu d-lg-none">
+<div
+  id="nav-main"
+  class="burger-menu d-lg-none"
+  role="dialog"
+  aria-modal="true"
+  aria-label="{{ __( 'Main navigation menu', 'planet4-master-theme' ) }}"
+>
     <div class="burger-menu-header">
         <a
             tabindex="-1"