@hortonstudio/main 1.9.6 → 1.9.7

package/autoInit/accessibility/functions/custom-values-replacement/custom-values-replacement.js

@@ -0,0 +1,102 @@
+export function init() {
+  function setupCustomValuesReplacement() {
+    const customValuesList = document.querySelector('[data-hs-a11y="custom-values-list"]');
+
+    if (!customValuesList) {
+      return;
+    }
+
+    // Collect all custom values data
+    const customValues = {};
+    const descendants = customValuesList.getElementsByTagName('*');
+
+    Array.from(descendants).forEach(descendant => {
+      const nameElement = descendant.querySelector('[data-hs-a11y="custom-values-name"]');
+      const valueElement = descendant.querySelector('[data-hs-a11y="custom-values-value"]');
+
+      if (nameElement && valueElement) {
+        const name = nameElement.textContent.trim();
+        const value = valueElement.textContent.trim();
+
+        if (name && value) {
+          customValues[name] = value;
+        }
+      }
+    });
+
+    // If no custom values found, exit early
+    if (Object.keys(customValues).length === 0) {
+      return;
+    }
+
+    // Replace text content efficiently using TreeWalker
+    const walker = document.createTreeWalker(
+      document.body,
+      NodeFilter.SHOW_TEXT,
+      {
+        acceptNode: (node) => {
+          // Check if any custom value names exist in the text content
+          const text = node.textContent;
+          for (const name in customValues) {
+            if (text.includes(`{{${name}}}`)) {
+              return NodeFilter.FILTER_ACCEPT;
+            }
+          }
+          return NodeFilter.FILTER_SKIP;
+        }
+      }
+    );
+
+    const textNodes = [];
+    let node;
+    while (node = walker.nextNode()) {
+      textNodes.push(node);
+    }
+
+    // Replace text in collected nodes
+    textNodes.forEach(textNode => {
+      let newText = textNode.textContent;
+      let hasChanges = false;
+
+      for (const name in customValues) {
+        const placeholder = `{{${name}}}`;
+        if (newText.includes(placeholder)) {
+          newText = newText.replace(new RegExp(placeholder, 'g'), customValues[name]);
+          hasChanges = true;
+        }
+      }
+
+      if (hasChanges) {
+        textNode.textContent = newText;
+      }
+    });
+
+    // Replace link hrefs
+    const links = document.querySelectorAll('a[href]');
+    links.forEach(link => {
+      let href = link.getAttribute('href');
+      let hasChanges = false;
+
+      for (const name in customValues) {
+        const placeholder = `{{${name}}}`;
+        if (href.includes(placeholder)) {
+          href = href.replace(new RegExp(placeholder, 'g'), customValues[name]);
+          hasChanges = true;
+        }
+      }
+
+      if (hasChanges) {
+        link.setAttribute('href', href);
+      }
+    });
+  }
+
+  setupCustomValuesReplacement();
+
+  return {
+    result: "custom-values-replacement initialized",
+    destroy: () => {
+      // No cleanup needed - this is a one-time text replacement
+    }
+  };
+}

package/autoInit/accessibility/functions/dropdown/README.md

@@ -0,0 +1,212 @@
+# **Dropdown Accessibility**
+
+## **Overview**
+
+Universal dropdown system for FAQ, summary/read-more, and general toggle components. Automatically syncs ARIA attributes with Webflow interactions and optionally updates text content.
+
+**This function handles all dropdown/accordion/toggle patterns with a single unified system.**
+
+---
+
+## **Required Elements**
+
+**Dropdown Wrapper**
+* data-hs-dropdown="wrapper"
+* data-hs-dropdown-text-swap="Close" (text for open state, defaults to "Close")
+
+**Dropdown Toggle** *(gets is-active class from Webflow IX)*
+* data-hs-dropdown="toggle"
+* Contains clickable element
+
+**Clickable Element**
+* data-site-clickable="element"
+* First child receives ARIA attributes
+
+**Text Wrapper** *(optional - controls text update scope)*
+* data-hs-dropdown="text"
+* If present: all text inside swaps
+* If absent: only aria-label updates (visual text stays static)
+
+**Dropdown Content** *(expandable area)*
+* data-hs-dropdown="content"
+
+---
+
+## **What It Does**
+
+1. **Monitors Toggle State**: MutationObserver watches for `is-active` class changes
+2. **Updates ARIA**: Sets `aria-expanded`, `aria-controls`, `aria-hidden`, `role="region"`
+3. **Text Updates**:
+   - **With text wrapper**: Swaps all text nodes + aria-label
+   - **Without text wrapper**: Only updates aria-label (visual stays static)
+4. **Focus Management**: Returns focus to toggle button when closing if focus is inside content
+5. **Supports Nesting**: Each dropdown manages its own state independently
+
+---
+
+## **Usage Examples**
+
+### **FAQ (No Visual Text Change)**
+
+```html
+<div data-hs-dropdown="wrapper" data-hs-dropdown-text-swap="Close FAQ">
+  <div data-hs-dropdown="toggle">
+    <div data-site-clickable="element">
+      <button>
+        <span class="u-sr-only">Open FAQ</span>
+      </button>
+    </div>
+    <h3>What is this product?</h3>
+  </div>
+  <div data-hs-dropdown="content">
+    <p>This is a detailed answer...</p>
+  </div>
+</div>
+```
+
+**Result:**
+- Question text stays visible ✅
+- Only aria-label swaps: "Open FAQ" ↔ "Close FAQ"
+- Perfect for FAQ lists
+
+---
+
+### **Summary (Full Text Swap)**
+
+```html
+<div data-hs-dropdown="wrapper" data-hs-dropdown-text-swap="Close">
+  <div data-hs-dropdown="toggle">
+    <p>View Quick Summary</p>
+    <div data-hs-dropdown="text">
+      <div data-site-clickable="element">
+        <button>View</button>
+      </div>
+    </div>
+  </div>
+  <div data-hs-dropdown="content">
+    <p>Full summary content...</p>
+  </div>
+</div>
+```
+
+**Result:**
+- All text in "text" wrapper swaps: "View" ↔ "Close"
+- aria-label also swaps to match
+- Perfect for read-more toggles
+
+---
+
+### **Product Details (No Text Wrapper)**
+
+```html
+<div data-hs-dropdown="wrapper" data-hs-dropdown-text-swap="Hide Details">
+  <div data-hs-dropdown="toggle">
+    <div data-site-clickable="element">
+      <button>Show Details</button>
+    </div>
+  </div>
+  <div data-hs-dropdown="content">
+    <p>Product specifications...</p>
+  </div>
+</div>
+```
+
+**Result:**
+- Only aria-label swaps: "Show Details" ↔ "Hide Details"
+- Visual button text stays static
+
+---
+
+### **Nested Dropdowns**
+
+```html
+<div data-hs-dropdown="wrapper" data-hs-dropdown-text-swap="Hide">
+  <div data-hs-dropdown="toggle">
+    <button>Product Details</button>
+  </div>
+  <div data-hs-dropdown="content">
+    <p>Product info...</p>
+
+    <!-- Nested FAQ -->
+    <div data-hs-dropdown="wrapper" data-hs-dropdown-text-swap="Close FAQ">
+      <div data-hs-dropdown="toggle">
+        <button>Shipping Questions</button>
+      </div>
+      <div data-hs-dropdown="content">
+        <p>Shipping details...</p>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+**Result:**
+- Each dropdown manages its own state
+- Focus returns to parent when parent closes
+- Fully accessible keyboard navigation
+
+---
+
+## **Key Attributes**
+
+| Attribute | Purpose |
+| ----- | ----- |
+| `data-hs-dropdown="wrapper"` | Container for entire dropdown |
+| `data-hs-dropdown-text-swap` | Text for open state (default: "Close") |
+| `data-hs-dropdown="toggle"` | Gets is-active from Webflow IX |
+| `data-hs-dropdown="text"` | Optional text update scope |
+| `data-site-clickable="element"` | Contains actual button/link |
+| `data-hs-dropdown="content"` | Expandable content area |
+
+---
+
+## **How It Works**
+
+1. **Initial Setup**: Scans for all `[data-hs-dropdown="wrapper"]` elements
+2. **ID Generation**: Creates unique IDs for ARIA relationships
+3. **Text Capture**: Saves original text from text wrapper or clickable
+4. **State Detection**: Checks for existing `is-active` class on toggle
+5. **Observer Setup**: MutationObserver watches toggle for class changes
+6. **State Sync**: When `is-active` changes, updates ARIA and text
+7. **Focus Management**: Returns focus to button when closing if needed
+
+---
+
+## **Focus Management**
+
+When any dropdown closes:
+- If focus is anywhere inside content area
+- Focus automatically returns to toggle button
+- Then ARIA updates apply
+- Prevents keyboard users from losing focus
+
+Works for:
+- Buttons inside content ✅
+- Nested dropdowns ✅
+- Form fields inside content ✅
+
+---
+
+## **Notes**
+
+* Pattern matches navbar structure
+* Works with Webflow IX for visual state (`is-active`)
+* Text wrapper is optional - use for visual text changes
+* Without text wrapper, only aria-label changes
+* Supports infinite nesting depth
+* Warns in console if multiple clickables found in toggle
+* All observers cleaned up on destroy for Barba.js compatibility
+
+---
+
+## **Common Patterns**
+
+### **When to use text wrapper:**
+- Summary/Read More toggles
+- Buttons that should visually change
+- Any toggle where text swap is visible
+
+### **When NOT to use text wrapper:**
+- FAQ items (question should stay visible)
+- Toggles with static visible labels
+- Dropdowns where only accessible text should change

package/autoInit/accessibility/functions/dropdown/dropdown.js

@@ -0,0 +1,167 @@
+export function init() {
+  const cleanup = {
+    observers: []
+  };
+
+  const addObserver = (observer) => cleanup.observers.push(observer);
+
+  function setupDropdownAccessibility(addObserver) {
+    const dropdownWrappers = document.querySelectorAll('[data-hs-dropdown="wrapper"]');
+
+    dropdownWrappers.forEach((wrapper, index) => {
+      const toggle = wrapper.querySelector('[data-hs-dropdown="toggle"]');
+      const content = wrapper.querySelector('[data-hs-dropdown="content"]');
+      const textSwapValue = wrapper.getAttribute('data-hs-dropdown-text-swap') || 'Close';
+
+      if (!toggle || !content) {
+        return;
+      }
+
+      // Check for multiple clickables and warn
+      const clickables = toggle.querySelectorAll('[data-site-clickable="element"]');
+      if (clickables.length > 1) {
+        console.warn('[dropdown-accessibility] Multiple clickables found in toggle. Using first one only.', toggle);
+      }
+
+      const clickable = clickables[0];
+      if (!clickable) {
+        return;
+      }
+
+      const button = clickable.children[0];
+      if (!button) {
+        return;
+      }
+
+      // Generate unique IDs
+      const buttonId = `hs-dropdown-btn-${index}`;
+      const contentId = `hs-dropdown-content-${index}`;
+
+      // Check if text wrapper exists
+      const textWrapper = toggle.querySelector('[data-hs-dropdown="text"]');
+
+      // Capture original text
+      let originalText = '';
+      if (textWrapper) {
+        // Get text from text wrapper
+        const walker = document.createTreeWalker(
+          textWrapper,
+          NodeFilter.SHOW_TEXT,
+          null,
+          false
+        );
+
+        let firstTextNode = walker.nextNode();
+        while (firstTextNode && !firstTextNode.textContent.trim()) {
+          firstTextNode = walker.nextNode();
+        }
+
+        originalText = firstTextNode ? firstTextNode.textContent.trim() : textWrapper.textContent.trim();
+      } else {
+        // Get text from clickable for aria-label fallback
+        const walker = document.createTreeWalker(
+          clickable,
+          NodeFilter.SHOW_TEXT,
+          null,
+          false
+        );
+
+        let firstTextNode = walker.nextNode();
+        while (firstTextNode && !firstTextNode.textContent.trim()) {
+          firstTextNode = walker.nextNode();
+        }
+
+        originalText = firstTextNode ? firstTextNode.textContent.trim() : clickable.textContent.trim();
+      }
+
+      // Function to update text nodes
+      function updateText(newText) {
+        if (textWrapper) {
+          // Update all text nodes in text wrapper
+          const walker = document.createTreeWalker(
+            textWrapper,
+            NodeFilter.SHOW_TEXT,
+            null,
+            false
+          );
+
+          const textNodes = [];
+          let node;
+          while (node = walker.nextNode()) {
+            if (node.textContent.trim()) {
+              textNodes.push(node);
+            }
+          }
+
+          textNodes.forEach(textNode => {
+            textNode.textContent = newText;
+          });
+        }
+
+        // Always update aria-label
+        button.setAttribute('aria-label', newText);
+      }
+
+      // Set initial IDs and ARIA attributes
+      button.setAttribute('id', buttonId);
+      content.setAttribute('id', contentId);
+      content.setAttribute('role', 'region');
+      content.setAttribute('aria-labelledby', buttonId);
+
+      button.setAttribute('aria-controls', contentId);
+
+      // Function to check if dropdown is open
+      function isDropdownOpen() {
+        return toggle.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 closing and focus is inside content, return focus first
+        if (wasOpen && !isOpen && content.contains(document.activeElement)) {
+          button.focus();
+        }
+
+        // Update ARIA attributes
+        button.setAttribute("aria-expanded", isOpen ? "true" : "false");
+        content.setAttribute("aria-hidden", isOpen ? "false" : "true");
+
+        // Update text and aria-label
+        if (isOpen) {
+          updateText(textSwapValue);
+        } else {
+          updateText(originalText);
+        }
+      }
+
+      // Set initial state based on existing is-active class
+      updateARIAStates();
+
+      // Monitor for class changes on toggle
+      const observer = new MutationObserver(() => {
+        updateARIAStates();
+      });
+
+      observer.observe(toggle, {
+        attributes: true,
+        attributeFilter: ['class']
+      });
+
+      addObserver(observer);
+    });
+  }
+
+  setupDropdownAccessibility(addObserver);
+
+  return {
+    result: "dropdown initialized",
+    destroy: () => {
+      // Disconnect all observers
+      cleanup.observers.forEach(obs => obs.disconnect());
+      cleanup.observers.length = 0;
+    }
+  };
+}

package/autoInit/accessibility/functions/list-accessibility/README.md

@@ -0,0 +1,56 @@
+# **List Accessibility**
+
+## **Overview**
+
+Adds proper ARIA roles to custom-styled lists that aren't using semantic HTML list elements.
+
+---
+
+## **Required Elements**
+
+**List Container**
+* data-hs-a11y="list"
+
+**List Items**
+* data-hs-a11y="list-item"
+
+---
+
+## **What It Does**
+
+1. Finds all `[data-hs-a11y="list"]` elements
+2. Adds `role="list"` to each
+3. Finds all `[data-hs-a11y="list-item"]` elements
+4. Adds `role="listitem"` to each
+
+---
+
+## **Usage Example**
+
+```html
+<!-- Custom styled list -->
+<div data-hs-a11y="list">
+  <div data-hs-a11y="list-item">Item 1</div>
+  <div data-hs-a11y="list-item">Item 2</div>
+  <div data-hs-a11y="list-item">Item 3</div>
+</div>
+```
+
+**Result:** Screen readers announce as a list with 3 items.
+
+---
+
+## **Key Attributes**
+
+| Attribute | Purpose |
+| ----- | ----- |
+| `data-hs-a11y="list"` | List container |
+| `data-hs-a11y="list-item"` | Individual list items |
+
+---
+
+## **Notes**
+
+* Use when not using `<ul>/<ol>/<li>` semantic HTML
+* ARIA roles remain after initialization
+* No cleanup needed

package/autoInit/accessibility/functions/list-accessibility/list-accessibility.js

@@ -0,0 +1,23 @@
+export function init() {
+  function setupListAccessibility() {
+    const listElements = document.querySelectorAll('[data-hs-a11y="list"]');
+    const listItemElements = document.querySelectorAll('[data-hs-a11y="list-item"]');
+
+    listElements.forEach(element => {
+      element.setAttribute('role', 'list');
+    });
+
+    listItemElements.forEach(element => {
+      element.setAttribute('role', 'listitem');
+    });
+  }
+
+  setupListAccessibility();
+
+  return {
+    result: "list-accessibility initialized",
+    destroy: () => {
+      // No cleanup needed - ARIA attributes remain on elements
+    }
+  };
+}

package/autoInit/accessibility/functions/prevent-default/README.md

@@ -0,0 +1,58 @@
+# **Prevent Default**
+
+## **Overview**
+
+Prevents default behavior on elements, including clicks and keyboard activation. Useful for decorative buttons or preventing anchor scrolling.
+
+---
+
+## **Required Elements**
+
+**Element to Disable**
+* data-hs-a11y="prevent-default"
+
+---
+
+## **What It Does**
+
+1. Finds all `[data-hs-a11y="prevent-default"]` elements
+2. Prevents click events
+3. Prevents Enter/Space keyboard activation
+4. For anchor links with `#` hrefs:
+   - Removes href attribute
+   - Sets `role="button"`
+   - Sets `tabindex="0"`
+
+---
+
+## **Usage Example**
+
+```html
+<!-- Decorative button (no action) -->
+<button data-hs-a11y="prevent-default">
+  Disabled Action
+</button>
+
+<!-- Anchor link without scroll -->
+<a href="#" data-hs-a11y="prevent-default">
+  Click me (won't scroll)
+</a>
+```
+
+**Result:** Elements receive focus but perform no action when clicked or activated.
+
+---
+
+## **Key Attributes**
+
+| Attribute | Purpose |
+| ----- | ----- |
+| `data-hs-a11y="prevent-default"` | Element to disable |
+
+---
+
+## **Notes**
+
+* Event listeners cleaned up on destroy
+* Useful with Webflow IX for custom behaviors
+* Anchor links converted to role="button"

package/autoInit/accessibility/functions/prevent-default/prevent-default.js

@@ -0,0 +1,58 @@
+export function init() {
+  const cleanup = {
+    handlers: []
+  };
+
+  const addHandler = (element, event, handler, options) => {
+    element.addEventListener(event, handler, options);
+    cleanup.handlers.push({ element, event, handler, options });
+  };
+
+  function setupPreventDefault(addHandler) {
+    const elements = document.querySelectorAll('[data-hs-a11y="prevent-default"]');
+
+    elements.forEach(element => {
+      // Prevent click
+      const clickHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      };
+      addHandler(element, 'click', clickHandler);
+
+      // Prevent keyboard activation
+      const keydownHandler = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          e.stopPropagation();
+          return false;
+        }
+      };
+      addHandler(element, 'keydown', keydownHandler);
+
+      // Additional prevention for anchor links
+      if (element.tagName.toLowerCase() === 'a') {
+        // Remove or modify href to prevent scroll
+        const originalHref = element.getAttribute('href');
+        if (originalHref && (originalHref === '#' || originalHref.startsWith('#'))) {
+          element.setAttribute('data-original-href', originalHref);
+          element.removeAttribute('href');
+          element.setAttribute('role', 'button');
+          element.setAttribute('tabindex', '0');
+        }
+      }
+    });
+  }
+
+  setupPreventDefault(addHandler);
+
+  return {
+    result: "prevent-default initialized",
+    destroy: () => {
+      cleanup.handlers.forEach(({ element, event, handler, options }) => {
+        element.removeEventListener(event, handler, options);
+      });
+      cleanup.handlers.length = 0;
+    }
+  };
+}