@hortonstudio/main 1.6.5 → 1.6.6

package/autoInit/navbar.js

@@ -68,183 +68,129 @@ function setupDynamicDropdowns() {
       }
     });
 
-    let isOpen = false;
     let currentMenuItemIndex = -1;
 
-    function openDropdown() {
-      if (isOpen) return;
-      closeAllDropdowns(wrapper);
-      
-      // Set ARIA states FIRST, before focus changes
-      isOpen = true;
-      toggle.setAttribute("aria-expanded", "true");
-      dropdownList.setAttribute("aria-hidden", "false");
-      menuItems.forEach((item) => {
-        item.setAttribute("tabindex", "0");
-      });
+    // Set initial ARIA states
+    updateARIAStates();
 
-      const clickEvent = new MouseEvent("click", {
-        bubbles: true,
-        cancelable: true,
-        view: window,
-      });
-      wrapper.dispatchEvent(clickEvent);
+    // Check if dropdown is open by looking for is-active class on wrapper
+    function isDropdownOpen() {
+      return wrapper.classList.contains('is-active');
     }
 
-    function closeDropdown() {
-      if (!isOpen) return;
-      const shouldRestoreFocus = dropdownList.contains(document.activeElement);
-      
-      // Update ARIA states FIRST to help screen readers understand content is hidden
-      isOpen = false;
-      currentMenuItemIndex = -1;
-      toggle.setAttribute("aria-expanded", "false");
-      dropdownList.setAttribute("aria-hidden", "true");
-      menuItems.forEach((item) => {
-        item.setAttribute("tabindex", "-1");
-      });
+    // Update ARIA states based on current visual state
+    function updateARIAStates() {
+      const isOpen = isDropdownOpen();
+      const wasOpen = toggle.getAttribute("aria-expanded") === "true";
       
-      // Force screen reader virtual cursor refresh by briefly focusing dropdown container then restoring
-      if (shouldRestoreFocus) {
-        // This helps reset virtual cursor position
-        dropdownList.focus();
+      // If dropdown is closing (was open, now closed), focus the toggle first
+      if (wasOpen && !isOpen && dropdownList.contains(document.activeElement)) {
         toggle.focus();
       }
-
-      const clickEvent = new MouseEvent("click", {
-        bubbles: true,
-        cancelable: true,
-        view: window,
+      
+      toggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
+      dropdownList.setAttribute("aria-hidden", isOpen ? "false" : "true");
+      menuItems.forEach((item) => {
+        item.setAttribute("tabindex", isOpen ? "0" : "-1");
       });
-      wrapper.dispatchEvent(clickEvent);
-    }
 
-    wrapper.addEventListener("mouseenter", () => {
       if (!isOpen) {
-        openDropdown();
-      }
-    });
-
-    wrapper.addEventListener("mouseleave", () => {
-      if (isOpen) {
-        closeDropdown();
+        currentMenuItemIndex = -1;
       }
-    });
+    }
 
-    document.addEventListener("keydown", function (e) {
-      if (!isOpen) return;
-      if (!wrapper.contains(document.activeElement)) return;
+    // Monitor for class changes and update ARIA states
+    function monitorDropdownState() {
+      const observer = new MutationObserver(() => {
+        updateARIAStates();
+      });
+      
+      observer.observe(wrapper, {
+        attributes: true,
+        attributeFilter: ['class']
+      });
+    }
+    
+    // Initialize monitoring
+    monitorDropdownState();
 
-      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 &&
-              wrapper.nextElementSibling.querySelector("a, button");
-            if (nextElement) {
-              closeDropdown();
-              nextElement.focus();
-              return;
-            }
-          }
-          if (currentMenuItemIndex < menuItems.length - 1) {
-            currentMenuItemIndex = currentMenuItemIndex + 1;
-            menuItems[currentMenuItemIndex].focus();
-          }
-        }
-      } 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 &&
-              wrapper.previousElementSibling.querySelector("a, button");
-            if (prevElement) {
-              closeDropdown();
-              prevElement.focus();
-              return;
-            } else {
-              closeDropdown();
-              toggle.focus();
-              return;
-            }
-          }
-          if (currentMenuItemIndex > 0) {
-            currentMenuItemIndex = currentMenuItemIndex - 1;
-            menuItems[currentMenuItemIndex].focus();
-          }
-        }
-      } else if (e.key === "Tab") {
-        if (e.shiftKey) {
-          if (document.activeElement === menuItems[0]) {
-            e.preventDefault();
-            closeDropdown();
-            toggle.focus();
-          }
-        } else {
-          if (document.activeElement === menuItems[menuItems.length - 1]) {
-            e.preventDefault();
-            const nextElement =
-              wrapper.nextElementSibling &&
-              wrapper.nextElementSibling.querySelector("a, button");
-            closeDropdown();
-            if (nextElement) {
-              nextElement.focus();
-            }
-          }
-        }
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        closeDropdown();
-        toggle.focus();
-      } else if (e.key === "Home") {
-        e.preventDefault();
-        currentMenuItemIndex = 0;
-        menuItems[0].focus();
-      } else if (e.key === "End") {
-        e.preventDefault();
-        currentMenuItemIndex = menuItems.length - 1;
-        menuItems[menuItems.length - 1].focus();
-      } else if (e.key === " ") {
-        e.preventDefault();
-      }
-    });
+    // Hover interactions now handled entirely by native Webflow
 
+    // Add keyboard interactions that trigger programmatic mouse events
     toggle.addEventListener("keydown", function (e) {
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        openDropdown();
-        if (menuItems.length > 0) {
-          setTimeout(() => {
-            currentMenuItemIndex = 0;
-            menuItems[0].focus();
-          }, 100);
+        
+        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 (isOpen) {
-          closeDropdown();
-        } else {
-          openDropdown();
+        
+        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) {
-            currentMenuItemIndex = 0;
-            menuItems[0].focus();
+            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 (isOpen) {
-          currentMenuItemIndex = menuItems.length - 1;
-          menuItems[currentMenuItemIndex].focus();
-        } else {
-          openDropdown();
+        
+        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;
@@ -254,21 +200,99 @@ function setupDynamicDropdowns() {
         }
       } else if (e.key === "Escape") {
         e.preventDefault();
-        closeDropdown();
+        
+        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);
+        }
       }
     });
 
+    // Handle navigation within open dropdown
+    document.addEventListener("keydown", function (e) {
+      if (!isDropdownOpen()) return;
+      if (!wrapper.contains(document.activeElement)) return;
 
-    document.addEventListener("click", function (e) {
-      if (!wrapper.contains(e.target) && isOpen) {
-        closeDropdown();
+      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) {
+          currentMenuItemIndex--;
+          menuItems[currentMenuItemIndex].focus();
+        } else 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 {
+          // 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);
       }
     });
 
     allDropdowns.push({
       wrapper,
-      isOpen: () => isOpen,
-      closeDropdown,
+      isOpen: isDropdownOpen,
+      closeDropdown: () => {
+        // closeDropdown now handled by native Webflow interactions
+        // This is kept for API compatibility but does nothing
+      },
       toggle,
       dropdownList,
     });

package/index.js

@@ -1,4 +1,4 @@
-// Version:1.6.5
+// Version:1.6.6
 const API_NAME = "hsmain";
 
 const initializeHsMain = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "description": "Animation and utility library for client websites",
   "main": "index.js",
   "type": "module",