accessible-kit 1.0.0

package/src/js/a11y-offcanvas.js

@@ -0,0 +1,298 @@
+/**
+ * Accessible Offcanvas Component
+ * Vanilla JS, a11y friendly, focus trap, keyboard navigation
+ * Follows WAI-ARIA Authoring Practices Guide for Dialog Pattern
+ */
+
+class AccessibleOffcanvas {
+    constructor(element, options = {}) {
+        this.container = element;
+        this.triggers = Array.from(
+            document.querySelectorAll(`[data-offcanvas-trigger="${element.id}"]`)
+        );
+        this.panel = element.querySelector("[data-offcanvas-panel]");
+        this.backdrop = element.querySelector("[data-offcanvas-backdrop]");
+        this.closeButtons = Array.from(
+            this.panel.querySelectorAll("[data-offcanvas-close]")
+        );
+
+        // Options
+        this.options = {
+            closeOnBackdrop: options.closeOnBackdrop !== false,
+            closeOnEscape: options.closeOnEscape !== false,
+            trapFocus: options.trapFocus !== false,
+            scrollLock: options.scrollLock !== false,
+            onOpen: options.onOpen || null,
+            onClose: options.onClose || null,
+        };
+
+        this.isOpen = false;
+        this.lastFocusedElement = null;
+        this.focusableElements = [];
+        this.firstFocusable = null;
+        this.lastFocusable = null;
+
+        this.init();
+    }
+
+    init() {
+        // Set up ARIA attributes
+        this.setupAria();
+
+        // Bind event listeners
+        this.triggers.forEach((trigger) => {
+            trigger.addEventListener("click", (e) => this.open(e));
+        });
+
+        this.closeButtons.forEach((button) => {
+            button.addEventListener("click", (e) => this.close(e));
+        });
+
+        // Backdrop click
+        if (this.backdrop && this.options.closeOnBackdrop) {
+            this.backdrop.addEventListener("click", (e) => this.close(e));
+        }
+
+        // Escape key
+        if (this.options.closeOnEscape) {
+            document.addEventListener("keydown", (e) => {
+                if (e.key === "Escape" && this.isOpen) {
+                    this.close(e);
+                }
+            });
+        }
+
+        // Focus trap
+        if (this.options.trapFocus) {
+            this.panel.addEventListener("keydown", (e) =>
+                this.handleFocusTrap(e)
+            );
+        }
+    }
+
+    setupAria() {
+        // Generate unique IDs if not present
+        if (!this.container.id) {
+            this.container.id = `offcanvas-${Math.random()
+                .toString(36)
+                .substr(2, 9)}`;
+        }
+        if (!this.panel.id) {
+            this.panel.id = `${this.container.id}-panel`;
+        }
+
+        // Panel ARIA attributes
+        this.panel.setAttribute("role", "dialog");
+        this.panel.setAttribute("aria-modal", "true");
+        this.panel.setAttribute("aria-hidden", "true");
+        this.panel.setAttribute("tabindex", "-1");
+
+        // Find title for aria-labelledby
+        const title = this.panel.querySelector("[data-offcanvas-title]");
+        if (title) {
+            if (!title.id) {
+                title.id = `${this.container.id}-title`;
+            }
+            this.panel.setAttribute("aria-labelledby", title.id);
+        }
+
+        // Backdrop ARIA
+        if (this.backdrop) {
+            this.backdrop.setAttribute("aria-hidden", "true");
+        }
+
+        // Trigger ARIA
+        this.triggers.forEach((trigger) => {
+            trigger.setAttribute("aria-controls", this.panel.id);
+            trigger.setAttribute("aria-expanded", "false");
+        });
+    }
+
+    open(e) {
+        if (e) {
+            e.preventDefault();
+            this.lastFocusedElement = e.target;
+        }
+
+        if (this.isOpen) return;
+
+        this.isOpen = true;
+        this.panel.setAttribute("aria-hidden", "false");
+        if (this.backdrop) {
+            this.backdrop.setAttribute("aria-hidden", "false");
+        }
+
+        this.triggers.forEach((trigger) => {
+            trigger.setAttribute("aria-expanded", "true");
+        });
+
+        // Scroll lock
+        if (this.options.scrollLock) {
+            document.body.classList.add("offcanvas-open");
+        }
+
+        // Update focusable elements
+        this.updateFocusableElements();
+
+        // Focus first element
+        setTimeout(() => {
+            if (this.firstFocusable) {
+                this.firstFocusable.focus();
+            } else {
+                this.panel.focus();
+            }
+        }, 100);
+
+        // Callback
+        if (this.options.onOpen) {
+            this.options.onOpen(this);
+        }
+    }
+
+    close(e) {
+        if (e) {
+            e.preventDefault();
+        }
+
+        if (!this.isOpen) return;
+
+        this.isOpen = false;
+        this.panel.setAttribute("aria-hidden", "true");
+        if (this.backdrop) {
+            this.backdrop.setAttribute("aria-hidden", "true");
+        }
+
+        this.triggers.forEach((trigger) => {
+            trigger.setAttribute("aria-expanded", "false");
+        });
+
+        // Scroll lock
+        if (this.options.scrollLock) {
+            document.body.classList.remove("offcanvas-open");
+        }
+
+        // Return focus to trigger
+        if (this.lastFocusedElement) {
+            this.lastFocusedElement.focus();
+        }
+
+        // Callback
+        if (this.options.onClose) {
+            this.options.onClose(this);
+        }
+    }
+
+    updateFocusableElements() {
+        // Find all focusable elements
+        const focusableSelectors = [
+            'a[href]',
+            'button:not([disabled])',
+            'textarea:not([disabled])',
+            'input:not([disabled])',
+            'select:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])',
+        ];
+
+        this.focusableElements = Array.from(
+            this.panel.querySelectorAll(focusableSelectors.join(","))
+        ).filter((el) => {
+            return (
+                el.offsetWidth > 0 ||
+                el.offsetHeight > 0 ||
+                el.getClientRects().length > 0
+            );
+        });
+
+        this.firstFocusable = this.focusableElements[0] || null;
+        this.lastFocusable =
+            this.focusableElements[this.focusableElements.length - 1] || null;
+    }
+
+    handleFocusTrap(e) {
+        if (!this.isOpen || e.key !== "Tab") return;
+
+        // If no focusable elements, prevent default
+        if (this.focusableElements.length === 0) {
+            e.preventDefault();
+            return;
+        }
+
+        // Shift + Tab (backward)
+        if (e.shiftKey) {
+            if (document.activeElement === this.firstFocusable) {
+                e.preventDefault();
+                this.lastFocusable.focus();
+            }
+        }
+        // Tab (forward)
+        else {
+            if (document.activeElement === this.lastFocusable) {
+                e.preventDefault();
+                this.firstFocusable.focus();
+            }
+        }
+    }
+
+    destroy() {
+        // Remove event listeners
+        this.triggers.forEach((trigger) => {
+            trigger.removeEventListener("click", this.open);
+        });
+
+        this.closeButtons.forEach((button) => {
+            button.removeEventListener("click", this.close);
+        });
+
+        if (this.backdrop) {
+            this.backdrop.removeEventListener("click", this.close);
+        }
+
+        // Remove scroll lock
+        if (this.options.scrollLock) {
+            document.body.classList.remove("offcanvas-open");
+        }
+
+        // Close if open
+        if (this.isOpen) {
+            this.close();
+        }
+    }
+}
+
+// Auto-initialize offcanvas
+function initOffcanvas() {
+    const offcanvasElements = document.querySelectorAll("[data-offcanvas]");
+    const instances = [];
+
+    offcanvasElements.forEach((element) => {
+        const options = {
+            closeOnBackdrop: element.dataset.closeOnBackdrop !== "false",
+            closeOnEscape: element.dataset.closeOnEscape !== "false",
+            trapFocus: element.dataset.trapFocus !== "false",
+            scrollLock: element.dataset.scrollLock !== "false",
+        };
+
+        instances.push(new AccessibleOffcanvas(element, options));
+    });
+
+    return instances;
+}
+
+// Initialize on DOM ready (only if not using module bundler)
+if (typeof window !== 'undefined' && !window.a11yKitManualInit) {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initOffcanvas);
+    } else {
+        initOffcanvas();
+    }
+}
+
+// Register in global namespace for CDN usage
+if (typeof window !== 'undefined') {
+    window.a11yKit = window.a11yKit || {};
+    window.a11yKit.Offcanvas = AccessibleOffcanvas;
+    window.a11yKit.initOffcanvas = initOffcanvas;
+}
+
+// ES6 exports with short aliases
+export { AccessibleOffcanvas, AccessibleOffcanvas as Offcanvas, initOffcanvas };

package/src/js/a11y-tabs.js

@@ -0,0 +1,336 @@
+/**
+ * Accessible Tabs Component
+ * Vanilla JS, a11y friendly, keyboard navigation support
+ * Follows WAI-ARIA Authoring Practices Guide for Tabs Pattern
+ */
+
+class AccessibleTabs {
+    constructor(element, options = {}) {
+        this.container = element;
+        this.tablist = element.querySelector("[data-tabs-list]");
+        this.tabs = Array.from(
+            this.tablist.querySelectorAll("[data-tabs-tab]")
+        );
+        this.panels = Array.from(
+            element.querySelectorAll("[data-tabs-panel]")
+        );
+
+        // Options
+        this.options = {
+            activeIndex: options.activeIndex || 0,
+            automatic: options.automatic !== false, // Automatic activation on arrow keys
+            orientation: options.orientation || "horizontal", // horizontal or vertical
+            onChange: options.onChange || null,
+            onTabClick: options.onTabClick || null,
+        };
+
+        this.currentIndex = this.options.activeIndex;
+
+        this.init();
+    }
+
+    init() {
+        // Set up ARIA attributes
+        this.setupAria();
+
+        // Activate initial tab
+        this.activateTab(this.currentIndex, false);
+
+        // Bind event listeners
+        this.tabs.forEach((tab, index) => {
+            tab.addEventListener("click", (e) => this.handleTabClick(e, index));
+            tab.addEventListener("keydown", (e) =>
+                this.handleTabKeydown(e, index)
+            );
+        });
+    }
+
+    setupAria() {
+        // Generate unique IDs if not present
+        const baseId = `tabs-${Math.random().toString(36).substr(2, 9)}`;
+
+        // Setup tablist
+        this.tablist.setAttribute("role", "tablist");
+        const orientation =
+            this.container.classList.contains("tabs--vertical")
+                ? "vertical"
+                : "horizontal";
+        this.tablist.setAttribute("aria-orientation", orientation);
+
+        // Setup tabs and panels
+        this.tabs.forEach((tab, index) => {
+            const panel = this.panels[index];
+
+            // Generate IDs
+            if (!tab.id) {
+                tab.id = `${baseId}-tab-${index}`;
+            }
+            if (!panel.id) {
+                panel.id = `${baseId}-panel-${index}`;
+            }
+
+            // Tab attributes
+            tab.setAttribute("role", "tab");
+            tab.setAttribute("aria-controls", panel.id);
+            tab.setAttribute("aria-selected", "false");
+            tab.setAttribute("tabindex", "-1");
+
+            // Check if tab is disabled
+            if (
+                tab.hasAttribute("disabled") ||
+                tab.hasAttribute("aria-disabled")
+            ) {
+                tab.setAttribute("aria-disabled", "true");
+            }
+
+            // Panel attributes
+            panel.setAttribute("role", "tabpanel");
+            panel.setAttribute("aria-labelledby", tab.id);
+            panel.setAttribute("tabindex", "0");
+            panel.setAttribute("aria-hidden", "true");
+        });
+    }
+
+    handleTabClick(e, index) {
+        e.preventDefault();
+
+        // Don't activate disabled tabs
+        if (this.isTabDisabled(index)) {
+            return;
+        }
+
+        this.activateTab(index);
+
+        if (this.options.onTabClick) {
+            this.options.onTabClick(this.tabs[index], index, this);
+        }
+    }
+
+    handleTabKeydown(e, index) {
+        const orientation = this.tablist.getAttribute("aria-orientation");
+        let targetIndex = null;
+
+        switch (e.key) {
+            case "ArrowLeft":
+                if (orientation === "horizontal") {
+                    e.preventDefault();
+                    targetIndex = this.getPreviousEnabledTabIndex(index);
+                }
+                break;
+
+            case "ArrowRight":
+                if (orientation === "horizontal") {
+                    e.preventDefault();
+                    targetIndex = this.getNextEnabledTabIndex(index);
+                }
+                break;
+
+            case "ArrowUp":
+                if (orientation === "vertical") {
+                    e.preventDefault();
+                    targetIndex = this.getPreviousEnabledTabIndex(index);
+                }
+                break;
+
+            case "ArrowDown":
+                if (orientation === "vertical") {
+                    e.preventDefault();
+                    targetIndex = this.getNextEnabledTabIndex(index);
+                }
+                break;
+
+            case "Home":
+                e.preventDefault();
+                targetIndex = this.getFirstEnabledTabIndex();
+                break;
+
+            case "End":
+                e.preventDefault();
+                targetIndex = this.getLastEnabledTabIndex();
+                break;
+
+            case "Enter":
+            case " ":
+                e.preventDefault();
+                if (!this.isTabDisabled(index)) {
+                    this.activateTab(index);
+                }
+                return;
+        }
+
+        // Move focus and optionally activate
+        if (targetIndex !== null) {
+            this.tabs[targetIndex].focus();
+
+            // Automatic activation
+            if (this.options.automatic && !this.isTabDisabled(targetIndex)) {
+                this.activateTab(targetIndex);
+            }
+        }
+    }
+
+    activateTab(index, focus = true) {
+        if (index < 0 || index >= this.tabs.length) {
+            return;
+        }
+
+        // Don't activate disabled tabs
+        if (this.isTabDisabled(index)) {
+            return;
+        }
+
+        const previousIndex = this.currentIndex;
+
+        // Function to update DOM
+        const updateDOM = () => {
+            // Deactivate all tabs and panels
+            this.tabs.forEach((tab, i) => {
+                const isActive = i === index;
+
+                tab.setAttribute("aria-selected", isActive ? "true" : "false");
+                tab.setAttribute("tabindex", isActive ? "0" : "-1");
+
+                this.panels[i].setAttribute("aria-hidden", isActive ? "false" : "true");
+            });
+
+            this.currentIndex = index;
+
+            // Focus the activated tab
+            if (focus) {
+                this.tabs[index].focus();
+            }
+
+            // Callback
+            if (this.options.onChange && previousIndex !== index) {
+                this.options.onChange(
+                    this.tabs[index],
+                    this.panels[index],
+                    index,
+                    this
+                );
+            }
+        };
+
+        // Use View Transitions API if available and animations are enabled
+        if (!this.container.hasAttribute('data-no-animation') &&
+            document.startViewTransition &&
+            !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            document.startViewTransition(() => updateDOM());
+        } else {
+            updateDOM();
+        }
+    }
+
+    isTabDisabled(index) {
+        const tab = this.tabs[index];
+        return (
+            tab.hasAttribute("disabled") ||
+            tab.getAttribute("aria-disabled") === "true"
+        );
+    }
+
+    getNextEnabledTabIndex(currentIndex) {
+        let nextIndex = currentIndex + 1;
+
+        // Loop to beginning
+        if (nextIndex >= this.tabs.length) {
+            nextIndex = 0;
+        }
+
+        // Skip disabled tabs
+        while (this.isTabDisabled(nextIndex) && nextIndex !== currentIndex) {
+            nextIndex++;
+            if (nextIndex >= this.tabs.length) {
+                nextIndex = 0;
+            }
+        }
+
+        return nextIndex;
+    }
+
+    getPreviousEnabledTabIndex(currentIndex) {
+        let prevIndex = currentIndex - 1;
+
+        // Loop to end
+        if (prevIndex < 0) {
+            prevIndex = this.tabs.length - 1;
+        }
+
+        // Skip disabled tabs
+        while (this.isTabDisabled(prevIndex) && prevIndex !== currentIndex) {
+            prevIndex--;
+            if (prevIndex < 0) {
+                prevIndex = this.tabs.length - 1;
+            }
+        }
+
+        return prevIndex;
+    }
+
+    getFirstEnabledTabIndex() {
+        for (let i = 0; i < this.tabs.length; i++) {
+            if (!this.isTabDisabled(i)) {
+                return i;
+            }
+        }
+        return 0;
+    }
+
+    getLastEnabledTabIndex() {
+        for (let i = this.tabs.length - 1; i >= 0; i--) {
+            if (!this.isTabDisabled(i)) {
+                return i;
+            }
+        }
+        return this.tabs.length - 1;
+    }
+
+    destroy() {
+        // Remove event listeners
+        this.tabs.forEach((tab, index) => {
+            tab.removeEventListener("click", (e) =>
+                this.handleTabClick(e, index)
+            );
+            tab.removeEventListener("keydown", (e) =>
+                this.handleTabKeydown(e, index)
+            );
+        });
+    }
+}
+
+// Auto-initialize tabs
+function initTabs() {
+    const tabsElements = document.querySelectorAll("[data-tabs]");
+    const instances = [];
+
+    tabsElements.forEach((element) => {
+        const options = {
+            activeIndex: parseInt(element.dataset.activeIndex) || 0,
+            automatic: element.dataset.automatic !== "false",
+            orientation: element.dataset.orientation || "horizontal",
+        };
+
+        instances.push(new AccessibleTabs(element, options));
+    });
+
+    return instances;
+}
+
+// Initialize on DOM ready (only if not using module bundler)
+if (typeof window !== 'undefined' && !window.a11yKitManualInit) {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initTabs);
+    } else {
+        initTabs();
+    }
+}
+
+// Register in global namespace for CDN usage
+if (typeof window !== 'undefined') {
+    window.a11yKit = window.a11yKit || {};
+    window.a11yKit.Tabs = AccessibleTabs;
+    window.a11yKit.initTabs = initTabs;
+}
+
+// ES6 exports with short aliases
+export { AccessibleTabs, AccessibleTabs as Tabs, initTabs };

package/src/js/index.js

@@ -0,0 +1,46 @@
+/**
+ * a11y-kit
+ * Lightweight, accessible UI component library with full ARIA support
+ *
+ * @version 1.0.0
+ * @license MIT
+ */
+
+// Export all components with both full and short aliases
+export { AccessibleDropdown, Dropdown, initDropdowns } from './a11y-dropdown.js';
+export { AccessibleTabs, Tabs, initTabs } from './a11y-tabs.js';
+export { AccessibleOffcanvas, Offcanvas, initOffcanvas } from './a11y-offcanvas.js';
+export { AccessibleModal, Modal, initModals } from './a11y-modal.js';
+export { AccessibleCollapse, Collapse, initCollapses, AccessibleAccordion, Accordion, initAccordions } from './a11y-accordion.js';
+
+/**
+ * Initialize all components at once
+ * Convenient helper for auto-initializing all a11y-kit components
+ */
+export function initAll() {
+    const instances = {
+        dropdowns: initDropdowns(),
+        tabs: initTabs(),
+        offcanvas: initOffcanvas(),
+        modals: initModals(),
+        collapses: initCollapses(),
+        accordions: initAccordions()
+    };
+
+    return instances;
+}
+
+// Auto-initialize on DOM ready if not using module bundler
+if (typeof window !== 'undefined' && !window.a11yKitManualInit) {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initAll);
+    } else {
+        initAll();
+    }
+}
+
+// Register in global namespace for CDN usage
+if (typeof window !== 'undefined') {
+    window.a11yKit = window.a11yKit || {};
+    window.a11yKit.initAll = initAll;
+}