@hortonstudio/main 1.2.34 → 1.4.0

package/autoInit/navbar.js

@@ -1,81 +1,177 @@
+// Global accessibility state
+let supportsInert = null;
+let screenReaderLiveRegion = null;
+
 export const init = () => {
+  // Ensure DOM is ready before initializing
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initializeNavbar);
+  } else {
+    initializeNavbar();
+  }
+  return { result: "navbar initialized" };
+};
+
+function initializeNavbar() {
+  setupAccessibilityFeatures();
   setupDynamicDropdowns();
   setupMobileMenuButton();
   setupMobileMenuARIA();
   setupMobileMenuBreakpointHandler();
-  return { result: 'navbar initialized' };
-};
+}
+
+// Accessibility features setup
+function setupAccessibilityFeatures() {
+  // Check inert support once
+  supportsInert = "inert" in HTMLElement.prototype;
+
+  // Create screen reader live region only if body exists
+  if (document.body) {
+    screenReaderLiveRegion = document.createElement("div");
+    screenReaderLiveRegion.setAttribute("aria-live", "polite");
+    screenReaderLiveRegion.setAttribute("aria-atomic", "true");
+    screenReaderLiveRegion.className = "u-sr-only";
+    screenReaderLiveRegion.style.cssText =
+      "position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;";
+    document.body.appendChild(screenReaderLiveRegion);
+  }
+}
+
+// Inert polyfill for browsers that don't support it
+function setElementInert(element, isInert) {
+  if (supportsInert) {
+    element.inert = isInert;
+  } else {
+    // Polyfill: manage tabindex for all focusable elements
+    const focusableSelectors =
+      'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
+    const focusableElements = element.querySelectorAll(focusableSelectors);
+
+    if (isInert) {
+      // Store original tabindex values and disable
+      focusableElements.forEach((el) => {
+        const currentTabindex = el.getAttribute("tabindex");
+        el.setAttribute("data-inert-tabindex", currentTabindex || "0");
+        el.setAttribute("tabindex", "-1");
+      });
+      element.setAttribute("data-inert", "true");
+    } else {
+      // Restore original tabindex values
+      focusableElements.forEach((el) => {
+        const originalTabindex = el.getAttribute("data-inert-tabindex");
+        if (originalTabindex === "0") {
+          el.removeAttribute("tabindex");
+        } else if (originalTabindex) {
+          el.setAttribute("tabindex", originalTabindex);
+        }
+        el.removeAttribute("data-inert-tabindex");
+      });
+      element.removeAttribute("data-inert");
+    }
+  }
+}
+
+// Screen reader announcements
+function announceToScreenReader(message) {
+  if (screenReaderLiveRegion) {
+    screenReaderLiveRegion.textContent = message;
+
+    // Clear after a delay to allow for repeat announcements
+    setTimeout(() => {
+      screenReaderLiveRegion.textContent = "";
+    }, 1000);
+  }
+}
+
+// Extract menu name from element text or aria-label
+function getMenuName(element) {
+  const text =
+    (element.textContent && element.textContent.trim()) ||
+    element.getAttribute("aria-label") ||
+    "menu";
+  return text
+    .replace(/^(Open|Close)\s+/i, "")
+    .replace(/\s+(menu|navigation)$/i, "");
+}
 
 // Desktop dropdown system
 function setupDynamicDropdowns() {
-  const dropdownWrappers = document.querySelectorAll('[data-hs-nav="dropdown"]');
+  const dropdownWrappers = document.querySelectorAll(
+    '[data-hs-nav="dropdown"]',
+  );
   const allDropdowns = [];
-  
+
   const closeAllDropdowns = (exceptWrapper = null) => {
-    allDropdowns.forEach(dropdown => {
+    allDropdowns.forEach((dropdown) => {
       if (dropdown.wrapper !== exceptWrapper && dropdown.isOpen) {
         dropdown.closeDropdown();
       }
     });
   };
-  
-  dropdownWrappers.forEach(wrapper => {
-    const toggle = wrapper.querySelector('a');
+
+  dropdownWrappers.forEach((wrapper) => {
+    const toggle = wrapper.querySelector("a");
     if (!toggle) return;
-    
-    const allElements = wrapper.querySelectorAll('*');
+
+    const allElements = wrapper.querySelectorAll("*");
     let dropdownList = null;
-    
+
     for (const element of allElements) {
-      const links = element.querySelectorAll('a');
+      const links = element.querySelectorAll("a");
       if (links.length >= 2 && !element.contains(toggle)) {
         dropdownList = element;
         break;
       }
     }
-    
+
     if (!dropdownList) return;
-    
-    const toggleText = toggle.textContent?.trim() || 'dropdown';
+
+    const toggleText =
+      (toggle.textContent && toggle.textContent.trim()) || "dropdown";
     const sanitizedText = sanitizeForID(toggleText);
     const toggleId = `navbar-dropdown-${sanitizedText}-toggle`;
     const listId = `navbar-dropdown-${sanitizedText}-list`;
-    
+
     toggle.id = toggleId;
-    toggle.setAttribute('aria-haspopup', 'menu');
-    toggle.setAttribute('aria-expanded', 'false');
-    toggle.setAttribute('aria-controls', listId);
-    
+    toggle.setAttribute("aria-haspopup", "menu");
+    toggle.setAttribute("aria-expanded", "false");
+    toggle.setAttribute("aria-controls", listId);
+
     dropdownList.id = listId;
-    dropdownList.setAttribute('role', 'menu');
-    dropdownList.setAttribute('aria-hidden', 'true');
-    
-    const menuItems = dropdownList.querySelectorAll('a');
-    menuItems.forEach(item => {
-      item.setAttribute('role', 'menuitem');
-      item.setAttribute('tabindex', '-1');
+    dropdownList.setAttribute("role", "menu");
+    dropdownList.setAttribute("aria-hidden", "true");
+
+    const menuItems = dropdownList.querySelectorAll("a");
+    menuItems.forEach((item) => {
+      item.setAttribute("role", "menuitem");
+      item.setAttribute("tabindex", "-1");
     });
-    
+
     let isOpen = false;
     let currentMenuItemIndex = -1;
-    
+
     function openDropdown() {
       if (isOpen) return;
       closeAllDropdowns(wrapper);
       isOpen = true;
-      toggle.setAttribute('aria-expanded', 'true');
-      dropdownList.setAttribute('aria-hidden', 'false');
-      menuItems.forEach(item => {
-        item.setAttribute('tabindex', '0');
+      toggle.setAttribute("aria-expanded", "true");
+      dropdownList.setAttribute("aria-hidden", "false");
+      menuItems.forEach((item) => {
+        item.setAttribute("tabindex", "0");
       });
-      const clickEvent = new MouseEvent('click', {
+
+      // Announce to screen readers
+      const menuName = getMenuName(toggle);
+      announceToScreenReader(`${menuName} menu opened`);
+
+      const clickEvent = new MouseEvent("click", {
         bubbles: true,
         cancelable: true,
-        view: window
+        view: window,
       });
       wrapper.dispatchEvent(clickEvent);
     }
-    
+
     function closeDropdown() {
       if (!isOpen) return;
       const shouldRestoreFocus = dropdownList.contains(document.activeElement);
@@ -84,71 +180,80 @@ function setupDynamicDropdowns() {
       if (shouldRestoreFocus) {
         toggle.focus();
       }
-      toggle.setAttribute('aria-expanded', 'false');
-      dropdownList.setAttribute('aria-hidden', 'true');
-      menuItems.forEach(item => {
-        item.setAttribute('tabindex', '-1');
+      toggle.setAttribute("aria-expanded", "false");
+      dropdownList.setAttribute("aria-hidden", "true");
+      menuItems.forEach((item) => {
+        item.setAttribute("tabindex", "-1");
       });
-      const clickEvent = new MouseEvent('click', {
+
+      // Announce to screen readers
+      const menuName = getMenuName(toggle);
+      announceToScreenReader(`${menuName} menu closed`);
+
+      const clickEvent = new MouseEvent("click", {
         bubbles: true,
         cancelable: true,
-        view: window
+        view: window,
       });
       wrapper.dispatchEvent(clickEvent);
     }
-    
-    wrapper.addEventListener('mouseenter', () => {
+
+    wrapper.addEventListener("mouseenter", () => {
       if (!isOpen) {
-        const clickEvent = new MouseEvent('click', {
+        const clickEvent = new MouseEvent("click", {
           bubbles: true,
           cancelable: true,
-          view: window
+          view: window,
         });
         wrapper.dispatchEvent(clickEvent);
         closeAllDropdowns(wrapper);
         isOpen = true;
-        toggle.setAttribute('aria-expanded', 'true');
-        dropdownList.setAttribute('aria-hidden', 'false');
-        menuItems.forEach(item => {
-          item.setAttribute('tabindex', '0');
+        toggle.setAttribute("aria-expanded", "true");
+        dropdownList.setAttribute("aria-hidden", "false");
+        menuItems.forEach((item) => {
+          item.setAttribute("tabindex", "0");
         });
       }
     });
-    
-    wrapper.addEventListener('mouseleave', () => {
+
+    wrapper.addEventListener("mouseleave", () => {
       if (isOpen) {
         if (dropdownList.contains(document.activeElement)) {
           toggle.focus();
         }
-        const clickEvent = new MouseEvent('click', {
+        const clickEvent = new MouseEvent("click", {
           bubbles: true,
           cancelable: true,
-          view: window
+          view: window,
         });
         wrapper.dispatchEvent(clickEvent);
         isOpen = false;
-        toggle.setAttribute('aria-expanded', 'false');
-        dropdownList.setAttribute('aria-hidden', 'true');
-        menuItems.forEach(item => {
-          item.setAttribute('tabindex', '-1');
+        toggle.setAttribute("aria-expanded", "false");
+        dropdownList.setAttribute("aria-hidden", "true");
+        menuItems.forEach((item) => {
+          item.setAttribute("tabindex", "-1");
         });
         currentMenuItemIndex = -1;
       }
     });
-    
-    document.addEventListener('keydown', function(e) {
+
+    document.addEventListener("keydown", function (e) {
       if (!isOpen) return;
       if (!wrapper.contains(document.activeElement)) return;
-      
-      if (e.key === 'ArrowDown') {
+
+      if (e.key === "ArrowDown") {
         e.preventDefault();
         if (document.activeElement === toggle) {
           currentMenuItemIndex = 0;
           menuItems[currentMenuItemIndex].focus();
         } else {
           if (currentMenuItemIndex === menuItems.length - 1) {
-            const nextElement = wrapper.nextElementSibling?.querySelector('a, button') || 
-                               document.querySelector('.navbar_cartsearch_wrap a, .navbar_cartsearch_wrap button');
+            const nextElement =
+              (wrapper.nextElementSibling &&
+                wrapper.nextElementSibling.querySelector("a, button")) ||
+              document.querySelector(
+                ".navbar_cartsearch_wrap a, .navbar_cartsearch_wrap button",
+              );
             if (nextElement) {
               closeDropdown();
               nextElement.focus();
@@ -158,14 +263,16 @@ function setupDynamicDropdowns() {
           currentMenuItemIndex = (currentMenuItemIndex + 1) % menuItems.length;
           menuItems[currentMenuItemIndex].focus();
         }
-      } else if (e.key === 'ArrowUp') {
+      } else if (e.key === "ArrowUp") {
         e.preventDefault();
         if (document.activeElement === toggle) {
           currentMenuItemIndex = menuItems.length - 1;
           menuItems[currentMenuItemIndex].focus();
         } else {
           if (currentMenuItemIndex === 0) {
-            const prevElement = wrapper.previousElementSibling?.querySelector('a, button');
+            const prevElement =
+              wrapper.previousElementSibling &&
+              wrapper.previousElementSibling.querySelector("a, button");
             if (prevElement) {
               closeDropdown();
               prevElement.focus();
@@ -176,10 +283,13 @@ function setupDynamicDropdowns() {
               return;
             }
           }
-          currentMenuItemIndex = currentMenuItemIndex <= 0 ? menuItems.length - 1 : currentMenuItemIndex - 1;
+          currentMenuItemIndex =
+            currentMenuItemIndex <= 0
+              ? menuItems.length - 1
+              : currentMenuItemIndex - 1;
           menuItems[currentMenuItemIndex].focus();
         }
-      } else if (e.key === 'Tab') {
+      } else if (e.key === "Tab") {
         if (e.shiftKey) {
           if (document.activeElement === menuItems[0]) {
             e.preventDefault();
@@ -189,8 +299,12 @@ function setupDynamicDropdowns() {
         } else {
           if (document.activeElement === menuItems[menuItems.length - 1]) {
             e.preventDefault();
-            const nextElement = wrapper.nextElementSibling?.querySelector('a, button') || 
-                               document.querySelector('.navbar_cartsearch_wrap a, .navbar_cartsearch_wrap button');
+            const nextElement =
+              (wrapper.nextElementSibling &&
+                wrapper.nextElementSibling.querySelector("a, button")) ||
+              document.querySelector(
+                ".navbar_cartsearch_wrap a, .navbar_cartsearch_wrap button",
+              );
             closeDropdown();
             if (nextElement) {
               setTimeout(() => {
@@ -199,32 +313,32 @@ function setupDynamicDropdowns() {
             }
           }
         }
-      } else if (e.key === 'Escape') {
+      } else if (e.key === "Escape") {
         e.preventDefault();
         closeDropdown();
         toggle.focus();
-      } else if (e.key === 'Home') {
+      } else if (e.key === "Home") {
         e.preventDefault();
         currentMenuItemIndex = 0;
         menuItems[0].focus();
-      } else if (e.key === 'End') {
+      } else if (e.key === "End") {
         e.preventDefault();
         currentMenuItemIndex = menuItems.length - 1;
         menuItems[menuItems.length - 1].focus();
-      } else if (e.key === ' ') {
+      } else if (e.key === " ") {
         e.preventDefault();
       }
     });
-    
-    toggle.addEventListener('keydown', function(e) {
-      if (e.key === 'ArrowDown') {
+
+    toggle.addEventListener("keydown", function (e) {
+      if (e.key === "ArrowDown") {
         e.preventDefault();
         openDropdown();
         if (menuItems.length > 0) {
           currentMenuItemIndex = 0;
           setTimeout(() => menuItems[0].focus(), 100);
         }
-      } else if (e.key === ' ') {
+      } else if (e.key === " ") {
         e.preventDefault();
         if (isOpen) {
           closeDropdown();
@@ -235,7 +349,7 @@ function setupDynamicDropdowns() {
             setTimeout(() => menuItems[0].focus(), 100);
           }
         }
-      } else if (e.key === 'ArrowUp') {
+      } else if (e.key === "ArrowUp") {
         e.preventDefault();
         if (isOpen) {
           currentMenuItemIndex = menuItems.length - 1;
@@ -243,29 +357,29 @@ function setupDynamicDropdowns() {
         } else {
           closeDropdown();
         }
-      } else if (e.key === 'Escape') {
+      } else if (e.key === "Escape") {
         e.preventDefault();
         closeDropdown();
       }
     });
-    
-    document.addEventListener('click', function(e) {
+
+    document.addEventListener("click", function (e) {
       if (!wrapper.contains(e.target) && isOpen) {
         closeDropdown();
       }
     });
-    
+
     allDropdowns.push({
       wrapper,
       isOpen: () => isOpen,
       closeDropdown,
       toggle,
-      dropdownList
+      dropdownList,
     });
   });
-  
-  document.addEventListener('focusin', function(e) {
-    allDropdowns.forEach(dropdown => {
+
+  document.addEventListener("focusin", function (e) {
+    allDropdowns.forEach((dropdown) => {
       if (dropdown.isOpen() && !dropdown.wrapper.contains(e.target)) {
         dropdown.closeDropdown();
       }
@@ -277,66 +391,73 @@ function setupDynamicDropdowns() {
 
 // Desktop left/right arrow navigation
 function addDesktopArrowNavigation() {
-  document.addEventListener('keydown', function(e) {
-    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
-    
+  document.addEventListener("keydown", function (e) {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+
     const mobileMenu = document.querySelector('[data-hs-nav="menu"]');
     if (mobileMenu && mobileMenu.contains(document.activeElement)) return;
-    
-    const navbar = document.querySelector('[data-hs-nav="wrapper"]') || 
-                   document.querySelector('.navbar_component') || 
-                   document.querySelector('nav[role="navigation"]') ||
-                   document.querySelector('nav');
-    
+
+    const navbar =
+      document.querySelector('[data-hs-nav="wrapper"]') ||
+      document.querySelector(".navbar_component") ||
+      document.querySelector('nav[role="navigation"]') ||
+      document.querySelector("nav");
+
     if (!navbar || !navbar.contains(document.activeElement)) return;
-    
-    const openDropdownList = navbar.querySelector('[aria-hidden="false"][role="menu"]');
-    if (openDropdownList && openDropdownList.contains(document.activeElement)) return;
-    
+
+    const openDropdownList = navbar.querySelector(
+      '[aria-hidden="false"][role="menu"]',
+    );
+    if (openDropdownList && openDropdownList.contains(document.activeElement))
+      return;
+
     e.preventDefault();
-    
-    const allNavbarElements = navbar.querySelectorAll('a, button');
-    const focusableElements = Array.from(allNavbarElements).filter(el => {
-      if (el.getAttribute('tabindex') === '-1') return false;
-      
+
+    const allNavbarElements = navbar.querySelectorAll("a, button");
+    const focusableElements = Array.from(allNavbarElements).filter((el) => {
+      if (el.getAttribute("tabindex") === "-1") return false;
+
       const isInDropdownList = el.closest('[role="menu"]');
       if (isInDropdownList) return false;
-      
+
       const isInMobileMenu = el.closest('[data-hs-nav="menu"]');
       if (isInMobileMenu) return false;
-      
+
       const computedStyle = window.getComputedStyle(el);
-      const isHidden = computedStyle.display === 'none' || 
-                      computedStyle.visibility === 'hidden' ||
-                      computedStyle.opacity === '0' ||
-                      el.offsetWidth === 0 || 
-                      el.offsetHeight === 0;
+      const isHidden =
+        computedStyle.display === "none" ||
+        computedStyle.visibility === "hidden" ||
+        computedStyle.opacity === "0" ||
+        el.offsetWidth === 0 ||
+        el.offsetHeight === 0;
       if (isHidden) return false;
-      
+
       let parent = el.parentElement;
       while (parent && parent !== navbar) {
         const parentStyle = window.getComputedStyle(parent);
-        const parentHidden = parentStyle.display === 'none' || 
-                           parentStyle.visibility === 'hidden' ||
-                           parent.offsetWidth === 0 || 
-                           parent.offsetHeight === 0;
+        const parentHidden =
+          parentStyle.display === "none" ||
+          parentStyle.visibility === "hidden" ||
+          parent.offsetWidth === 0 ||
+          parent.offsetHeight === 0;
         if (parentHidden) return false;
         parent = parent.parentElement;
       }
-      
+
       return true;
     });
-    
+
     const currentIndex = focusableElements.indexOf(document.activeElement);
     if (currentIndex === -1) return;
-    
+
     let nextIndex;
-    if (e.key === 'ArrowRight') {
+    if (e.key === "ArrowRight") {
       nextIndex = (currentIndex + 1) % focusableElements.length;
     } else {
-      nextIndex = currentIndex === 0 ? focusableElements.length - 1 : currentIndex - 1;
+      nextIndex =
+        currentIndex === 0 ? focusableElements.length - 1 : currentIndex - 1;
     }
-    
+
     focusableElements[nextIndex].focus();
   });
 }
@@ -345,233 +466,287 @@ function addDesktopArrowNavigation() {
 function setupMobileMenuButton() {
   const menuButton = document.querySelector('[data-hs-nav="menubtn"]');
   const mobileMenu = document.querySelector('[data-hs-nav="menu"]');
-  
+
   if (!menuButton || !mobileMenu) return;
-  
+
   const menuId = `mobile-menu-${Date.now()}`;
-  
-  menuButton.setAttribute('aria-expanded', 'false');
-  menuButton.setAttribute('aria-controls', menuId);
-  menuButton.setAttribute('aria-label', 'Open navigation menu');
-  
+
+  menuButton.setAttribute("aria-expanded", "false");
+  menuButton.setAttribute("aria-controls", menuId);
+  menuButton.setAttribute("aria-label", "Open navigation menu");
+
   mobileMenu.id = menuId;
-  mobileMenu.setAttribute('role', 'dialog');
-  mobileMenu.setAttribute('aria-modal', 'true');
-  mobileMenu.inert = true;
-  
+  mobileMenu.setAttribute("role", "dialog");
+  mobileMenu.setAttribute("aria-modal", "true");
+  setElementInert(mobileMenu, true);
+
   let isMenuOpen = false;
-  
+
   function shouldPreventMobileMenu() {
-    const menuSizeElement = document.querySelector('.menu-size.is-mobile');
-    if (!menuSizeElement) return false;
-    
-    const computedStyle = window.getComputedStyle(menuSizeElement);
-    return computedStyle.display === 'none';
+    const menuHideElement = document.querySelector(".menu-hide.is-mobile");
+    if (!menuHideElement) return false;
+
+    const computedStyle = window.getComputedStyle(menuHideElement);
+    return computedStyle.display === "none";
   }
-  
+
   function openMenu() {
     if (isMenuOpen || shouldPreventMobileMenu()) return;
     isMenuOpen = true;
-    
-    // Add body overflow hidden class
-    document.body.classList.add('u-overflow-hidden');
-    
-    // Add blur effect to modal blur elements
-    document.querySelectorAll('[data-hs-nav="modal-blur"]').forEach(element => {
-      element.style.display = 'block';
-      element.style.opacity = '0.5';
-      element.style.transition = 'opacity 0.3s ease';
-    });
-    
-    menuButton.setAttribute('aria-expanded', 'true');
-    menuButton.setAttribute('aria-label', 'Close navigation menu');
-    mobileMenu.inert = false;
-    
-    // Prevent tabbing outside navbar using tabindex management
-    const navbarWrapper = document.querySelector('[data-hs-nav="wrapper"]') || 
-                          document.querySelector('.navbar_component') || 
-                          document.querySelector('nav[role="navigation"]') ||
-                          document.querySelector('nav');
-    
-    const allFocusableElements = document.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
-    allFocusableElements.forEach(el => {
-      if (navbarWrapper && !navbarWrapper.contains(el)) {
-        el.setAttribute('data-mobile-menu-tabindex', el.getAttribute('tabindex') || '0');
-        el.setAttribute('tabindex', '-1');
-      }
-    });
-    
-    const clickEvent = new MouseEvent('click', {
-      bubbles: true,
-      cancelable: true,
-      view: window
-    });
-    menuButton.dispatchEvent(clickEvent);
+
+    try {
+      // Add body overflow hidden class
+      document.body.classList.add("u-overflow-hidden");
+
+      // Add blur effect to modal blur elements
+      document
+        .querySelectorAll('[data-hs-nav="modal-blur"]')
+        .forEach((element) => {
+          element.style.display = "block";
+          element.style.opacity = "0.5";
+          element.style.transition = "opacity 0.3s ease";
+        });
+
+      menuButton.setAttribute("aria-expanded", "true");
+      menuButton.setAttribute("aria-label", "Close navigation menu");
+      setElementInert(mobileMenu, false);
+
+      // Announce to screen readers
+      const menuName = getMenuName(menuButton);
+      announceToScreenReader(`${menuName} opened`);
+
+      // Prevent tabbing outside navbar using tabindex management
+      const navbarWrapper =
+        document.querySelector('[data-hs-nav="wrapper"]') ||
+        document.querySelector(".navbar_component") ||
+        document.querySelector('nav[role="navigation"]') ||
+        document.querySelector("nav");
+
+      const allFocusableElements = document.querySelectorAll(
+        'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+      allFocusableElements.forEach((el) => {
+        if (navbarWrapper && !navbarWrapper.contains(el)) {
+          el.setAttribute(
+            "data-mobile-menu-tabindex",
+            el.getAttribute("tabindex") || "0",
+          );
+          el.setAttribute("tabindex", "-1");
+        }
+      });
+
+      const clickEvent = new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+      });
+      menuButton.dispatchEvent(clickEvent);
+    } catch (e) {
+      // DOM operation failed, restore state
+      isMenuOpen = false;
+      menuButton.setAttribute("aria-expanded", "false");
+      menuButton.setAttribute("aria-label", "Open navigation menu");
+    }
   }
-  
+
   function closeMenu() {
     if (!isMenuOpen) return;
     isMenuOpen = false;
-    
-    // Remove body overflow hidden class
-    document.body.classList.remove('u-overflow-hidden');
-    
-    // Remove blur effect from modal blur elements
-    document.querySelectorAll('[data-hs-nav="modal-blur"]').forEach(element => {
-      element.style.opacity = '0';
-      element.style.transition = 'opacity 0.3s ease';
-      setTimeout(() => {
-        element.style.display = 'none';
-      }, 300);
-    });
-    
-    if (mobileMenu.contains(document.activeElement)) {
-      menuButton.focus();
-    }
-    menuButton.setAttribute('aria-expanded', 'false');
-    menuButton.setAttribute('aria-label', 'Open navigation menu');
-    mobileMenu.inert = true;
-    
-    // Restore tabbing to entire page using tabindex management
-    const elementsToRestore = document.querySelectorAll('[data-mobile-menu-tabindex]');
-    elementsToRestore.forEach(el => {
-      const originalTabindex = el.getAttribute('data-mobile-menu-tabindex');
-      if (originalTabindex === '0') {
-        el.removeAttribute('tabindex');
-      } else {
-        el.setAttribute('tabindex', originalTabindex);
+
+    try {
+      // Remove body overflow hidden class
+      document.body.classList.remove("u-overflow-hidden");
+
+      // Remove blur effect from modal blur elements
+      document
+        .querySelectorAll('[data-hs-nav="modal-blur"]')
+        .forEach((element) => {
+          element.style.opacity = "0";
+          element.style.transition = "opacity 0.3s ease";
+          setTimeout(() => {
+            element.style.display = "none";
+          }, 300);
+        });
+
+      if (mobileMenu.contains(document.activeElement)) {
+        menuButton.focus();
       }
-      el.removeAttribute('data-mobile-menu-tabindex');
-    });
-    
-    const clickEvent = new MouseEvent('click', {
-      bubbles: true,
-      cancelable: true,
-      view: window
-    });
-    menuButton.dispatchEvent(clickEvent);
+      menuButton.setAttribute("aria-expanded", "false");
+      menuButton.setAttribute("aria-label", "Open navigation menu");
+      setElementInert(mobileMenu, true);
+
+      // Announce to screen readers
+      const menuName = getMenuName(menuButton);
+      announceToScreenReader(`${menuName} closed`);
+
+      // Restore tabbing to entire page using tabindex management
+      const elementsToRestore = document.querySelectorAll(
+        "[data-mobile-menu-tabindex]",
+      );
+      elementsToRestore.forEach((el) => {
+        const originalTabindex = el.getAttribute("data-mobile-menu-tabindex");
+        if (originalTabindex === "0") {
+          el.removeAttribute("tabindex");
+        } else {
+          el.setAttribute("tabindex", originalTabindex);
+        }
+        el.removeAttribute("data-mobile-menu-tabindex");
+      });
+
+      const clickEvent = new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+      });
+      menuButton.dispatchEvent(clickEvent);
+    } catch (e) {
+      // DOM operation failed, ensure consistent state
+      isMenuOpen = false;
+      menuButton.setAttribute("aria-expanded", "false");
+      menuButton.setAttribute("aria-label", "Open navigation menu");
+    }
   }
-  
+
   function toggleMenu() {
     if (shouldPreventMobileMenu()) return;
-    
+
     if (isMenuOpen) {
       closeMenu();
     } else {
       openMenu();
     }
   }
-  
-  menuButton.addEventListener('keydown', function(e) {
-    if (e.key === 'Enter' || e.key === ' ') {
+
+  menuButton.addEventListener("keydown", function (e) {
+    if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
       toggleMenu();
-    } else if (e.key === 'ArrowDown') {
+    } else if (e.key === "ArrowDown") {
       e.preventDefault();
       if (!isMenuOpen) {
         openMenu();
       }
-      const firstElement = mobileMenu.querySelector('button, a');
+      const firstElement = mobileMenu.querySelector("button, a");
       if (firstElement) {
         firstElement.focus();
       }
-    } else if (e.key === 'ArrowUp') {
+    } else if (e.key === "ArrowUp") {
       e.preventDefault();
       if (isMenuOpen) {
         closeMenu();
       }
     }
   });
-  
-  menuButton.addEventListener('click', function(e) {
+
+  menuButton.addEventListener("click", function (e) {
     if (!e.isTrusted) return;
-    
+
     if (shouldPreventMobileMenu()) return;
-    
+
     if (isMenuOpen && mobileMenu.contains(document.activeElement)) {
       menuButton.focus();
     }
-    
+
     const newMenuState = !isMenuOpen;
     isMenuOpen = newMenuState;
-    
+
     // Handle body overflow class
     if (isMenuOpen) {
-      document.body.classList.add('u-overflow-hidden');
+      document.body.classList.add("u-overflow-hidden");
     } else {
-      document.body.classList.remove('u-overflow-hidden');
+      document.body.classList.remove("u-overflow-hidden");
     }
-    
+
     // Handle blur effect
-    document.querySelectorAll('[data-hs-nav="modal-blur"]').forEach(element => {
-      if (isMenuOpen) {
-        element.style.display = 'block';
-        element.style.opacity = '0.5';
-        element.style.transition = 'opacity 0.3s ease';
-      } else {
-        element.style.opacity = '0';
-        element.style.transition = 'opacity 0.3s ease';
-        setTimeout(() => {
-          element.style.display = 'none';
-        }, 300);
-      }
-    });
-    
-    menuButton.setAttribute('aria-expanded', isMenuOpen);
-    menuButton.setAttribute('aria-label', 
-      isMenuOpen ? 'Close navigation menu' : 'Open navigation menu'
+    document
+      .querySelectorAll('[data-hs-nav="modal-blur"]')
+      .forEach((element) => {
+        if (isMenuOpen) {
+          element.style.display = "block";
+          element.style.opacity = "0.5";
+          element.style.transition = "opacity 0.3s ease";
+        } else {
+          element.style.opacity = "0";
+          element.style.transition = "opacity 0.3s ease";
+          setTimeout(() => {
+            element.style.display = "none";
+          }, 300);
+        }
+      });
+
+    menuButton.setAttribute("aria-expanded", isMenuOpen);
+    menuButton.setAttribute(
+      "aria-label",
+      isMenuOpen ? "Close navigation menu" : "Open navigation menu",
     );
-    mobileMenu.inert = !isMenuOpen;
-    
+    setElementInert(mobileMenu, !isMenuOpen);
+
     // Handle tabindex management for external clicks
     if (isMenuOpen) {
-      const navbarWrapper = document.querySelector('[data-hs-nav="wrapper"]') || 
-                            document.querySelector('.navbar_component') || 
-                            document.querySelector('nav[role="navigation"]') ||
-                            document.querySelector('nav');
-      
-      const allFocusableElements = document.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
-      allFocusableElements.forEach(el => {
+      const navbarWrapper =
+        document.querySelector('[data-hs-nav="wrapper"]') ||
+        document.querySelector(".navbar_component") ||
+        document.querySelector('nav[role="navigation"]') ||
+        document.querySelector("nav");
+
+      const allFocusableElements = document.querySelectorAll(
+        'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+      allFocusableElements.forEach((el) => {
         if (navbarWrapper && !navbarWrapper.contains(el)) {
-          el.setAttribute('data-mobile-menu-tabindex', el.getAttribute('tabindex') || '0');
-          el.setAttribute('tabindex', '-1');
+          el.setAttribute(
+            "data-mobile-menu-tabindex",
+            el.getAttribute("tabindex") || "0",
+          );
+          el.setAttribute("tabindex", "-1");
         }
       });
     } else {
-      const elementsToRestore = document.querySelectorAll('[data-mobile-menu-tabindex]');
-      elementsToRestore.forEach(el => {
-        const originalTabindex = el.getAttribute('data-mobile-menu-tabindex');
-        if (originalTabindex === '0') {
-          el.removeAttribute('tabindex');
+      const elementsToRestore = document.querySelectorAll(
+        "[data-mobile-menu-tabindex]",
+      );
+      elementsToRestore.forEach((el) => {
+        const originalTabindex = el.getAttribute("data-mobile-menu-tabindex");
+        if (originalTabindex === "0") {
+          el.removeAttribute("tabindex");
         } else {
-          el.setAttribute('tabindex', originalTabindex);
+          el.setAttribute("tabindex", originalTabindex);
         }
-        el.removeAttribute('data-mobile-menu-tabindex');
+        el.removeAttribute("data-mobile-menu-tabindex");
       });
     }
   });
-  
+
   // Store the menu state and functions for breakpoint handler
   window.mobileMenuState = {
     isMenuOpen: () => isMenuOpen,
     closeMenu: closeMenu,
-    openMenu: openMenu
+    openMenu: openMenu,
   };
+
+  // Cleanup function for window.mobileMenuState
+  if (typeof window !== "undefined") {
+    window.addEventListener("unload", () => {
+      if (window.mobileMenuState) {
+        delete window.mobileMenuState;
+      }
+    });
+  }
 }
 
 // Mobile menu breakpoint handler
 function setupMobileMenuBreakpointHandler() {
   let preventedMenuState = false;
-  
+
   function handleBreakpointChange() {
-    const menuSizeElement = document.querySelector('.menu-size.is-mobile');
-    if (!menuSizeElement) return;
-    
-    const computedStyle = window.getComputedStyle(menuSizeElement);
-    const shouldPrevent = computedStyle.display === 'none';
-    
+    const menuHideElement = document.querySelector(".menu-hide.is-mobile");
+    if (!menuHideElement) return;
+
+    const computedStyle = window.getComputedStyle(menuHideElement);
+    const shouldPrevent = computedStyle.display === "none";
+
     if (!window.mobileMenuState) return;
-    
+
     if (shouldPrevent && window.mobileMenuState.isMenuOpen()) {
       // Store that the menu was open before being prevented
       preventedMenuState = true;
@@ -582,19 +757,24 @@ function setupMobileMenuBreakpointHandler() {
       window.mobileMenuState.openMenu();
     }
   }
-  
+
   // Use ResizeObserver for more accurate detection
-  if (window.ResizeObserver) {
-    const resizeObserver = new ResizeObserver(handleBreakpointChange);
-    const menuSizeElement = document.querySelector('.menu-size.is-mobile');
-    if (menuSizeElement) {
-      resizeObserver.observe(menuSizeElement);
+  if (typeof ResizeObserver !== "undefined") {
+    try {
+      const resizeObserver = new ResizeObserver(handleBreakpointChange);
+      const menuHideElement = document.querySelector(".menu-hide.is-mobile");
+      if (menuHideElement) {
+        resizeObserver.observe(menuHideElement);
+      }
+    } catch (e) {
+      // ResizeObserver not supported or error occurred
+      // Silently fall back to resize event
     }
   }
-  
+
   // Fallback to resize event
-  window.addEventListener('resize', handleBreakpointChange);
-  
+  window.addEventListener("resize", handleBreakpointChange);
+
   // Initial check
   handleBreakpointChange();
 }
@@ -602,9 +782,9 @@ function setupMobileMenuBreakpointHandler() {
 function sanitizeForID(text) {
   return text
     .toLowerCase()
-    .replace(/[^a-z0-9\s]/g, '')
-    .replace(/\s+/g, '-')
-    .replace(/^-+|-+$/g, '')
+    .replace(/[^a-z0-9\s]/g, "")
+    .replace(/\s+/g, "-")
+    .replace(/^-+|-+$/g, "")
     .substring(0, 50);
 }
 
@@ -613,11 +793,11 @@ function setupMobileMenuARIA() {
   const menuContainer = document.querySelector('[data-hs-nav="menu"]');
   if (!menuContainer) return;
 
-  const buttons = menuContainer.querySelectorAll('button');
-  const links = menuContainer.querySelectorAll('a');
+  const buttons = menuContainer.querySelectorAll("button");
+  const links = menuContainer.querySelectorAll("a");
 
-  buttons.forEach(button => {
-    const buttonText = button.textContent?.trim();
+  buttons.forEach((button) => {
+    const buttonText = button.textContent && button.textContent.trim();
     if (!buttonText) return;
 
     const sanitizedText = sanitizeForID(buttonText);
@@ -625,57 +805,77 @@ function setupMobileMenuARIA() {
     const listId = `navbar-mobile-${sanitizedText}-list`;
 
     button.id = buttonId;
-    button.setAttribute('aria-expanded', 'false');
-    button.setAttribute('aria-controls', listId);
+    button.setAttribute("aria-expanded", "false");
+    button.setAttribute("aria-controls", listId);
 
-    let dropdownList = button.nextElementSibling;
-    
-    if (!dropdownList || !dropdownList.querySelector('a')) {
-      dropdownList = button.parentElement?.nextElementSibling;
-    }
-    
-    if (!dropdownList || !dropdownList.querySelector('a')) {
-      const parent = button.closest('[data-hs-nav="menu"]');
-      const allListElements = parent?.querySelectorAll('div, ul, nav');
-      dropdownList = Array.from(allListElements || []).find(el => 
-        el.querySelectorAll('a').length > 1 && 
-        !el.contains(button)
+    // Look for dropdown list in the same container as the button
+    let dropdownList = null;
+    const buttonContainer = button.closest(
+      '.menu-card_dropdown, .menu_contain, [data-hs-nav="menu"]',
+    );
+
+    if (buttonContainer) {
+      // First try to find a list element within the same container
+      dropdownList = buttonContainer.querySelector(
+        '.menu-card_list, .dropdown-list, [role="menu"]',
       );
+
+      // If not found, look for any element with multiple links that's not the button itself
+      if (!dropdownList || !dropdownList.querySelector("a")) {
+        const allListElements =
+          buttonContainer.querySelectorAll("div, ul, nav");
+        dropdownList = Array.from(allListElements).find(
+          (el) =>
+            el.querySelectorAll("a").length > 1 &&
+            !el.contains(button) &&
+            el !== button,
+        );
+      }
     }
 
-    if (dropdownList && dropdownList.querySelector('a')) {
+    if (dropdownList && dropdownList.querySelector("a")) {
       dropdownList.id = listId;
-      dropdownList.inert = true;
+      setElementInert(dropdownList, true);
 
-      button.addEventListener('click', function() {
-        const isExpanded = button.getAttribute('aria-expanded') === 'true';
+      button.addEventListener("click", function () {
+        const isExpanded = button.getAttribute("aria-expanded") === "true";
         const newState = !isExpanded;
-        button.setAttribute('aria-expanded', newState);
-        dropdownList.inert = !newState;
+        button.setAttribute("aria-expanded", newState);
+        setElementInert(dropdownList, !newState);
+
+        // Announce to screen readers
+        const menuName = getMenuName(button);
+        announceToScreenReader(
+          `${menuName} submenu ${newState ? "opened" : "closed"}`,
+        );
       });
     }
   });
 
-  links.forEach(link => {
-    const linkText = link.textContent?.trim();
+  links.forEach((link) => {
+    const linkText = link.textContent && link.textContent.trim();
     if (!linkText) return;
 
     const sanitizedText = sanitizeForID(linkText);
     const linkId = `navbar-mobile-${sanitizedText}-link`;
     link.id = linkId;
   });
-  
+
   setupMobileMenuArrowNavigation(menuContainer);
 }
 
 // Mobile menu arrow navigation
 function setupMobileMenuArrowNavigation(menuContainer) {
   function getFocusableElements() {
-    const allElements = menuContainer.querySelectorAll('button, a');
-    return Array.from(allElements).filter(el => {
+    const allElements = menuContainer.querySelectorAll("button, a");
+    return Array.from(allElements).filter((el) => {
       let current = el;
       while (current && current !== menuContainer) {
-        if (current.inert === true) {
+        // Check both native inert and polyfill inert
+        if (
+          current.inert === true ||
+          current.getAttribute("data-inert") === "true"
+        ) {
           return false;
         }
         current = current.parentElement;
@@ -683,17 +883,17 @@ function setupMobileMenuArrowNavigation(menuContainer) {
       return true;
     });
   }
-  
+
   let currentFocusIndex = -1;
-  
-  menuContainer.addEventListener('keydown', function(e) {
+
+  menuContainer.addEventListener("keydown", function (e) {
     const focusableElements = getFocusableElements();
     if (focusableElements.length === 0) return;
-    
+
     const activeElement = document.activeElement;
     currentFocusIndex = focusableElements.indexOf(activeElement);
-    
-    if (e.key === 'ArrowDown') {
+
+    if (e.key === "ArrowDown") {
       e.preventDefault();
       if (currentFocusIndex >= focusableElements.length - 1) {
         currentFocusIndex = 0;
@@ -701,10 +901,12 @@ function setupMobileMenuArrowNavigation(menuContainer) {
         currentFocusIndex = currentFocusIndex + 1;
       }
       focusableElements[currentFocusIndex].focus();
-    } else if (e.key === 'ArrowUp') {
+    } else if (e.key === "ArrowUp") {
       e.preventDefault();
       if (currentFocusIndex <= 0) {
-        const mobileMenuButton = document.querySelector('[data-hs-nav="menubtn"]');
+        const mobileMenuButton = document.querySelector(
+          '[data-hs-nav="menubtn"]',
+        );
         if (mobileMenuButton) {
           mobileMenuButton.focus();
           return;
@@ -712,40 +914,50 @@ function setupMobileMenuArrowNavigation(menuContainer) {
       }
       currentFocusIndex = currentFocusIndex - 1;
       focusableElements[currentFocusIndex].focus();
-    } else if (e.key === 'ArrowRight') {
+    } else if (e.key === "ArrowRight") {
       e.preventDefault();
-      if (activeElement.tagName === 'BUTTON' && activeElement.hasAttribute('aria-controls')) {
-        const isExpanded = activeElement.getAttribute('aria-expanded') === 'true';
+      if (
+        activeElement.tagName === "BUTTON" &&
+        activeElement.hasAttribute("aria-controls")
+      ) {
+        const isExpanded =
+          activeElement.getAttribute("aria-expanded") === "true";
         if (!isExpanded) {
           activeElement.click();
         }
         return;
       }
-    } else if (e.key === 'ArrowLeft') {
+    } else if (e.key === "ArrowLeft") {
       e.preventDefault();
-      if (activeElement.tagName === 'BUTTON' && activeElement.hasAttribute('aria-controls')) {
-        const isExpanded = activeElement.getAttribute('aria-expanded') === 'true';
+      if (
+        activeElement.tagName === "BUTTON" &&
+        activeElement.hasAttribute("aria-controls")
+      ) {
+        const isExpanded =
+          activeElement.getAttribute("aria-expanded") === "true";
         if (isExpanded) {
           activeElement.click();
         }
         return;
       }
-    } else if (e.key === 'Home') {
+    } else if (e.key === "Home") {
       e.preventDefault();
       currentFocusIndex = 0;
       focusableElements[0].focus();
-    } else if (e.key === 'End') {
+    } else if (e.key === "End") {
       e.preventDefault();
       currentFocusIndex = focusableElements.length - 1;
       focusableElements[focusableElements.length - 1].focus();
-    } else if (e.key === ' ' && activeElement.tagName === 'A') {
+    } else if (e.key === " " && activeElement.tagName === "A") {
       e.preventDefault();
-    } else if (e.key === 'Escape') {
-      const mobileMenuButton = document.querySelector('[data-hs-nav="menubtn"]');
+    } else if (e.key === "Escape") {
+      const mobileMenuButton = document.querySelector(
+        '[data-hs-nav="menubtn"]',
+      );
       if (mobileMenuButton) {
         mobileMenuButton.click();
         mobileMenuButton.focus();
       }
     }
   });
-}
+}