@hortonstudio/main 1.9.4 → 1.9.7

package/autoInit/accessibility/README.md

@@ -0,0 +1,126 @@
+# **Accessibility System Documentation**
+
+## **Overview**
+
+The accessibility system provides 11 modular functions to enhance website accessibility and functionality. Each function operates independently and can be customized through data attributes.
+
+**Note:** This module auto-initializes and loads all functions on page load.
+
+---
+
+## **Functions**
+
+### **1. Blog Remover**
+Automatically removes blog wrapper elements that have no blog list content.
+
+**Use case:** Clean up empty blog sections when using Webflow CMS conditional visibility.
+
+---
+
+### **2. List Accessibility**
+Adds proper ARIA `role="list"` and `role="listitem"` to custom-styled lists.
+
+**Use case:** Making non-semantic list layouts accessible to screen readers.
+
+---
+
+### **3. Remove List Accessibility**
+Removes list semantics by stripping ARIA roles and converting `<ul>/<ol>/<li>` to divs.
+
+**Use case:** Decorative list layouts that shouldn't be announced as lists.
+
+---
+
+### **4. Convert to Span**
+Converts most HTML elements to span elements while preserving attributes and content.
+
+**Use case:** Removing semantic meaning from purely decorative wrapper elements.
+
+---
+
+### **5. Year Replacement**
+Replaces `{{year}}` and `{{month}}` placeholders with current year and month.
+
+**Use case:** Auto-updating copyright years and date-based content.
+
+---
+
+### **6. Prevent Default**
+Prevents default behavior on elements including clicks and keyboard activation.
+
+**Use case:** Decorative buttons or preventing anchor link scrolling.
+
+---
+
+### **7. Custom Values Replacement**
+Collects custom name-value pairs and replaces `{{name}}` placeholders throughout the page.
+
+**Use case:** Dynamic content replacement for user-defined values.
+
+---
+
+### **8. Click Forwarding**
+Forwards clicks from decorative wrapper elements to actual interactive trigger elements.
+
+**Use case:** Making entire card areas clickable while maintaining semantic structure.
+
+---
+
+### **9. Text Synchronization**
+Synchronizes text content and aria-labels from original element to multiple match elements in real-time.
+
+**Use case:** Keeping duplicate content in sync across multiple locations.
+
+---
+
+### **10. Table of Contents (TOC)**
+Automatically generates a table of contents from H2 headings with smooth scrolling, focus management, and active state tracking.
+
+**Use case:** Auto-generated TOC navigation for blog posts and documentation pages.
+
+---
+
+### **11. Dropdown**
+Universal dropdown system for FAQ, summary/read-more, and general toggle components. Syncs ARIA with Webflow interactions and optionally updates text content.
+
+**Use case:** All dropdown/accordion/toggle patterns with unified ARIA management and optional text swapping.
+
+**Note:** This function replaces the legacy `faq-accessibility` and `summary` functions with a single unified system.
+
+---
+
+## **Documentation**
+
+Each function has detailed documentation in its respective folder:
+
+- `functions/blog-remover/README.md`
+- `functions/list-accessibility/README.md`
+- `functions/remove-list-accessibility/README.md`
+- `functions/convert-to-span/README.md`
+- `functions/year-replacement/README.md`
+- `functions/prevent-default/README.md`
+- `functions/custom-values-replacement/README.md`
+- `functions/click-forwarding/README.md`
+- `functions/text-synchronization/README.md`
+- `functions/toc/README.md`
+- `functions/dropdown/README.md`
+
+---
+
+## **How It Works**
+
+The accessibility system uses a dynamic loader pattern:
+
+1. Main `accessibility.js` imports all function modules
+2. Each function is loaded in parallel via `Promise.all()`
+3. All destroy functions are collected for cleanup
+4. On destroy, all functions are cleaned up properly
+
+---
+
+## **Notes**
+
+- All functions auto-initialize on page load
+- Each function operates independently
+- Barba.js compatible with proper cleanup
+- No configuration required - works with data attributes

package/autoInit/accessibility/accessibility.js

@@ -0,0 +1,56 @@
+export async function init() {
+  // Centralized cleanup tracking
+  const cleanup = {
+    modules: {},
+    destroyFunctions: []
+  };
+
+  const functionMap = {
+    "blog-remover": () => import("./functions/blog-remover/blog-remover.js"),
+    "list-accessibility": () => import("./functions/list-accessibility/list-accessibility.js"),
+    "remove-list-accessibility": () => import("./functions/remove-list-accessibility/remove-list-accessibility.js"),
+    "convert-to-span": () => import("./functions/convert-to-span/convert-to-span.js"),
+    "year-replacement": () => import("./functions/year-replacement/year-replacement.js"),
+    "prevent-default": () => import("./functions/prevent-default/prevent-default.js"),
+    "custom-values-replacement": () => import("./functions/custom-values-replacement/custom-values-replacement.js"),
+    "click-forwarding": () => import("./functions/click-forwarding/click-forwarding.js"),
+    "text-synchronization": () => import("./functions/text-synchronization/text-synchronization.js"),
+    "toc": () => import("./functions/toc/toc.js"),
+    "dropdown": () => import("./functions/dropdown/dropdown.js")
+  };
+
+  const loadFunction = async (functionName) => {
+    try {
+      const { init } = await functionMap[functionName]();
+      const result = await init();
+      cleanup.modules[functionName] = result;
+      if (result && result.destroy) {
+        cleanup.destroyFunctions.push(result.destroy);
+      }
+      return result;
+    } catch (error) {
+      console.error(`Failed to load accessibility function: ${functionName}`, error);
+      throw error;
+    }
+  };
+
+  // Load all functions
+  const functionPromises = Object.keys(functionMap).map(name => loadFunction(name));
+  await Promise.all(functionPromises);
+
+  return {
+    result: "accessibility initialized",
+    destroy: () => {
+      // Call all destroy functions
+      cleanup.destroyFunctions.forEach(destroyFn => {
+        try {
+          destroyFn();
+        } catch (error) {
+          console.error('Error during accessibility cleanup:', error);
+        }
+      });
+      cleanup.destroyFunctions.length = 0;
+      cleanup.modules = {};
+    }
+  };
+}

package/autoInit/accessibility/functions/blog-remover/README.md

@@ -0,0 +1,61 @@
+# **Blog Remover**
+
+## **Overview**
+
+Automatically removes blog wrapper elements that have no blog list content. Useful for cleaning up empty blog sections when using Webflow CMS conditional visibility.
+
+---
+
+## **Required Elements**
+
+**Blog Wrapper**
+* data-site-blog="wrapper"
+* data-site-blog-config="delete-if-no-list" (triggers deletion check)
+
+**Blog List** *(descendant of wrapper)*
+* data-site-blog="list"
+
+---
+
+## **What It Does**
+
+1. Finds all `[data-site-blog="wrapper"]` elements
+2. Checks if wrapper has `data-site-blog-config="delete-if-no-list"`
+3. If yes, checks for descendant with `[data-site-blog="list"]`
+4. If no list found, deletes the entire wrapper
+
+---
+
+## **Usage Example**
+
+```html
+<!-- Will be deleted if no blog list inside -->
+<div data-site-blog="wrapper" data-site-blog-config="delete-if-no-list">
+  <h2>Recent Posts</h2>
+  <!-- If Webflow CMS hides the list, wrapper gets removed -->
+</div>
+
+<!-- Will remain (no delete config) -->
+<div data-site-blog="wrapper">
+  <h2>Recent Posts</h2>
+  <p>No posts yet.</p>
+</div>
+```
+
+---
+
+## **Key Attributes**
+
+| Attribute | Purpose |
+| ----- | ----- |
+| `data-site-blog="wrapper"` | Blog container |
+| `data-site-blog-config="delete-if-no-list"` | Enable deletion if empty |
+| `data-site-blog="list"` | Blog list (prevents deletion) |
+
+---
+
+## **Notes**
+
+* One-time operation on page load
+* No cleanup needed
+* Barba.js compatible

package/autoInit/accessibility/functions/blog-remover/blog-remover.js

@@ -0,0 +1,31 @@
+export function init() {
+  function setupBlogListCleanup() {
+    const wrappers = document.querySelectorAll('[data-site-blog="wrapper"]');
+
+    wrappers.forEach(wrapper => {
+      // Check if wrapper has the delete-if-no-list config
+      const shouldDelete = wrapper.getAttribute('data-site-blog-config') === 'delete-if-no-list';
+
+      if (!shouldDelete) {
+        return;
+      }
+
+      // Check if there's a descendant with data-site-blog="list"
+      const hasList = wrapper.querySelector('[data-site-blog="list"]') !== null;
+
+      // Delete wrapper if it doesn't have a list
+      if (!hasList) {
+        wrapper.remove();
+      }
+    });
+  }
+
+  setupBlogListCleanup();
+
+  return {
+    result: "blog-remover initialized",
+    destroy: () => {
+      // No cleanup needed - this is a one-time DOM operation
+    }
+  };
+}

package/autoInit/accessibility/functions/click-forwarding/README.md

@@ -0,0 +1,60 @@
+# **Click Forwarding**
+
+## **Overview**
+
+Forwards clicks from decorative/wrapper elements to actual interactive trigger elements. Useful for making entire card areas clickable while maintaining semantic button/link.
+
+---
+
+## **Required Elements**
+
+**Clickable Element** *(wrapper users click)*
+* data-hs-a11y="click-trigger-[identifier], clickable"
+
+**Trigger Element** *(actual button/link)*
+* data-hs-a11y="click-trigger-[identifier], trigger"
+
+**Note:** `[identifier]` must match between clickable and trigger.
+
+---
+
+## **What It Does**
+
+1. Finds all clickable elements
+2. Matches them to trigger elements by identifier
+3. Forwards click events from clickable → trigger
+4. Adds keyboard support (Enter/Space)
+5. Sets `tabindex="0"` and `role="button"` on clickable
+
+---
+
+## **Usage Example**
+
+```html
+<div data-hs-a11y="click-trigger-card1, clickable">
+  <h3>Card Title</h3>
+  <p>Card description...</p>
+  <button data-hs-a11y="click-trigger-card1, trigger">
+    Learn More
+  </button>
+</div>
+```
+
+**Result:** Clicking anywhere in the div triggers the button.
+
+---
+
+## **Key Attributes**
+
+| Attribute | Purpose |
+| ----- | ----- |
+| `data-hs-a11y="click-trigger-[id], clickable"` | Wrapper to make clickable |
+| `data-hs-a11y="click-trigger-[id], trigger"` | Actual button/link |
+
+---
+
+## **Notes**
+
+* Identifier must match exactly
+* Event listeners cleaned up on destroy
+* Supports keyboard activation

package/autoInit/accessibility/functions/click-forwarding/click-forwarding.js

@@ -0,0 +1,82 @@
+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 setupClickForwarding(addHandler) {
+    // Find all clickable elements (custom styled elements users click)
+    const clickableElements = document.querySelectorAll('[data-hs-a11y*="clickable"]');
+
+    clickableElements.forEach(clickableElement => {
+      const attribute = clickableElement.getAttribute('data-hs-a11y');
+
+      // Parse the attribute: "click-trigger-[identifier], clickable"
+      const parts = attribute.split(',').map(part => part.trim());
+
+      // Find the part with click-trigger and the part with clickable
+      const triggerPart = parts.find(part => part.startsWith('click-trigger-'));
+      const rolePart = parts.find(part => part === 'clickable');
+
+      if (!triggerPart || !rolePart) {
+        return;
+      }
+
+      // Extract identifier from "click-trigger-[identifier]"
+      const identifier = triggerPart.replace('click-trigger-', '').trim();
+
+      // Find the corresponding trigger element
+      const triggerSelector = `[data-hs-a11y*="click-trigger-${identifier}"][data-hs-a11y*="trigger"]`;
+      const triggerElement = document.querySelector(triggerSelector);
+
+      if (!triggerElement) {
+        return;
+      }
+
+      // Add click event listener to forward clicks
+      const clickHandler = (event) => {
+        // Prevent default behavior on the clickable element
+        event.preventDefault();
+        event.stopPropagation();
+
+        // Trigger click on the target element
+        triggerElement.click();
+      };
+      addHandler(clickableElement, 'click', clickHandler);
+
+      // Also handle keyboard events for accessibility
+      const keydownHandler = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          event.stopPropagation();
+          triggerElement.click();
+        }
+      };
+      addHandler(clickableElement, 'keydown', keydownHandler);
+
+      // Ensure clickable element is keyboard accessible
+      if (!clickableElement.hasAttribute('tabindex')) {
+        clickableElement.setAttribute('tabindex', '0');
+      }
+      if (!clickableElement.hasAttribute('role')) {
+        clickableElement.setAttribute('role', 'button');
+      }
+    });
+  }
+
+  setupClickForwarding(addHandler);
+
+  return {
+    result: "click-forwarding initialized",
+    destroy: () => {
+      cleanup.handlers.forEach(({ element, event, handler, options }) => {
+        element.removeEventListener(event, handler, options);
+      });
+      cleanup.handlers.length = 0;
+    }
+  };
+}

package/autoInit/accessibility/functions/convert-to-span/README.md

@@ -0,0 +1,59 @@
+# **Convert to Span**
+
+## **Overview**
+
+Converts most HTML elements to span elements while preserving attributes and content. Useful for removing semantic meaning from decorative elements.
+
+---
+
+## **Required Elements**
+
+**Container**
+* data-hs-a11y="convert-span"
+
+---
+
+## **What It Does**
+
+1. Finds all `[data-hs-a11y="convert-span"]` containers
+2. Converts all descendant elements to `<span>` (except skip list)
+3. Converts container itself to `<span>`
+4. Preserves all attributes except `data-hs-a11y`
+
+**Skip List:** `span`, `a`, `button`, `input`, `textarea`, `select`, `img`, `video`, `audio`, `iframe`, `object`, `embed`, `canvas`, `svg`, `form`, `table`, semantic tags, headings, `script`, `style`
+
+---
+
+## **Usage Example**
+
+```html
+<!-- Before -->
+<div data-hs-a11y="convert-span">
+  <p>Text here</p>
+  <section>Content</section>
+</div>
+
+<!-- After -->
+<span>
+  <span>Text here</span>
+  <span>Content</span>
+</span>
+```
+
+**Result:** All elements become spans, removing semantic meaning.
+
+---
+
+## **Key Attributes**
+
+| Attribute | Purpose |
+| ----- | ----- |
+| `data-hs-a11y="convert-span"` | Container to convert |
+
+---
+
+## **Notes**
+
+* One-time DOM transformation
+* Skips interactive and media elements
+* Use for purely decorative wrappers

package/autoInit/accessibility/functions/convert-to-span/convert-to-span.js

@@ -0,0 +1,70 @@
+export function init() {
+  function setupConvertToSpan() {
+    const containers = document.querySelectorAll('[data-hs-a11y="convert-span"]');
+
+    containers.forEach(container => {
+      const skipTags = [
+        'span', 'a', 'button', 'input', 'textarea', 'select', 'img', 'video', 'audio',
+        'iframe', 'object', 'embed', 'canvas', 'svg', 'form', 'table', 'thead', 'tbody',
+        'tr', 'td', 'th', 'ul', 'ol', 'li', 'dl', 'dt', 'dd', 'h1', 'h2', 'h3', 'h4',
+        'h5', 'h6', 'script', 'style', 'link', 'meta', 'title', 'head', 'html', 'body'
+      ];
+
+      // Convert all child elements first
+      const elementsToConvert = container.querySelectorAll('*');
+
+      elementsToConvert.forEach(element => {
+        const tagName = element.tagName.toLowerCase();
+
+        if (!skipTags.includes(tagName)) {
+          const newSpan = document.createElement('span');
+
+          // Copy all attributes except data-hs-a11y
+          Array.from(element.attributes).forEach(attr => {
+            if (attr.name !== 'data-hs-a11y') {
+              newSpan.setAttribute(attr.name, attr.value);
+            }
+          });
+
+          // Move all child nodes
+          while (element.firstChild) {
+            newSpan.appendChild(element.firstChild);
+          }
+
+          // Replace the element
+          element.parentNode.replaceChild(newSpan, element);
+        }
+      });
+
+      // Convert the container itself to span
+      const containerTagName = container.tagName.toLowerCase();
+      if (!skipTags.includes(containerTagName)) {
+        const newSpan = document.createElement('span');
+
+        // Copy all attributes except data-hs-a11y
+        Array.from(container.attributes).forEach(attr => {
+          if (attr.name !== 'data-hs-a11y') {
+            newSpan.setAttribute(attr.name, attr.value);
+          }
+        });
+
+        // Move all child nodes
+        while (container.firstChild) {
+          newSpan.appendChild(container.firstChild);
+        }
+
+        // Replace the container
+        container.parentNode.replaceChild(newSpan, container);
+      }
+    });
+  }
+
+  setupConvertToSpan();
+
+  return {
+    result: "convert-to-span initialized",
+    destroy: () => {
+      // No cleanup needed - this is a one-time DOM operation
+    }
+  };
+}

package/autoInit/accessibility/functions/custom-values-replacement/README.md

@@ -0,0 +1,71 @@
+# **Custom Values Replacement**
+
+## **Overview**
+
+Collects custom name-value pairs from a list and replaces `{{name}}` placeholders throughout the page. Similar to site-settings but for user-defined values.
+
+---
+
+## **Required Elements**
+
+**Custom Values List**
+* data-hs-a11y="custom-values-list"
+
+**Name Element** *(within list descendants)*
+* data-hs-a11y="custom-values-name"
+
+**Value Element** *(within list descendants)*
+* data-hs-a11y="custom-values-value"
+
+---
+
+## **What It Does**
+
+1. Finds custom values list
+2. Collects name-value pairs from descendants
+3. Replaces `{{name}}` placeholders in all text nodes
+4. Replaces `{{name}}` placeholders in link hrefs
+
+---
+
+## **Usage Example**
+
+```html
+<div data-hs-a11y="custom-values-list" style="display: none;">
+  <div>
+    <span data-hs-a11y="custom-values-name">support-email</span>
+    <span data-hs-a11y="custom-values-value">help@example.com</span>
+  </div>
+  <div>
+    <span data-hs-a11y="custom-values-name">phone</span>
+    <span data-hs-a11y="custom-values-value">555-1234</span>
+  </div>
+</div>
+
+<p>Contact us at {{support-email}} or call {{phone}}</p>
+<a href="mailto:{{support-email}}">Email Us</a>
+```
+
+**Result:**
+```html
+<p>Contact us at help@example.com or call 555-1234</p>
+<a href="mailto:help@example.com">Email Us</a>
+```
+
+---
+
+## **Key Attributes**
+
+| Attribute | Purpose |
+| ----- | ----- |
+| `data-hs-a11y="custom-values-list"` | Container for values |
+| `data-hs-a11y="custom-values-name"` | Placeholder name |
+| `data-hs-a11y="custom-values-value"` | Replacement value |
+
+---
+
+## **Notes**
+
+* One-time text replacement
+* List should be hidden with CSS
+* No cleanup needed