@hortonstudio/main 1.2.34 → 1.2.35

package/autoInit/navbar.js

@@ -1,4 +1,9 @@
+// Global accessibility state
+let supportsInert = null;
+let screenReaderLiveRegion = null;
+
 export const init = () => {
+  setupAccessibilityFeatures();
   setupDynamicDropdowns();
   setupMobileMenuButton();
   setupMobileMenuARIA();
@@ -6,6 +11,73 @@ export const init = () => {
   return { result: 'navbar initialized' };
 };
 
+// Accessibility features setup
+function setupAccessibilityFeatures() {
+  // Check inert support once
+  supportsInert = 'inert' in HTMLElement.prototype;
+  
+  // Create screen reader live region
+  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?.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"]');
@@ -68,6 +140,11 @@ function setupDynamicDropdowns() {
       menuItems.forEach(item => {
         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,
@@ -89,6 +166,11 @@ function setupDynamicDropdowns() {
       menuItems.forEach(item => {
         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,
@@ -357,15 +439,15 @@ function setupMobileMenuButton() {
   mobileMenu.id = menuId;
   mobileMenu.setAttribute('role', 'dialog');
   mobileMenu.setAttribute('aria-modal', 'true');
-  mobileMenu.inert = true;
+  setElementInert(mobileMenu, true);
   
   let isMenuOpen = false;
   
   function shouldPreventMobileMenu() {
-    const menuSizeElement = document.querySelector('.menu-size.is-mobile');
-    if (!menuSizeElement) return false;
+    const menuHideElement = document.querySelector('.menu-hide.is-mobile');
+    if (!menuHideElement) return false;
     
-    const computedStyle = window.getComputedStyle(menuSizeElement);
+    const computedStyle = window.getComputedStyle(menuHideElement);
     return computedStyle.display === 'none';
   }
   
@@ -385,7 +467,11 @@ function setupMobileMenuButton() {
     
     menuButton.setAttribute('aria-expanded', 'true');
     menuButton.setAttribute('aria-label', 'Close navigation menu');
-    mobileMenu.inert = false;
+    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"]') || 
@@ -430,7 +516,11 @@ function setupMobileMenuButton() {
     }
     menuButton.setAttribute('aria-expanded', 'false');
     menuButton.setAttribute('aria-label', 'Open navigation menu');
-    mobileMenu.inert = true;
+    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]');
@@ -521,7 +611,7 @@ function setupMobileMenuButton() {
     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) {
@@ -564,10 +654,10 @@ function setupMobileMenuBreakpointHandler() {
   let preventedMenuState = false;
   
   function handleBreakpointChange() {
-    const menuSizeElement = document.querySelector('.menu-size.is-mobile');
-    if (!menuSizeElement) return;
+    const menuHideElement = document.querySelector('.menu-hide.is-mobile');
+    if (!menuHideElement) return;
     
-    const computedStyle = window.getComputedStyle(menuSizeElement);
+    const computedStyle = window.getComputedStyle(menuHideElement);
     const shouldPrevent = computedStyle.display === 'none';
     
     if (!window.mobileMenuState) return;
@@ -586,9 +676,9 @@ function setupMobileMenuBreakpointHandler() {
   // 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);
+    const menuHideElement = document.querySelector('.menu-hide.is-mobile');
+    if (menuHideElement) {
+      resizeObserver.observe(menuHideElement);
     }
   }
   
@@ -628,30 +718,38 @@ function setupMobileMenuARIA() {
     button.setAttribute('aria-expanded', 'false');
     button.setAttribute('aria-controls', listId);
 
-    let dropdownList = button.nextElementSibling;
-    
-    if (!dropdownList || !dropdownList.querySelector('a')) {
-      dropdownList = button.parentElement?.nextElementSibling;
-    }
+    // 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 (!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)
-      );
+    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')) {
       dropdownList.id = listId;
-      dropdownList.inert = true;
+      setElementInert(dropdownList, true);
 
       button.addEventListener('click', function() {
         const isExpanded = button.getAttribute('aria-expanded') === 'true';
         const newState = !isExpanded;
         button.setAttribute('aria-expanded', newState);
-        dropdownList.inert = !newState;
+        setElementInert(dropdownList, !newState);
+        
+        // Announce to screen readers
+        const menuName = getMenuName(button);
+        announceToScreenReader(`${menuName} submenu ${newState ? 'opened' : 'closed'}`);
       });
     }
   });
@@ -675,7 +773,8 @@ function setupMobileMenuArrowNavigation(menuContainer) {
     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;

package/index.js

@@ -1,4 +1,4 @@
-// Version:1.2.32
+// Version:1.2.35
 
 const API_NAME = 'hsmain';
 

package/package.json

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