@hortonstudio/main 1.9.6 → 1.9.8

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/text-synchronization/README.md

@@ -0,0 +1,62 @@
+# **Text Synchronization**
+
+## **Overview**
+
+Automatically synchronizes text content and aria-labels from an original element to multiple match elements. Updates in real-time when original changes.
+
+---
+
+## **Required Elements**
+
+**Original Element** *(source of truth)*
+* data-hs-a11y="match-text-[identifier], original"
+
+**Match Elements** *(copies)*
+* data-hs-a11y="match-text-[identifier], match"
+
+**Note:** `[identifier]` must match between original and matches.
+
+---
+
+## **What It Does**
+
+1. Finds all original elements
+2. Matches them to corresponding match elements by identifier
+3. Copies text content from original → matches
+4. Syncs `aria-label` attribute
+5. Watches for changes with MutationObserver
+6. Updates matches automatically when original changes
+
+---
+
+## **Usage Example**
+
+```html
+<!-- Original -->
+<h1 data-hs-a11y="match-text-title, original">
+  Welcome to Our Site
+</h1>
+
+<!-- Matches (auto-updated) -->
+<span data-hs-a11y="match-text-title, match"></span>
+<div data-hs-a11y="match-text-title, match"></div>
+```
+
+**Result:** Both match elements display "Welcome to Our Site". If original changes, matches update automatically.
+
+---
+
+## **Key Attributes**
+
+| Attribute | Purpose |
+| ----- | ----- |
+| `data-hs-a11y="match-text-[id], original"` | Source element |
+| `data-hs-a11y="match-text-[id], match"` | Target elements |
+
+---
+
+## **Notes**
+
+* Real-time synchronization via MutationObserver
+* Syncs both text and aria-label
+* Observers cleaned up on destroy

package/autoInit/accessibility/functions/text-synchronization/text-synchronization.js

@@ -0,0 +1,101 @@
+export function init() {
+  const cleanup = {
+    observers: []
+  };
+
+  const addObserver = (observer) => cleanup.observers.push(observer);
+
+  function setupTextSynchronization(addObserver) {
+    // Find all original elements (source of truth)
+    const originalElements = document.querySelectorAll('[data-hs-a11y*="original"]');
+
+    originalElements.forEach(originalElement => {
+      const attribute = originalElement.getAttribute('data-hs-a11y');
+
+      // Parse the attribute: "match-text-[identifier], original"
+      const parts = attribute.split(',').map(part => part.trim());
+
+      // Find the part with match-text and the part with original
+      const textPart = parts.find(part => part.startsWith('match-text-'));
+      const rolePart = parts.find(part => part === 'original');
+
+      if (!textPart || !rolePart) {
+        return;
+      }
+
+      // Extract identifier from "match-text-[identifier]"
+      const identifier = textPart.replace('match-text-', '').trim();
+
+      // Find all corresponding match elements
+      const matchSelector = `[data-hs-a11y*="match-text-${identifier}"][data-hs-a11y*="match"]`;
+      const matchElements = document.querySelectorAll(matchSelector);
+
+      if (matchElements.length === 0) {
+        return;
+      }
+
+      // Function to synchronize text and aria-label
+      function synchronizeContent() {
+        const originalText = originalElement.textContent;
+        const originalAriaLabel = originalElement.getAttribute('aria-label');
+
+        matchElements.forEach(matchElement => {
+          // Copy text content
+          matchElement.textContent = originalText;
+
+          // Synchronize aria-label
+          if (originalAriaLabel) {
+            // If original has aria-label, copy it to match
+            matchElement.setAttribute('aria-label', originalAriaLabel);
+          } else {
+            // If original has no aria-label, remove it from match (keep in sync)
+            if (matchElement.hasAttribute('aria-label')) {
+              matchElement.removeAttribute('aria-label');
+            }
+          }
+        });
+      }
+
+      // Initial synchronization
+      synchronizeContent();
+
+      // Set up MutationObserver to watch for changes
+      const observer = new MutationObserver((mutations) => {
+        let shouldSync = false;
+
+        mutations.forEach((mutation) => {
+          if (mutation.type === 'childList' ||
+              mutation.type === 'characterData' ||
+              (mutation.type === 'attributes' && mutation.attributeName === 'aria-label')) {
+            shouldSync = true;
+          }
+        });
+
+        if (shouldSync) {
+          synchronizeContent();
+        }
+      });
+
+      // Observe text changes and attribute changes
+      observer.observe(originalElement, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+        attributes: true,
+        attributeFilter: ['aria-label']
+      });
+
+      addObserver(observer);
+    });
+  }
+
+  setupTextSynchronization(addObserver);
+
+  return {
+    result: "text-synchronization initialized",
+    destroy: () => {
+      cleanup.observers.forEach(obs => obs.disconnect());
+      cleanup.observers.length = 0;
+    }
+  };
+}

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

@@ -0,0 +1,79 @@
+# **Table of Contents (TOC)**
+
+## **Overview**
+
+Automatically generates a **Table of Contents** from H2 headings in rich text content, with smooth scrolling, focus management, and active state tracking based on scroll position.
+
+**This function is specifically designed for creating dynamic TOC navigation from blog posts and long-form content.**
+
+---
+
+## **Required Elements**
+
+**Rich Content Area**
+* data-hs-a11y="rich-content"
+* Contains H2 headings to generate TOC from
+
+**TOC List**
+* data-hs-a11y="rich-toc"
+* Should contain one template item (first child)
+* Template is cloned for each H2 heading
+
+---
+
+## **What It Does**
+
+1. **Section Creation:** Wraps each H2 and following content in a div with unique ID
+2. **TOC Generation:** Clones template for each H2, creates numbered links
+3. **Smooth Scrolling:** Handles clicks with smooth scroll to section
+4. **Focus Management:** Sets focus on section after scroll
+5. **Active Tracking:** Uses IntersectionObserver to highlight current section in TOC
+6. **Scroll Monitoring:** Updates active state on scroll (25% from bottom trigger)
+
+---
+
+## **Usage Example**
+
+```html
+<!-- TOC List with template -->
+<div data-hs-a11y="rich-toc">
+  <div>
+    <a href="#">Template Link</a>
+  </div>
+</div>
+
+<!-- Rich Content -->
+<div data-hs-a11y="rich-content">
+  <h2>Introduction</h2>
+  <p>Content here...</p>
+
+  <h2>Features</h2>
+  <p>More content...</p>
+
+  <h2>Conclusion</h2>
+  <p>Final content...</p>
+</div>
+```
+
+**Result:**
+- 3 TOC links: "1. Introduction", "2. Features", "3. Conclusion"
+- Sections wrapped with IDs: `#introduction`, `#features`, `#conclusion`
+- Active link tracked by scroll position
+
+---
+
+## **Key Attributes**
+
+| Attribute | Purpose |
+| ----- | ----- |
+| `data-hs-a11y="rich-content"` | Content area with H2s |
+| `data-hs-a11y="rich-toc"` | TOC list container |
+
+---
+
+## **Notes**
+
+* IntersectionObserver with 75% bottom margin
+* Scroll handler for smooth active tracking
+* Template item removed after cloning
+* All observers/handlers cleaned up on destroy

package/autoInit/accessibility/functions/toc/toc.js

@@ -0,0 +1,191 @@
+export function init() {
+  const cleanup = {
+    observers: [],
+    handlers: [],
+    scrollTimeout: 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 });
+  };
+
+  function setupRichTextAccessibility(addObserver, addHandler, cleanup) {
+    const contentAreas = document.querySelectorAll('[data-hs-a11y="rich-content"]');
+    const tocLists = document.querySelectorAll('[data-hs-a11y="rich-toc"]');
+
+    contentAreas.forEach((contentArea) => {
+      // Since there's only 1 content area and 1 TOC list per page, use the first TOC list
+      const tocList = tocLists[0];
+
+      if (!tocList) {
+        return;
+      }
+
+      if (tocList.children.length === 0) {
+        return;
+      }
+
+      const template = tocList.children[0].cloneNode(true);
+      // Remove is-active class from template if it exists
+      const templateLink = template.querySelector("a");
+      if (templateLink) {
+        templateLink.classList.remove('is-active');
+      }
+
+      // Clear all original TOC items
+      tocList.innerHTML = "";
+
+      const h2Headings = contentArea.querySelectorAll("h2");
+
+
+      // Create sections and wrap content
+      h2Headings.forEach((heading) => {
+        const sectionId = heading.textContent
+          .toLowerCase()
+          .replace(/[^a-z0-9]+/g, "-")
+          .replace(/(^-|-$)/g, "");
+
+        const section = document.createElement("div");
+        section.id = sectionId;
+        heading.parentNode.insertBefore(section, heading);
+        section.appendChild(heading);
+        let nextElement = section.nextElementSibling;
+        while (nextElement && nextElement.tagName !== "H2") {
+          const elementToMove = nextElement;
+          nextElement = nextElement.nextElementSibling;
+          section.appendChild(elementToMove);
+        }
+      });
+
+      // Create TOC entries
+      h2Headings.forEach((heading, index) => {
+        const tocItem = template.cloneNode(true);
+        const link = tocItem.querySelector("a");
+        const sectionId = heading.parentElement.id;
+        link.href = "#" + sectionId;
+
+
+        // Bold numbered text
+        const number = document.createElement("strong");
+        number.textContent = index + 1 + ". ";
+
+        // Clear the link and add the number + text
+        link.innerHTML = "";
+        link.appendChild(number);
+        link.appendChild(document.createTextNode(heading.textContent));
+
+        // Add click handler for smooth scrolling
+        const clickHandler = (e) => {
+          e.preventDefault();
+
+          const targetSection = document.getElementById(sectionId);
+          if (targetSection) {
+            targetSection.scrollIntoView({ behavior: "smooth" });
+            // Focus on the section for accessibility (will only show outline for keyboard users due to CSS)
+            setTimeout(() => {
+              targetSection.focus();
+            }, 100);
+          }
+        };
+        addHandler(link, "click", clickHandler);
+
+        // Ensure sections are focusable for keyboard users but use CSS to control focus visibility
+        const targetSection = document.getElementById(sectionId);
+        if (targetSection) {
+          targetSection.setAttribute("tabindex", "-1");
+          // Use focus-visible to only show outline for keyboard focus
+          targetSection.style.outline = "none";
+          targetSection.style.setProperty("outline", "none", "important");
+        }
+
+        // Add item to the TOC list
+        tocList.appendChild(tocItem);
+      });
+
+      // Set up IntersectionObserver for active state (Webflow-style)
+      const sections = Array.from(h2Headings).map(heading => heading.parentElement);
+      const tocLinks = tocList.querySelectorAll('a');
+      let currentActive = null;
+
+      const updateActiveLink = () => {
+        const windowHeight = window.innerHeight;
+        const trigger = windowHeight * 0.75; // 25% from bottom
+
+        let newActive = null;
+
+        // Find the last section whose top is above the trigger point
+        for (let i = sections.length - 1; i >= 0; i--) {
+          const rect = sections[i].getBoundingClientRect();
+          if (rect.top <= trigger) {
+            newActive = sections[i].id;
+            break;
+          }
+        }
+
+        // Only update if active section changed
+        if (newActive !== currentActive) {
+          currentActive = newActive;
+
+          // Remove all is-active
+          tocLinks.forEach(link => link.classList.remove('is-active'));
+
+          // Add to current
+          if (currentActive) {
+            const activeLink = Array.from(tocLinks).find(link =>
+              link.getAttribute('href') === `#${currentActive}`
+            );
+            if (activeLink) {
+              activeLink.classList.add('is-active');
+            }
+          }
+        }
+      };
+
+      const observerOptions = {
+        rootMargin: '0px 0px -75% 0px',
+        threshold: 0
+      };
+
+      const observer = new IntersectionObserver(() => {
+        updateActiveLink();
+      }, observerOptions);
+
+      // Observe all sections
+      sections.forEach(section => observer.observe(section));
+      addObserver(observer);
+
+      // Also update on scroll for smoother tracking
+      const scrollHandler = () => {
+        if (cleanup.scrollTimeout) clearTimeout(cleanup.scrollTimeout);
+        cleanup.scrollTimeout = setTimeout(updateActiveLink, 50);
+      };
+      addHandler(window, 'scroll', scrollHandler);
+
+    });
+  }
+
+  setupRichTextAccessibility(addObserver, addHandler, cleanup);
+
+  return {
+    result: "toc 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;
+
+      // Clear scroll timeout
+      if (cleanup.scrollTimeout) {
+        clearTimeout(cleanup.scrollTimeout);
+        cleanup.scrollTimeout = null;
+      }
+    }
+  };
+}