@hortonstudio/main 1.9.11 → 1.9.20

package/autoInit/navbar/navbar.js

@@ -1,786 +0,0 @@
-export const init = () => {
-  // Centralized cleanup tracking
-  const cleanup = {
-    observers: [],
-    handlers: [],
-    state: {
-      focusTrapHandler: null,
-      dropdownKeydownHandler: null,
-      menuKeydownHandler: null
-    }
-  };
-
-  const addObserver = (observer) => cleanup.observers.push(observer);
-  const addHandler = (element, event, handler, options) => {
-    element.addEventListener(event, handler, options);
-    cleanup.handlers.push({ element, event, handler, options });
-  };
-
-  setupDynamicDropdowns(addObserver, addHandler);
-  setupMenuButton(addHandler, addObserver);
-  setupMenuARIA(addHandler, addObserver);
-  setupMenuDisplayObserver(addObserver);
-
-  return {
-    result: "navbar initialized",
-    destroy: () => {
-      // Disconnect all observers
-      cleanup.observers.forEach(obs => obs.disconnect());
-      cleanup.observers.length = 0;
-
-      // Remove all event listeners
-      cleanup.handlers.forEach(({ element, event, handler, options }) => {
-        element.removeEventListener(event, handler, options);
-      });
-      cleanup.handlers.length = 0;
-
-      // Clean up focus trap
-      if (cleanup.state.focusTrapHandler) {
-        document.removeEventListener('keydown', cleanup.state.focusTrapHandler);
-        cleanup.state.focusTrapHandler = null;
-      }
-
-      // Clean up global document listeners
-      if (cleanup.state.dropdownKeydownHandler) {
-        document.removeEventListener('keydown', cleanup.state.dropdownKeydownHandler);
-        cleanup.state.dropdownKeydownHandler = null;
-      }
-
-      if (cleanup.state.menuKeydownHandler) {
-        document.removeEventListener('keydown', cleanup.state.menuKeydownHandler);
-        cleanup.state.menuKeydownHandler = null;
-      }
-
-      // Remove body overflow class if present
-      document.body.classList.remove("u-overflow-hidden");
-    }
-  };
-};
-
-
-// Desktop dropdown system
-function setupDynamicDropdowns(addObserver, addHandler) {
-  const dropdownWrappers = document.querySelectorAll(
-    '[data-hs-nav="dropdown"]',
-  );
-  const allDropdowns = [];
-
-  const closeAllDropdowns = (exceptWrapper = null) => {
-    allDropdowns.forEach((dropdown) => {
-      if (dropdown.wrapper !== exceptWrapper && dropdown.isOpen) {
-        dropdown.closeDropdown();
-      }
-    });
-  };
-
-  dropdownWrappers.forEach((wrapper) => {
-    const clickableElement = wrapper.querySelector('[data-site-clickable="element"]');
-    const toggle = clickableElement ? clickableElement.children[0] : null;
-    const dropdownList = wrapper.querySelector('[data-hs-nav="dropdown-list"]');
-
-    if (!toggle || !dropdownList) {
-      console.warn("Dropdown wrapper missing required elements:", wrapper);
-      return;
-    }
-
-    const toggleText = 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);
-
-    dropdownList.id = listId;
-    dropdownList.setAttribute("role", "menu");
-    dropdownList.setAttribute("aria-hidden", "true");
-
-    const clickableItems = dropdownList.querySelectorAll('[data-site-clickable="element"]');
-    const menuItems = Array.from(clickableItems).map(el => el.children[0]).filter(Boolean);
-    menuItems.forEach((item, index) => {
-      item.setAttribute("role", "menuitem");
-      item.setAttribute("tabindex", "-1");
-
-      // Add context for first item to help screen readers understand dropdown content
-      if (index === 0) {
-        const toggleText = toggle.textContent?.trim() || "menu";
-        const existingLabel = item.getAttribute("aria-label");
-        if (!existingLabel) {
-          item.setAttribute("aria-label", `${item.textContent?.trim()}, ${toggleText} submenu`);
-        }
-      }
-    });
-
-    let currentMenuItemIndex = -1;
-
-    // Set initial ARIA states
-    updateARIAStates();
-
-    // Check if dropdown is open by looking for is-active class on wrapper
-    function isDropdownOpen() {
-      return wrapper.classList.contains('is-active');
-    }
-
-    // Update ARIA states based on current visual state
-    function updateARIAStates() {
-      const isOpen = isDropdownOpen();
-      const wasOpen = toggle.getAttribute("aria-expanded") === "true";
-
-      // If dropdown is closing (was open, now closed), focus the toggle first
-      if (wasOpen && !isOpen && dropdownList.contains(document.activeElement)) {
-        toggle.focus();
-      }
-
-      toggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
-      dropdownList.setAttribute("aria-hidden", isOpen ? "false" : "true");
-      menuItems.forEach((item) => {
-        item.setAttribute("tabindex", isOpen ? "0" : "-1");
-      });
-
-      if (!isOpen) {
-        currentMenuItemIndex = -1;
-      }
-    }
-
-    // Monitor for class changes and update ARIA states
-    const observer = new MutationObserver(() => {
-      updateARIAStates();
-    });
-
-    observer.observe(wrapper, {
-      attributes: true,
-      attributeFilter: ['class']
-    });
-
-    addObserver(observer);
-
-    // Hover interactions now handled entirely by native Webflow
-
-    // Add keyboard interactions that trigger programmatic mouse events
-    const toggleKeydownHandler = function (e) {
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-
-        if (!isDropdownOpen()) {
-          // Trigger programmatic mouseenter to open dropdown
-          const mouseEnterEvent = new MouseEvent("mouseenter", {
-            bubbles: false,
-            cancelable: false,
-            view: window,
-            relatedTarget: null
-          });
-          wrapper.dispatchEvent(mouseEnterEvent);
-
-          // Focus first menu item after a brief delay
-          if (menuItems.length > 0) {
-            setTimeout(() => {
-              currentMenuItemIndex = 0;
-              menuItems[0].focus();
-            }, 100);
-          }
-        }
-      } else if (e.key === " ") {
-        e.preventDefault();
-
-        if (!isDropdownOpen()) {
-          // Trigger programmatic mouseenter to open dropdown
-          const mouseEnterEvent = new MouseEvent("mouseenter", {
-            bubbles: false,
-            cancelable: false,
-            view: window,
-            relatedTarget: null
-          });
-          wrapper.dispatchEvent(mouseEnterEvent);
-
-          // Focus first menu item after a brief delay
-          if (menuItems.length > 0) {
-            setTimeout(() => {
-              currentMenuItemIndex = 0;
-              menuItems[0].focus();
-            }, 100);
-          }
-        } else {
-          // Trigger mouse leave to close dropdown
-          const mouseOutEvent = new MouseEvent("mouseout", {
-            bubbles: true,
-            cancelable: false,
-            view: window,
-            relatedTarget: document.body
-          });
-          wrapper.dispatchEvent(mouseOutEvent);
-
-          const mouseLeaveEvent = new MouseEvent("mouseleave", {
-            bubbles: false,
-            cancelable: false,
-            view: window,
-            relatedTarget: document.body
-          });
-          wrapper.dispatchEvent(mouseLeaveEvent);
-        }
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault();
-
-        if (!isDropdownOpen()) {
-          // Trigger programmatic mouseenter to open dropdown
-          const mouseEnterEvent = new MouseEvent("mouseenter", {
-            bubbles: false,
-            cancelable: false,
-            view: window,
-            relatedTarget: null
-          });
-          wrapper.dispatchEvent(mouseEnterEvent);
-
-          // Focus last menu item after a brief delay
-          if (menuItems.length > 0) {
-            setTimeout(() => {
-              currentMenuItemIndex = menuItems.length - 1;
-              menuItems[currentMenuItemIndex].focus();
-            }, 100);
-          }
-        }
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-
-        if (isDropdownOpen()) {
-          // Trigger mouse leave to close dropdown
-          const mouseOutEvent = new MouseEvent("mouseout", {
-            bubbles: true,
-            cancelable: false,
-            view: window,
-            relatedTarget: document.body
-          });
-          wrapper.dispatchEvent(mouseOutEvent);
-
-          const mouseLeaveEvent = new MouseEvent("mouseleave", {
-            bubbles: false,
-            cancelable: false,
-            view: window,
-            relatedTarget: document.body
-          });
-          wrapper.dispatchEvent(mouseLeaveEvent);
-        }
-      }
-    };
-
-    addHandler(toggle, "keydown", toggleKeydownHandler);
-
-    // Handle navigation within open dropdown
-    const dropdownKeydownHandler = function (e) {
-      if (!isDropdownOpen()) return;
-      if (!wrapper.contains(document.activeElement)) return;
-
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        if (currentMenuItemIndex < menuItems.length - 1) {
-          currentMenuItemIndex++;
-          menuItems[currentMenuItemIndex].focus();
-        }
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault();
-        if (currentMenuItemIndex === 0) {
-          // On first item, trigger mouse leave to close dropdown
-          const mouseOutEvent = new MouseEvent("mouseout", {
-            bubbles: true,
-            cancelable: false,
-            view: window,
-            relatedTarget: document.body
-          });
-          wrapper.dispatchEvent(mouseOutEvent);
-
-          const mouseLeaveEvent = new MouseEvent("mouseleave", {
-            bubbles: false,
-            cancelable: false,
-            view: window,
-            relatedTarget: document.body
-          });
-          wrapper.dispatchEvent(mouseLeaveEvent);
-
-          // Focus back to toggle
-          toggle.focus();
-          currentMenuItemIndex = -1;
-        } else if (currentMenuItemIndex > 0) {
-          currentMenuItemIndex--;
-          menuItems[currentMenuItemIndex].focus();
-        } else {
-          // Go back to toggle
-          toggle.focus();
-          currentMenuItemIndex = -1;
-        }
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-
-        // Trigger mouse leave to close dropdown
-        const mouseOutEvent = new MouseEvent("mouseout", {
-          bubbles: true,
-          cancelable: false,
-          view: window,
-          relatedTarget: document.body
-        });
-        wrapper.dispatchEvent(mouseOutEvent);
-
-        const mouseLeaveEvent = new MouseEvent("mouseleave", {
-          bubbles: false,
-          cancelable: false,
-          view: window,
-          relatedTarget: document.body
-        });
-        wrapper.dispatchEvent(mouseLeaveEvent);
-      }
-    };
-
-    addHandler(document, "keydown", dropdownKeydownHandler);
-
-    allDropdowns.push({
-      wrapper,
-      isOpen: isDropdownOpen,
-      closeDropdown: () => {
-        // closeDropdown now handled by native Webflow interactions
-        // This is kept for API compatibility but does nothing
-      },
-      toggle,
-      dropdownList,
-    });
-  });
-
-  const focusinHandler = function (e) {
-    allDropdowns.forEach((dropdown) => {
-      if (dropdown.isOpen() && !dropdown.wrapper.contains(e.target)) {
-        dropdown.closeDropdown();
-      }
-    });
-  };
-
-  addHandler(document, "focusin", focusinHandler);
-
-  addDesktopArrowNavigation(addHandler);
-}
-
-// Desktop left/right arrow navigation
-function addDesktopArrowNavigation(addHandler) {
-  const keydownHandler = function (e) {
-    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
-
-    const menu = document.querySelector('[data-hs-nav="menu"]');
-    if (menu && menu.contains(document.activeElement)) return;
-
-    const navbar = document.querySelector('[data-hs-nav="wrapper"]');
-
-    if (!navbar || !navbar.contains(document.activeElement)) return;
-
-    const openDropdownList = navbar.querySelector(
-      '[aria-hidden="false"][role="menu"]',
-    );
-    if (openDropdownList && openDropdownList.contains(document.activeElement))
-      return;
-
-    e.preventDefault();
-
-    const clickableElements = navbar.querySelectorAll('[data-site-clickable="element"]');
-    const allNavbarElements = Array.from(clickableElements).map(el => el.children[0]).filter(Boolean);
-    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 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 =
-        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;
-        if (parentHidden) return false;
-        parent = parent.parentElement;
-      }
-
-      return true;
-    });
-
-    const currentIndex = focusableElements.indexOf(document.activeElement);
-    if (currentIndex === -1) return;
-
-    if (e.key === "ArrowRight") {
-      if (currentIndex < focusableElements.length - 1) {
-        const nextIndex = currentIndex + 1;
-        focusableElements[nextIndex].focus();
-      }
-    } else {
-      if (currentIndex > 0) {
-        const nextIndex = currentIndex - 1;
-        focusableElements[nextIndex].focus();
-      }
-    }
-  };
-
-  addHandler(document, "keydown", keydownHandler);
-}
-
-// Menu button system with modal-like functionality
-function setupMenuButton(addHandler, addObserver) {
-  const menuButtons = document.querySelectorAll('[data-hs-nav="menu-button"]');
-  const menu = document.querySelector('[data-hs-nav="menu"]');
-
-  if (!menuButtons.length || !menu) return;
-
-  const menuId = `menu-${Date.now()}`;
-
-  menu.id = menuId;
-  menu.setAttribute("role", "dialog");
-  menu.setAttribute("aria-modal", "true");
-
-  function shouldPreventMenu() {
-    const menuHideElement = document.querySelector('[data-hs-nav="menu-hide"]');
-    if (!menuHideElement) return false;
-
-    const computedStyle = window.getComputedStyle(menuHideElement);
-    return computedStyle.display === "none";
-  }
-
-  function createFocusTrap(menuButton) {
-    const navbarWrapper = document.querySelector('[data-hs-nav="wrapper"]');
-
-    if (!navbarWrapper) return;
-
-    const focusTrapHandler = (e) => {
-      if (e.key === 'Tab') {
-        const clickableElements = navbarWrapper.querySelectorAll('[data-site-clickable="element"]');
-        const clickableItems = Array.from(clickableElements).map(el => el.children[0]).filter(Boolean);
-        const formElements = navbarWrapper.querySelectorAll('input, select, textarea, [tabindex]:not([tabindex="-1"])');
-        const focusableArray = [...clickableItems, ...Array.from(formElements)];
-        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();
-          }
-        }
-      }
-    };
-
-    document.addEventListener('keydown', focusTrapHandler);
-    return focusTrapHandler;
-  }
-
-  function removeFocusTrap(focusTrapHandler) {
-    if (focusTrapHandler) {
-      document.removeEventListener('keydown', focusTrapHandler);
-    }
-  }
-
-  menuButtons.forEach(menuButton => {
-    menuButton.setAttribute("aria-expanded", "false");
-    menuButton.setAttribute("aria-controls", menuId);
-    menuButton.setAttribute("aria-label", "Open navigation menu");
-
-    let focusTrapHandler = null;
-
-    // Check if menu is open by looking for is-active class on button
-    function isMenuOpen() {
-      return menuButton.classList.contains('is-active');
-    }
-
-    // Update ARIA states and menu behavior based on current visual state
-    function updateMenuState() {
-      const isOpen = isMenuOpen();
-      const wasOpen = menuButton.getAttribute("aria-expanded") === "true";
-
-      if (isOpen && !wasOpen) {
-        // Opening
-        document.body.classList.add("u-overflow-hidden");
-        window.lenis?.stop();
-
-        menuButtons.forEach(btn => {
-          btn.setAttribute("aria-expanded", "true");
-          btn.setAttribute("aria-label", "Close navigation menu");
-        });
-
-        // Create focus trap for navbar
-        focusTrapHandler = createFocusTrap(menuButton);
-
-        // Focus first menu item after menu opens
-        setTimeout(() => {
-          const firstClickable = menu.querySelector('[data-site-clickable="element"]');
-          const firstElement = firstClickable?.children[0];
-          if (firstElement) {
-            firstElement.focus();
-          }
-        }, 100);
-      } else if (!isOpen && wasOpen) {
-        // Closing
-        document.body.classList.remove("u-overflow-hidden");
-        window.lenis?.start();
-
-        // Return focus to button if focus was inside menu
-        if (menu.contains(document.activeElement)) {
-          menuButton.focus();
-        }
-
-        menuButtons.forEach(btn => {
-          btn.setAttribute("aria-expanded", "false");
-          btn.setAttribute("aria-label", "Open navigation menu");
-        });
-
-        // Remove focus trap
-        removeFocusTrap(focusTrapHandler);
-        focusTrapHandler = null;
-      }
-    }
-
-    // Set initial ARIA states
-    updateMenuState();
-
-    // Monitor for class changes and update menu state
-    const observer = new MutationObserver(() => {
-      updateMenuState();
-    });
-
-    observer.observe(menuButton, {
-      attributes: true,
-      attributeFilter: ['class']
-    });
-
-    addObserver(observer);
-
-    const clickHandler = function () {
-      // Webflow interaction handles the visual state (is-active class)
-      // MutationObserver will sync ARIA and behavior
-    };
-
-    addHandler(menuButton, "click", clickHandler);
-  });
-}
-
-
-function setupMenuDisplayObserver(addObserver) {
-  function handleDisplayChange() {
-    const menuHideElement = document.querySelector('[data-hs-nav="menu-hide"]');
-    if (!menuHideElement) return;
-
-    const computedStyle = window.getComputedStyle(menuHideElement);
-    const isMenuVisible = computedStyle.display !== "none";
-
-    // Get menu button to check if menu is open
-    const menuButton = document.querySelector('[data-hs-nav="menu-button"]');
-    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);
-  }
-
-  const displayObserver = new ResizeObserver(handleDisplayChange);
-  const menuHideElement = document.querySelector('[data-hs-nav="menu-hide"]');
-  if (menuHideElement) {
-    displayObserver.observe(menuHideElement);
-    addObserver(displayObserver);
-    // Initial check
-    handleDisplayChange();
-  }
-}
-
-function sanitizeForID(text) {
-  return text
-    .toLowerCase()
-    .replace(/[^a-z0-9\s]/g, "")
-    .replace(/\s+/g, "-")
-    .replace(/^-+|-+$/g, "")
-    .substring(0, 50);
-}
-
-// Menu ARIA setup
-function setupMenuARIA(addHandler, addObserver) {
-  const menuContainer = document.querySelector('[data-hs-nav="menu"]');
-  if (!menuContainer) return;
-
-  const dropdownWrappers = menuContainer.querySelectorAll('[data-hs-nav="menu-dropdown"]');
-  const clickableLinks = menuContainer.querySelectorAll('[data-site-clickable="element"]');
-  const links = Array.from(clickableLinks).map(el => el.children[0]).filter(Boolean);
-
-  dropdownWrappers.forEach((wrapper) => {
-    const clickableElement = wrapper.querySelector('[data-site-clickable="element"]');
-    const button = clickableElement ? clickableElement.children[0] : null;
-    const dropdownList = wrapper.querySelector('[data-hs-nav="menu-dropdown-list"]');
-
-    if (button && dropdownList) {
-      const buttonText = button.textContent?.trim();
-      const sanitizedText = sanitizeForID(buttonText);
-      const buttonId = `navbar-menu-${sanitizedText}-toggle`;
-      const listId = `navbar-menu-${sanitizedText}-list`;
-
-      button.id = buttonId;
-      button.setAttribute("aria-expanded", "false");
-      button.setAttribute("aria-controls", listId);
-
-      dropdownList.id = listId;
-      dropdownList.setAttribute("aria-hidden", "true");
-
-      // Check if dropdown is open by looking for is-active class on wrapper
-      function isDropdownOpen() {
-        return wrapper.classList.contains('is-active');
-      }
-
-      // Update ARIA states based on current visual state
-      function updateARIAStates() {
-        const isOpen = isDropdownOpen();
-        const wasOpen = button.getAttribute("aria-expanded") === "true";
-
-        // If dropdown is closing (was open, now closed), focus the button if focus is inside dropdown
-        if (wasOpen && !isOpen && dropdownList.contains(document.activeElement)) {
-          button.focus();
-        }
-
-        button.setAttribute("aria-expanded", isOpen ? "true" : "false");
-        dropdownList.setAttribute("aria-hidden", isOpen ? "false" : "true");
-      }
-
-      // Set initial ARIA states
-      updateARIAStates();
-
-      // Monitor for class changes and update ARIA states
-      const observer = new MutationObserver(() => {
-        updateARIAStates();
-      });
-
-      observer.observe(wrapper, {
-        attributes: true,
-        attributeFilter: ['class']
-      });
-
-      addObserver(observer);
-
-      const clickHandler = function () {
-        // Webflow interaction handles the visual state (is-active class)
-        // MutationObserver will sync ARIA attributes
-      };
-
-      addHandler(button, "click", clickHandler);
-    }
-  });
-
-  links.forEach((link) => {
-    const linkText = link.textContent?.trim();
-    const sanitizedText = sanitizeForID(linkText);
-    const linkId = `navbar-menu-${sanitizedText}-link`;
-    link.id = linkId;
-  });
-
-  setupMenuArrowNavigation(menuContainer, addHandler);
-}
-
-// Menu arrow navigation
-function setupMenuArrowNavigation(menuContainer, addHandler) {
-  function getFocusableElements() {
-    const clickableElements = menuContainer.querySelectorAll('[data-site-clickable="element"]');
-    const allElements = Array.from(clickableElements).map(el => el.children[0]).filter(Boolean);
-    return Array.from(allElements).filter((el) => {
-      // Check if element or any ancestor has aria-hidden="true"
-      let current = el;
-      while (current && current !== menuContainer) {
-        if (current.getAttribute("aria-hidden") === "true") {
-          return false;
-        }
-        current = current.parentElement;
-      }
-      return true;
-    });
-  }
-
-  let currentFocusIndex = -1;
-
-  const keydownHandler = function (e) {
-    const focusableElements = getFocusableElements();
-    if (focusableElements.length === 0) return;
-
-    const activeElement = document.activeElement;
-    currentFocusIndex = focusableElements.indexOf(activeElement);
-
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      if (currentFocusIndex < focusableElements.length - 1) {
-        currentFocusIndex = currentFocusIndex + 1;
-        focusableElements[currentFocusIndex].focus();
-      }
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      if (currentFocusIndex > 0) {
-        currentFocusIndex = currentFocusIndex - 1;
-        focusableElements[currentFocusIndex].focus();
-      }
-    } else if (e.key === "ArrowRight") {
-      e.preventDefault();
-      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") {
-      e.preventDefault();
-      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") {
-      e.preventDefault();
-      currentFocusIndex = 0;
-      focusableElements[0].focus();
-    } else if (e.key === "End") {
-      e.preventDefault();
-      currentFocusIndex = focusableElements.length - 1;
-      focusableElements[focusableElements.length - 1].focus();
-    } else if (e.key === " " && activeElement.tagName === "A") {
-      e.preventDefault();
-    } else if (e.key === "Escape") {
-      const menuButton = document.querySelector(
-        '[data-hs-nav="menu-button"]',
-      );
-      if (menuButton) {
-        menuButton.click();
-        menuButton.focus();
-      }
-    }
-  };
-
-  addHandler(menuContainer, "keydown", keydownHandler);
-}