@hortonstudio/main 1.5.0 → 1.5.1

package/autoInit/accessibility.js

@@ -88,13 +88,13 @@ export function init() {
   }
 
   function setupFAQAccessibility() {
-    const faqContainers = document.querySelectorAll('[data-hs-a11y="faq"]');
+    const faqContainers = document.querySelectorAll('[data-hs-a11y="faq-wrap"]');
 
     faqContainers.forEach((container, index) => {
-      const button = container.querySelector('button');
-      const contentWrapper = button.parentElement.nextElementSibling;
+      const button = container.querySelector('[data-hs-a11y="faq-btn"]');
+      const contentWrapper = container.querySelector('[data-hs-a11y="faq-content"]');
       
-      if (!contentWrapper) return;
+      if (!button || !contentWrapper) return;
       
       const buttonId = `faq-button-${index}`;
       const contentId = `faq-content-${index}`;
@@ -191,12 +191,16 @@ export function init() {
 
   function setupYearReplacement() {
     const currentYear = new Date().getFullYear().toString();
+    const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 
+                        'July', 'August', 'September', 'October', 'November', 'December'];
+    const currentMonth = monthNames[new Date().getMonth()];
+    
     const walker = document.createTreeWalker(
       document.body,
       NodeFilter.SHOW_TEXT,
       {
         acceptNode: (node) => {
-          return node.textContent.includes('{{year}}') 
+          return (node.textContent.includes('{{year}}') || node.textContent.includes('{{month}}'))
             ? NodeFilter.FILTER_ACCEPT 
             : NodeFilter.FILTER_SKIP;
         }
@@ -210,7 +214,8 @@ export function init() {
     }
 
     textNodes.forEach(textNode => {
-      const newText = textNode.textContent.replace(/\{\{year\}\}/gi, currentYear);
+      let newText = textNode.textContent.replace(/\{\{year\}\}/gi, currentYear);
+      newText = newText.replace(/\{\{month\}\}/gi, currentMonth);
       if (newText !== textNode.textContent) {
         textNode.textContent = newText;
       }

package/autoInit/navbar.js

@@ -54,9 +54,18 @@ function setupDynamicDropdowns() {
     dropdownList.setAttribute("aria-hidden", "true");
 
     const menuItems = dropdownList.querySelectorAll("a");
-    menuItems.forEach((item) => {
+    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 isOpen = false;
@@ -65,6 +74,8 @@ function setupDynamicDropdowns() {
     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");
@@ -83,16 +94,22 @@ function setupDynamicDropdowns() {
     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;
-      if (shouldRestoreFocus) {
-        toggle.focus();
-      }
       toggle.setAttribute("aria-expanded", "false");
       dropdownList.setAttribute("aria-hidden", "true");
       menuItems.forEach((item) => {
         item.setAttribute("tabindex", "-1");
       });
+      
+      // Force screen reader virtual cursor refresh by briefly focusing dropdown container then restoring
+      if (shouldRestoreFocus) {
+        // This helps reset virtual cursor position
+        dropdownList.focus();
+        toggle.focus();
+      }
 
       const clickEvent = new MouseEvent("click", {
         bubbles: true,

package/index.js

@@ -1,4 +1,4 @@
-// Version:1.5.0
+// Version:1.5.1
 
 const API_NAME = "hsmain";
 

package/package.json

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

package/autoInit/custom-values.js

@@ -1,224 +0,0 @@
-export function init() {
-  const customValues = new Map();
-  let isInitialized = false;
-  
-  const config = {
-    searchAttributes: [
-      'href', 'src', 'alt', 'title', 'aria-label', 'data-src', 
-      'data-href', 'action', 'placeholder', 'value'
-    ],
-    excludeSelectors: [
-      'script', 'style', 'meta', 'link', 'title', 'head',
-      '[data-hs-custom="list"]', '[data-hs-custom="name"]', '[data-hs-custom="value"]'
-    ],
-    phoneFormatting: {
-      telAttributes: ['href'],
-      phonePattern: /^[\+]?[1-9]?[\d\s\-\(\)\.]{7,15}$/,
-      defaultCountryCode: '+1',
-      cleanForTel: (phone) => {
-        const cleaned = phone.replace(/[^\d+]/g, '');
-        if (!cleaned.startsWith('+')) {
-          return config.phoneFormatting.defaultCountryCode + cleaned;
-        }
-        return cleaned;
-      },
-      formatForDisplay: (phone) => phone
-    }
-  };
-
-  function isPhoneNumber(value) {
-    return config.phoneFormatting.phonePattern.test(value.trim());
-  }
-
-  function formatValueForContext(value, isAttribute, attributeName) {
-    if (isPhoneNumber(value)) {
-      if (isAttribute && config.phoneFormatting.telAttributes.includes(attributeName)) {
-        return config.phoneFormatting.cleanForTel(value);
-      } else {
-        return config.phoneFormatting.formatForDisplay(value);
-      }
-    }
-    return value;
-  }
-
-  function extractCustomValues() {
-    const currentYear = new Date().getFullYear().toString();
-    customValues.set('{{year}}', currentYear);
-    
-    const customList = document.querySelector('[data-hs-custom="list"]');
-    if (!customList) {
-      return customValues.size > 0;
-    }
-
-    const nameElements = customList.querySelectorAll('[data-hs-custom="name"]');
-    const valueElements = customList.querySelectorAll('[data-hs-custom="value"]');
-
-    for (let i = 0; i < Math.min(nameElements.length, valueElements.length); i++) {
-      const name = nameElements[i].textContent.trim();
-      const value = valueElements[i].textContent.trim();
-      
-      if (name && value) {
-        const key = `{{${name.toLowerCase()}}}`;
-        customValues.set(key, value);
-      }
-    }
-
-    return customValues.size > 0;
-  }
-
-  function replaceInText(text, isAttribute = false, attributeName = null) {
-    if (!text || typeof text !== 'string') return text;
-    
-    let result = text;
-    
-    customValues.forEach((value, placeholder) => {
-      const regex = new RegExp(placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
-      const matches = text.match(regex);
-      if (matches) {
-        const formattedValue = formatValueForContext(value, isAttribute, attributeName);
-        result = result.replace(regex, formattedValue);
-      }
-    });
-    
-    return result;
-  }
-
-  function replaceInAttributes(element) {
-    config.searchAttributes.forEach(attr => {
-      const value = element.getAttribute(attr);
-      if (value) {
-        const newValue = replaceInText(value, true, attr);
-        if (newValue !== value) {
-          element.setAttribute(attr, newValue);
-        }
-      }
-    });
-  }
-
-  function shouldExcludeElement(element) {
-    return config.excludeSelectors.some(selector => {
-      return element.matches(selector);
-    });
-  }
-
-  function processTextNodes(element) {
-    const walker = document.createTreeWalker(
-      element,
-      NodeFilter.SHOW_TEXT,
-      {
-        acceptNode: (node) => {
-          if (shouldExcludeElement(node.parentElement)) {
-            return NodeFilter.FILTER_REJECT;
-          }
-          
-          return node.textContent.includes('{{') && node.textContent.includes('}}') 
-            ? NodeFilter.FILTER_ACCEPT 
-            : NodeFilter.FILTER_SKIP;
-        }
-      }
-    );
-
-    const textNodes = [];
-    let node;
-    while (node = walker.nextNode()) {
-      textNodes.push(node);
-    }
-
-    textNodes.forEach(textNode => {
-      const originalText = textNode.textContent;
-      const newText = replaceInText(originalText);
-      if (newText !== originalText) {
-        textNode.textContent = newText;
-      }
-    });
-  }
-
-  function processElements(container) {
-    const elements = container.querySelectorAll('*');
-    
-    elements.forEach(element => {
-      if (!shouldExcludeElement(element)) {
-        replaceInAttributes(element);
-      }
-    });
-  }
-
-  function performReplacements() {
-    if (customValues.size === 0) return;
-
-    processTextNodes(document.body);
-    processElements(document.body);
-    replaceInAttributes(document.documentElement);
-  }
-
-  function cleanupCustomList() {
-    const customList = document.querySelector('[data-hs-custom="list"]');
-    if (customList) {
-      customList.remove();
-    }
-  }
-
-  function setupDynamicContentHandler() {
-    const observer = new MutationObserver((mutations) => {
-      let hasNewContent = false;
-      
-      mutations.forEach((mutation) => {
-        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
-          mutation.addedNodes.forEach((node) => {
-            if (node.nodeType === Node.ELEMENT_NODE) {
-              const hasPlaceholders = node.textContent.includes('{{') && node.textContent.includes('}}');
-              const hasAttributePlaceholders = config.searchAttributes.some(attr => {
-                const value = node.getAttribute?.(attr);
-                return value && value.includes('{{') && value.includes('}}');
-              });
-              
-              if (hasPlaceholders || hasAttributePlaceholders) {
-                hasNewContent = true;
-              }
-            }
-          });
-        }
-      });
-      
-      if (hasNewContent && customValues.size > 0) {
-        clearTimeout(observer.timeout);
-        observer.timeout = setTimeout(() => {
-          performReplacements();
-        }, 100);
-      }
-    });
-
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true
-    });
-
-    return observer;
-  }
-
-  function initializeCustomValues() {
-    if (isInitialized) return;
-    
-    const hasCustomValues = extractCustomValues();
-    
-    if (hasCustomValues) {
-      performReplacements();
-      cleanupCustomList();
-      setupDynamicContentHandler();
-      
-      isInitialized = true;
-      
-      return {
-        result: `custom-values initialized with ${customValues.size} replacements`,
-        count: customValues.size
-      };
-    } else {
-      return {
-        result: 'custom-values initialized (no custom values found)',
-        count: 0
-      };
-    }
-  }
-
-  return initializeCustomValues();
-}