@hortonstudio/main 1.4.4 → 1.5.0

package/autoInit/navbar.js

@@ -1,98 +1,15 @@
-// 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();
-  }
+  initializeNavbar();
   return { result: "navbar initialized" };
 };
 
 function initializeNavbar() {
-  setupAccessibilityFeatures();
   setupDynamicDropdowns();
-  setupMobileMenuButton();
-  setupMobileMenuARIA();
-  setupMobileMenuBreakpointHandler();
+  setupMenuButton();
+  setupMenuARIA();
+  setupMenuDisplayObserver();
 }
 
-// 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() {
@@ -111,8 +28,6 @@ function setupDynamicDropdowns() {
 
   dropdownWrappers.forEach((wrapper) => {
     const toggle = wrapper.querySelector("a");
-    if (!toggle) return;
-
     const allElements = wrapper.querySelectorAll("*");
     let dropdownList = null;
 
@@ -124,10 +39,7 @@ function setupDynamicDropdowns() {
       }
     }
 
-    if (!dropdownList) return;
-
-    const toggleText =
-      (toggle.textContent && toggle.textContent.trim()) || "dropdown";
+    const toggleText = toggle.textContent?.trim() || "dropdown";
     const sanitizedText = sanitizeForID(toggleText);
     const toggleId = `navbar-dropdown-${sanitizedText}-toggle`;
     const listId = `navbar-dropdown-${sanitizedText}-list`;
@@ -160,10 +72,6 @@ function setupDynamicDropdowns() {
         item.setAttribute("tabindex", "0");
       });
 
-      // Announce to screen readers
-      const menuName = getMenuName(toggle);
-      announceToScreenReader(`${menuName} menu opened`);
-
       const clickEvent = new MouseEvent("click", {
         bubbles: true,
         cancelable: true,
@@ -186,10 +94,6 @@ function setupDynamicDropdowns() {
         item.setAttribute("tabindex", "-1");
       });
 
-      // Announce to screen readers
-      const menuName = getMenuName(toggle);
-      announceToScreenReader(`${menuName} menu closed`);
-
       const clickEvent = new MouseEvent("click", {
         bubbles: true,
         cancelable: true,
@@ -200,40 +104,13 @@ function setupDynamicDropdowns() {
 
     wrapper.addEventListener("mouseenter", () => {
       if (!isOpen) {
-        const clickEvent = new MouseEvent("click", {
-          bubbles: true,
-          cancelable: true,
-          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");
-        });
+        openDropdown();
       }
     });
 
     wrapper.addEventListener("mouseleave", () => {
       if (isOpen) {
-        if (dropdownList.contains(document.activeElement)) {
-          toggle.focus();
-        }
-        const clickEvent = new MouseEvent("click", {
-          bubbles: true,
-          cancelable: true,
-          view: window,
-        });
-        wrapper.dispatchEvent(clickEvent);
-        isOpen = false;
-        toggle.setAttribute("aria-expanded", "false");
-        dropdownList.setAttribute("aria-hidden", "true");
-        menuItems.forEach((item) => {
-          item.setAttribute("tabindex", "-1");
-        });
-        currentMenuItemIndex = -1;
+        closeDropdown();
       }
     });
 
@@ -249,19 +126,18 @@ function setupDynamicDropdowns() {
         } else {
           if (currentMenuItemIndex === menuItems.length - 1) {
             const nextElement =
-              (wrapper.nextElementSibling &&
-                wrapper.nextElementSibling.querySelector("a, button")) ||
-              document.querySelector(
-                ".navbar_cartsearch_wrap a, .navbar_cartsearch_wrap button",
-              );
+              wrapper.nextElementSibling &&
+              wrapper.nextElementSibling.querySelector("a, button");
             if (nextElement) {
               closeDropdown();
               nextElement.focus();
               return;
             }
           }
-          currentMenuItemIndex = (currentMenuItemIndex + 1) % menuItems.length;
-          menuItems[currentMenuItemIndex].focus();
+          if (currentMenuItemIndex < menuItems.length - 1) {
+            currentMenuItemIndex = currentMenuItemIndex + 1;
+            menuItems[currentMenuItemIndex].focus();
+          }
         }
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
@@ -283,11 +159,10 @@ function setupDynamicDropdowns() {
               return;
             }
           }
-          currentMenuItemIndex =
-            currentMenuItemIndex <= 0
-              ? menuItems.length - 1
-              : currentMenuItemIndex - 1;
-          menuItems[currentMenuItemIndex].focus();
+          if (currentMenuItemIndex > 0) {
+            currentMenuItemIndex = currentMenuItemIndex - 1;
+            menuItems[currentMenuItemIndex].focus();
+          }
         }
       } else if (e.key === "Tab") {
         if (e.shiftKey) {
@@ -300,16 +175,11 @@ function setupDynamicDropdowns() {
           if (document.activeElement === menuItems[menuItems.length - 1]) {
             e.preventDefault();
             const nextElement =
-              (wrapper.nextElementSibling &&
-                wrapper.nextElementSibling.querySelector("a, button")) ||
-              document.querySelector(
-                ".navbar_cartsearch_wrap a, .navbar_cartsearch_wrap button",
-              );
+              wrapper.nextElementSibling &&
+              wrapper.nextElementSibling.querySelector("a, button");
             closeDropdown();
             if (nextElement) {
-              setTimeout(() => {
-                nextElement.focus();
-              }, 10);
+              nextElement.focus();
             }
           }
         }
@@ -335,8 +205,10 @@ function setupDynamicDropdowns() {
         e.preventDefault();
         openDropdown();
         if (menuItems.length > 0) {
-          currentMenuItemIndex = 0;
-          setTimeout(() => menuItems[0].focus(), 100);
+          setTimeout(() => {
+            currentMenuItemIndex = 0;
+            menuItems[0].focus();
+          }, 100);
         }
       } else if (e.key === " ") {
         e.preventDefault();
@@ -346,7 +218,7 @@ function setupDynamicDropdowns() {
           openDropdown();
           if (menuItems.length > 0) {
             currentMenuItemIndex = 0;
-            setTimeout(() => menuItems[0].focus(), 100);
+            menuItems[0].focus();
           }
         }
       } else if (e.key === "ArrowUp") {
@@ -404,14 +276,10 @@ function addDesktopArrowNavigation() {
   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 menu = document.querySelector('[data-hs-nav="menu"]');
+    if (menu && menu.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"]');
 
     if (!navbar || !navbar.contains(document.activeElement)) return;
 
@@ -430,8 +298,11 @@ function addDesktopArrowNavigation() {
       const isInDropdownList = el.closest('[role="menu"]');
       if (isInDropdownList) return false;
 
-      const isInMobileMenu = el.closest('[data-hs-nav="menu"]');
-      if (isInMobileMenu) return false;
+      const isInMenu = el.closest('[data-hs-nav="menu"]');
+      if (isInMenu) return false;
+
+      const isInSkipLink = el.closest('[data-hs-nav="skip-link"]');
+      if (isInSkipLink) return false;
 
       const computedStyle = window.getComputedStyle(el);
       const isHidden =
@@ -460,166 +331,154 @@ function addDesktopArrowNavigation() {
     const currentIndex = focusableElements.indexOf(document.activeElement);
     if (currentIndex === -1) return;
 
-    let nextIndex;
     if (e.key === "ArrowRight") {
-      nextIndex = (currentIndex + 1) % focusableElements.length;
+      if (currentIndex < focusableElements.length - 1) {
+        const nextIndex = currentIndex + 1;
+        focusableElements[nextIndex].focus();
+      }
     } else {
-      nextIndex =
-        currentIndex === 0 ? focusableElements.length - 1 : currentIndex - 1;
+      if (currentIndex > 0) {
+        const nextIndex = currentIndex - 1;
+        focusableElements[nextIndex].focus();
+      }
     }
-
-    focusableElements[nextIndex].focus();
   });
 }
 
-// Mobile menu button system with modal-like functionality
-function setupMobileMenuButton() {
+// Menu button system with modal-like functionality
+function setupMenuButton() {
   const menuButton = document.querySelector('[data-hs-nav="menubtn"]');
-  const mobileMenu = document.querySelector('[data-hs-nav="menu"]');
+  const menu = document.querySelector('[data-hs-nav="menu"]');
 
-  if (!menuButton || !mobileMenu) return;
+  if (!menuButton || !menu) return;
 
-  const menuId = `mobile-menu-${Date.now()}`;
+  const menuId = `menu-${Date.now()}`;
 
   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");
-  setElementInert(mobileMenu, true);
+  menu.id = menuId;
+  menu.setAttribute("role", "dialog");
+  menu.setAttribute("aria-modal", "true");
 
   let isMenuOpen = false;
+  let focusTrapHandler = null;
 
-  function shouldPreventMobileMenu() {
-    const menuHideElement = document.querySelector(".menu-hide.is-mobile");
+  function shouldPreventMenu() {
+    const menuHideElement = document.querySelector(".menu_hide");
     if (!menuHideElement) return false;
 
     const computedStyle = window.getComputedStyle(menuHideElement);
     return computedStyle.display === "none";
   }
 
-  function openMenu() {
-    if (isMenuOpen || shouldPreventMobileMenu()) return;
-    isMenuOpen = true;
+  function createFocusTrap() {
+    const navbarWrapper = document.querySelector('[data-hs-nav="wrapper"]');
 
-    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");
+    if (!navbarWrapper) return;
+
+    focusTrapHandler = (e) => {
+      if (e.key === 'Tab') {
+        const focusableElements = navbarWrapper.querySelectorAll(
+          'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        const focusableArray = Array.from(focusableElements);
+        const firstElement = focusableArray[0];
+        const lastElement = focusableArray[focusableArray.length - 1];
+
+        if (e.shiftKey) {
+          // Shift+Tab: moving backwards
+          if (document.activeElement === firstElement) {
+            e.preventDefault();
+            lastElement.focus();
+          }
+        } else {
+          // Tab: moving forwards
+          if (document.activeElement === lastElement) {
+            e.preventDefault();
+            firstElement.focus();
+          }
         }
-      });
+      }
+    };
 
-      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");
+    document.addEventListener('keydown', focusTrapHandler);
+  }
+
+  function removeFocusTrap() {
+    if (focusTrapHandler) {
+      document.removeEventListener('keydown', focusTrapHandler);
+      focusTrapHandler = null;
     }
   }
 
-  function closeMenu() {
-    if (!isMenuOpen) return;
-    isMenuOpen = false;
+  function openMenu() {
+    if (isMenuOpen || shouldPreventMenu()) return;
+    isMenuOpen = true;
 
-    try {
-      // Remove body overflow hidden class
-      document.body.classList.remove("u-overflow-hidden");
+    document.body.classList.add("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);
-        });
+    document
+      .querySelectorAll('[data-hs-nav="modal-blur"]')
+      .forEach((element) => {
+        element.classList.add('is-active');
+      });
 
-      if (mobileMenu.contains(document.activeElement)) {
-        menuButton.focus();
+    menuButton.setAttribute("aria-expanded", "true");
+    menuButton.setAttribute("aria-label", "Close navigation menu");
+
+    // Create focus trap for navbar
+    createFocusTrap();
+
+    // Focus first menu item after menu opens
+    setTimeout(() => {
+      const firstElement = menu.querySelector("button, a");
+      if (firstElement) {
+        firstElement.focus();
       }
-      menuButton.setAttribute("aria-expanded", "false");
-      menuButton.setAttribute("aria-label", "Open navigation menu");
-      setElementInert(mobileMenu, true);
+    }, 100);
 
-      // Announce to screen readers
-      const menuName = getMenuName(menuButton);
-      announceToScreenReader(`${menuName} closed`);
+    const clickEvent = new MouseEvent("click", {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+    });
+    menuButton.dispatchEvent(clickEvent);
+  }
 
-      // 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");
-      });
+  function closeMenu() {
+    if (!isMenuOpen) return;
+    isMenuOpen = false;
 
-      const clickEvent = new MouseEvent("click", {
-        bubbles: true,
-        cancelable: true,
-        view: window,
+    document.body.classList.remove("u-overflow-hidden");
+
+    document
+      .querySelectorAll('[data-hs-nav="modal-blur"]')
+      .forEach((element) => {
+        element.classList.remove('is-active');
       });
-      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");
+
+    if (menu.contains(document.activeElement)) {
+      menuButton.focus();
     }
+    menuButton.setAttribute("aria-expanded", "false");
+    menuButton.setAttribute("aria-label", "Open navigation menu");
+
+    // Remove focus trap
+    removeFocusTrap();
+
+    const clickEvent = new MouseEvent("click", {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+    });
+    menuButton.dispatchEvent(clickEvent);
   }
 
   function toggleMenu() {
-    if (shouldPreventMobileMenu()) return;
-
+    if (shouldPreventMenu()) return;
+    
     if (isMenuOpen) {
       closeMenu();
     } else {
@@ -631,162 +490,48 @@ function setupMobileMenuButton() {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
       toggleMenu();
-    } else if (e.key === "ArrowDown") {
-      e.preventDefault();
-      if (!isMenuOpen) {
-        openMenu();
-      }
-      const firstElement = mobileMenu.querySelector("button, a");
-      if (firstElement) {
-        firstElement.focus();
-      }
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      if (isMenuOpen) {
-        closeMenu();
-      }
     }
   });
 
   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");
-    } else {
-      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",
-    );
-    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) => {
-        if (navbarWrapper && !navbarWrapper.contains(el)) {
-          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");
-        } else {
-          el.setAttribute("tabindex", originalTabindex);
-        }
-        el.removeAttribute("data-mobile-menu-tabindex");
-      });
-    }
+    toggleMenu();
   });
 
-  // Store the menu state and functions for breakpoint handler
-  window.mobileMenuState = {
-    isMenuOpen: () => isMenuOpen,
-    closeMenu: closeMenu,
-    openMenu: openMenu,
-  };
-
-  // Cleanup function for window.mobileMenuState
-  if (typeof window !== "undefined") {
-    window.addEventListener("pagehide", () => {
-      if (window.mobileMenuState) {
-        delete window.mobileMenuState;
-      }
-    });
-  }
 }
 
-// Mobile menu breakpoint handler
-function setupMobileMenuBreakpointHandler() {
-  let preventedMenuState = false;
 
-  function handleBreakpointChange() {
-    const menuHideElement = document.querySelector(".menu-hide.is-mobile");
+function setupMenuDisplayObserver() {
+  function handleDisplayChange() {
+    const menuHideElement = document.querySelector(".menu_hide");
     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;
-      window.mobileMenuState.closeMenu();
-    } else if (!shouldPrevent && preventedMenuState) {
-      // Restore menu state if it was open before being prevented
-      preventedMenuState = false;
-      window.mobileMenuState.openMenu();
-    }
+    const isMenuVisible = computedStyle.display !== "none";
+    
+    // Get menu button to check if menu is open
+    const menuButton = document.querySelector('[data-hs-nav="menubtn"]');
+    const isMenuOpen = menuButton && menuButton.getAttribute("aria-expanded") === "true";
+    
+    const shouldShowModal = isMenuVisible && isMenuOpen;
+
+    // Toggle modal effects only when menu is visible AND menu is open
+    document.body.classList.toggle("u-overflow-hidden", shouldShowModal);
+    
+    document
+      .querySelectorAll('[data-hs-nav="modal-blur"]')
+      .forEach((element) => {
+        element.classList.toggle('is-active', shouldShowModal);
+      });
   }
 
-  // Use ResizeObserver for more accurate detection
-  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
-    }
+  const displayObserver = new ResizeObserver(handleDisplayChange);
+  const menuHideElement = document.querySelector(".menu_hide");
+  if (menuHideElement) {
+    displayObserver.observe(menuHideElement);
+    // Initial check
+    handleDisplayChange();
   }
-
-  // Fallback to resize event
-  window.addEventListener("resize", handleBreakpointChange);
-
-  // Initial check
-  handleBreakpointChange();
 }
 
 function sanitizeForID(text) {
@@ -798,94 +543,60 @@ function sanitizeForID(text) {
     .substring(0, 50);
 }
 
-// Mobile menu ARIA setup
-function setupMobileMenuARIA() {
+// Menu ARIA setup
+function setupMenuARIA() {
   const menuContainer = document.querySelector('[data-hs-nav="menu"]');
   if (!menuContainer) return;
 
-  const buttons = menuContainer.querySelectorAll("button");
+  const dropdownWrappers = menuContainer.querySelectorAll('[data-hs-nav="menu-dropdown"]');
   const links = menuContainer.querySelectorAll("a");
 
-  buttons.forEach((button) => {
-    const buttonText = button.textContent && button.textContent.trim();
-    if (!buttonText) return;
-
-    const sanitizedText = sanitizeForID(buttonText);
-    const buttonId = `navbar-mobile-${sanitizedText}-toggle`;
-    const listId = `navbar-mobile-${sanitizedText}-list`;
+  dropdownWrappers.forEach((wrapper) => {
+    const button = wrapper.querySelector('[data-hs-nav="menu-dropdown-btn"]');
+    const dropdownList = wrapper.querySelector('[data-hs-nav="menu-dropdown-list"]');
 
-    button.id = buttonId;
-    button.setAttribute("aria-expanded", "false");
-    button.setAttribute("aria-controls", listId);
+    if (button && dropdownList) {
+      const buttonText = button.textContent?.trim();
+      const sanitizedText = sanitizeForID(buttonText);
+      const buttonId = `navbar-menu-${sanitizedText}-toggle`;
+      const listId = `navbar-menu-${sanitizedText}-list`;
 
-    // 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"]',
-      );
+      button.id = buttonId;
+      button.setAttribute("aria-expanded", "false");
+      button.setAttribute("aria-controls", listId);
 
-      // 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")) {
       dropdownList.id = listId;
-      setElementInert(dropdownList, true);
+      dropdownList.setAttribute("aria-hidden", "true");
 
       button.addEventListener("click", function () {
         const isExpanded = button.getAttribute("aria-expanded") === "true";
         const newState = !isExpanded;
         button.setAttribute("aria-expanded", newState);
-        setElementInert(dropdownList, !newState);
+        dropdownList.setAttribute("aria-hidden", !newState);
 
-        // Announce to screen readers
-        const menuName = getMenuName(button);
-        announceToScreenReader(
-          `${menuName} submenu ${newState ? "opened" : "closed"}`,
-        );
       });
     }
   });
 
   links.forEach((link) => {
-    const linkText = link.textContent && link.textContent.trim();
-    if (!linkText) return;
-
+    const linkText = link.textContent?.trim();
     const sanitizedText = sanitizeForID(linkText);
-    const linkId = `navbar-mobile-${sanitizedText}-link`;
+    const linkId = `navbar-menu-${sanitizedText}-link`;
     link.id = linkId;
   });
 
-  setupMobileMenuArrowNavigation(menuContainer);
+  setupMenuArrowNavigation(menuContainer);
 }
 
-// Mobile menu arrow navigation
-function setupMobileMenuArrowNavigation(menuContainer) {
+// Menu arrow navigation
+function setupMenuArrowNavigation(menuContainer) {
   function getFocusableElements() {
     const allElements = menuContainer.querySelectorAll("button, a");
     return Array.from(allElements).filter((el) => {
+      // Check if element or any ancestor has aria-hidden="true"
       let current = el;
       while (current && current !== menuContainer) {
-        // Check both native inert and polyfill inert
-        if (
-          current.inert === true ||
-          current.getAttribute("data-inert") === "true"
-        ) {
+        if (current.getAttribute("aria-hidden") === "true") {
           return false;
         }
         current = current.parentElement;
@@ -905,25 +616,16 @@ function setupMobileMenuArrowNavigation(menuContainer) {
 
     if (e.key === "ArrowDown") {
       e.preventDefault();
-      if (currentFocusIndex >= focusableElements.length - 1) {
-        currentFocusIndex = 0;
-      } else {
+      if (currentFocusIndex < focusableElements.length - 1) {
         currentFocusIndex = currentFocusIndex + 1;
+        focusableElements[currentFocusIndex].focus();
       }
-      focusableElements[currentFocusIndex].focus();
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      if (currentFocusIndex <= 0) {
-        const mobileMenuButton = document.querySelector(
-          '[data-hs-nav="menubtn"]',
-        );
-        if (mobileMenuButton) {
-          mobileMenuButton.focus();
-          return;
-        }
+      if (currentFocusIndex > 0) {
+        currentFocusIndex = currentFocusIndex - 1;
+        focusableElements[currentFocusIndex].focus();
       }
-      currentFocusIndex = currentFocusIndex - 1;
-      focusableElements[currentFocusIndex].focus();
     } else if (e.key === "ArrowRight") {
       e.preventDefault();
       if (
@@ -961,12 +663,12 @@ function setupMobileMenuArrowNavigation(menuContainer) {
     } else if (e.key === " " && activeElement.tagName === "A") {
       e.preventDefault();
     } else if (e.key === "Escape") {
-      const mobileMenuButton = document.querySelector(
+      const menuButton = document.querySelector(
         '[data-hs-nav="menubtn"]',
       );
-      if (mobileMenuButton) {
-        mobileMenuButton.click();
-        mobileMenuButton.focus();
+      if (menuButton) {
+        menuButton.click();
+        menuButton.focus();
       }
     }
   });