aria-ease 6.2.2 → 6.3.0

package/dist/src/tabs/index.cjs

@@ -0,0 +1,265 @@
+'use strict';
+
+// src/tabs/src/makeTabsAccessible/makeTabsAccessible.ts
+function makeTabsAccessible({ tabListId, tabsClass, tabPanelsClass, orientation = "horizontal", activateOnFocus = true, callback }) {
+  const tabList = document.querySelector(`#${tabListId}`);
+  if (!tabList) {
+    console.error(`[aria-ease] Element with id="${tabListId}" not found. Make sure the tab list container exists before calling makeTabsAccessible.`);
+    return { cleanup: () => {
+    } };
+  }
+  const tabs = Array.from(tabList.querySelectorAll(`.${tabsClass}`));
+  if (tabs.length === 0) {
+    console.error(`[aria-ease] No elements with class="${tabsClass}" found. Make sure tab buttons exist before calling makeTabsAccessible.`);
+    return { cleanup: () => {
+    } };
+  }
+  const tabPanels = Array.from(document.querySelectorAll(`.${tabPanelsClass}`));
+  if (tabPanels.length === 0) {
+    console.error(`[aria-ease] No elements with class="${tabPanelsClass}" found. Make sure tab panels exist before calling makeTabsAccessible.`);
+    return { cleanup: () => {
+    } };
+  }
+  if (tabs.length !== tabPanels.length) {
+    console.error(`[aria-ease] Tab/panel mismatch: found ${tabs.length} tabs but ${tabPanels.length} panels.`);
+    return { cleanup: () => {
+    } };
+  }
+  const handlerMap = /* @__PURE__ */ new WeakMap();
+  const clickHandlerMap = /* @__PURE__ */ new WeakMap();
+  const contextMenuHandlerMap = /* @__PURE__ */ new WeakMap();
+  let activeTabIndex = 0;
+  function initialize() {
+    tabList.setAttribute("role", "tablist");
+    tabList.setAttribute("aria-orientation", orientation);
+    tabs.forEach((tab, index) => {
+      const panel = tabPanels[index];
+      if (!tab.id) {
+        tab.id = `${tabListId}-tab-${index}`;
+      }
+      if (!panel.id) {
+        panel.id = `${tabListId}-panel-${index}`;
+      }
+      tab.setAttribute("role", "tab");
+      tab.setAttribute("aria-controls", panel.id);
+      tab.setAttribute("aria-selected", "false");
+      tab.setAttribute("tabindex", "-1");
+      panel.setAttribute("role", "tabpanel");
+      panel.setAttribute("aria-labelledby", tab.id);
+      panel.hidden = true;
+      const hasFocusableContent = panel.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      if (!hasFocusableContent) {
+        panel.setAttribute("tabindex", "0");
+      }
+    });
+    activateTab(0, false);
+  }
+  function activateTab(index, shouldFocus = true) {
+    if (index < 0 || index >= tabs.length) {
+      console.error(`[aria-ease] Invalid tab index: ${index}`);
+      return;
+    }
+    const previousIndex = activeTabIndex;
+    tabs.forEach((tab, i) => {
+      const panel = tabPanels[i];
+      tab.setAttribute("aria-selected", "false");
+      tab.setAttribute("tabindex", "-1");
+      panel.hidden = true;
+    });
+    const activeTab = tabs[index];
+    const activePanel = tabPanels[index];
+    activeTab.setAttribute("aria-selected", "true");
+    activeTab.setAttribute("tabindex", "0");
+    activePanel.hidden = false;
+    if (shouldFocus) {
+      activeTab.focus();
+    }
+    activeTabIndex = index;
+    if (callback?.onTabChange && previousIndex !== index) {
+      try {
+        callback.onTabChange(index, previousIndex);
+      } catch (error) {
+        console.error("[aria-ease] Error in tabs onTabChange callback:", error);
+      }
+    }
+  }
+  function moveFocus(direction) {
+    const currentFocusedIndex = tabs.findIndex((tab) => tab === document.activeElement);
+    const currentIndex = currentFocusedIndex !== -1 ? currentFocusedIndex : activeTabIndex;
+    let newIndex = currentIndex;
+    switch (direction) {
+      case "first":
+        newIndex = 0;
+        break;
+      case "last":
+        newIndex = tabs.length - 1;
+        break;
+      case "next":
+        newIndex = (currentIndex + 1) % tabs.length;
+        break;
+      case "prev":
+        newIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+        break;
+    }
+    tabs[newIndex].focus();
+    tabs[newIndex].setAttribute("tabindex", "0");
+    tabs[activeTabIndex].setAttribute("tabindex", "-1");
+    if (activateOnFocus) {
+      activateTab(newIndex, false);
+    } else {
+      const currentActive = activeTabIndex;
+      tabs.forEach((tab, i) => {
+        if (i === newIndex) {
+          tab.setAttribute("tabindex", "0");
+        } else if (i !== currentActive) {
+          tab.setAttribute("tabindex", "-1");
+        }
+      });
+    }
+  }
+  function handleTabClick(index) {
+    return () => {
+      activateTab(index);
+    };
+  }
+  function handleTabKeydown(index) {
+    return (event) => {
+      const { key } = event;
+      let handled = false;
+      if (orientation === "horizontal") {
+        switch (key) {
+          case "ArrowLeft":
+            event.preventDefault();
+            moveFocus("prev");
+            handled = true;
+            break;
+          case "ArrowRight":
+            event.preventDefault();
+            moveFocus("next");
+            handled = true;
+            break;
+        }
+      } else {
+        switch (key) {
+          case "ArrowUp":
+            event.preventDefault();
+            moveFocus("prev");
+            handled = true;
+            break;
+          case "ArrowDown":
+            event.preventDefault();
+            moveFocus("next");
+            handled = true;
+            break;
+        }
+      }
+      if (!handled) {
+        switch (key) {
+          case "Home":
+            event.preventDefault();
+            moveFocus("first");
+            break;
+          case "End":
+            event.preventDefault();
+            moveFocus("last");
+            break;
+          case " ":
+          case "Enter":
+            if (!activateOnFocus) {
+              event.preventDefault();
+              activateTab(index);
+            }
+            break;
+          case "F10":
+            if (event.shiftKey && callback?.onContextMenu) {
+              event.preventDefault();
+              try {
+                callback.onContextMenu(index, tabs[index]);
+              } catch (error) {
+                console.error("[aria-ease] Error in tabs onContextMenu callback:", error);
+              }
+            }
+            break;
+        }
+      }
+    };
+  }
+  function handleTabContextMenu(index) {
+    return (event) => {
+      if (callback?.onContextMenu) {
+        event.preventDefault();
+        try {
+          callback.onContextMenu(index, tabs[index]);
+        } catch (error) {
+          console.error("[aria-ease] Error in tabs onContextMenu callback:", error);
+        }
+      }
+    };
+  }
+  function addListeners() {
+    tabs.forEach((tab, index) => {
+      const clickHandler = handleTabClick(index);
+      const keydownHandler = handleTabKeydown(index);
+      const contextMenuHandler = handleTabContextMenu(index);
+      tab.addEventListener("click", clickHandler);
+      tab.addEventListener("keydown", keydownHandler);
+      if (callback?.onContextMenu) {
+        tab.addEventListener("contextmenu", contextMenuHandler);
+        contextMenuHandlerMap.set(tab, contextMenuHandler);
+      }
+      handlerMap.set(tab, keydownHandler);
+      clickHandlerMap.set(tab, clickHandler);
+    });
+  }
+  function removeListeners() {
+    tabs.forEach((tab) => {
+      const keydownHandler = handlerMap.get(tab);
+      const clickHandler = clickHandlerMap.get(tab);
+      const contextMenuHandler = contextMenuHandlerMap.get(tab);
+      if (keydownHandler) {
+        tab.removeEventListener("keydown", keydownHandler);
+        handlerMap.delete(tab);
+      }
+      if (clickHandler) {
+        tab.removeEventListener("click", clickHandler);
+        clickHandlerMap.delete(tab);
+      }
+      if (contextMenuHandler) {
+        tab.removeEventListener("contextmenu", contextMenuHandler);
+        contextMenuHandlerMap.delete(tab);
+      }
+    });
+  }
+  function cleanup() {
+    removeListeners();
+    tabs.forEach((tab, index) => {
+      const panel = tabPanels[index];
+      tab.removeAttribute("role");
+      tab.removeAttribute("aria-selected");
+      tab.removeAttribute("aria-controls");
+      tab.removeAttribute("tabindex");
+      panel.removeAttribute("role");
+      panel.removeAttribute("aria-labelledby");
+      panel.removeAttribute("tabindex");
+      panel.hidden = false;
+    });
+    tabList.removeAttribute("role");
+    tabList.removeAttribute("aria-orientation");
+  }
+  function refresh() {
+    removeListeners();
+    const newTabs = Array.from(tabList.querySelectorAll(`.${tabsClass}`));
+    const newPanels = Array.from(document.querySelectorAll(`.${tabPanelsClass}`));
+    tabs.length = 0;
+    tabs.push(...newTabs);
+    tabPanels.length = 0;
+    tabPanels.push(...newPanels);
+    initialize();
+    addListeners();
+  }
+  initialize();
+  addListeners();
+  return { activateTab, cleanup, refresh };
+}
+
+exports.makeTabsAccessible = makeTabsAccessible;

package/dist/src/tabs/index.d.cts

@@ -0,0 +1,16 @@
+import { T as TabsConfig, a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.cjs';
+
+/**
+ * Makes tabs accessible by managing ARIA attributes, keyboard interaction, and state.
+ * Implements WAI-ARIA tabs pattern with full keyboard support and ARIA properties.
+ * @param {string} tabListId - The id of the tab list container.
+ * @param {string} tabsClass - The shared class of all tab buttons.
+ * @param {string} tabPanelsClass - The shared class of all tab panels.
+ * @param {('horizontal' | 'vertical')} orientation - Tab list orientation (default: 'horizontal').
+ * @param {boolean} activateOnFocus - Whether tabs activate automatically on focus (default: true).
+ * @param {TabsCallback} callback - Configuration options for callbacks.
+ */
+
+declare function makeTabsAccessible({ tabListId, tabsClass, tabPanelsClass, orientation, activateOnFocus, callback }: TabsConfig): AccessibilityInstance;
+
+export { makeTabsAccessible };

package/dist/src/tabs/index.d.ts

@@ -0,0 +1,16 @@
+import { T as TabsConfig, a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.js';
+
+/**
+ * Makes tabs accessible by managing ARIA attributes, keyboard interaction, and state.
+ * Implements WAI-ARIA tabs pattern with full keyboard support and ARIA properties.
+ * @param {string} tabListId - The id of the tab list container.
+ * @param {string} tabsClass - The shared class of all tab buttons.
+ * @param {string} tabPanelsClass - The shared class of all tab panels.
+ * @param {('horizontal' | 'vertical')} orientation - Tab list orientation (default: 'horizontal').
+ * @param {boolean} activateOnFocus - Whether tabs activate automatically on focus (default: true).
+ * @param {TabsCallback} callback - Configuration options for callbacks.
+ */
+
+declare function makeTabsAccessible({ tabListId, tabsClass, tabPanelsClass, orientation, activateOnFocus, callback }: TabsConfig): AccessibilityInstance;
+
+export { makeTabsAccessible };

package/dist/src/tabs/index.js

@@ -0,0 +1,263 @@
+// src/tabs/src/makeTabsAccessible/makeTabsAccessible.ts
+function makeTabsAccessible({ tabListId, tabsClass, tabPanelsClass, orientation = "horizontal", activateOnFocus = true, callback }) {
+  const tabList = document.querySelector(`#${tabListId}`);
+  if (!tabList) {
+    console.error(`[aria-ease] Element with id="${tabListId}" not found. Make sure the tab list container exists before calling makeTabsAccessible.`);
+    return { cleanup: () => {
+    } };
+  }
+  const tabs = Array.from(tabList.querySelectorAll(`.${tabsClass}`));
+  if (tabs.length === 0) {
+    console.error(`[aria-ease] No elements with class="${tabsClass}" found. Make sure tab buttons exist before calling makeTabsAccessible.`);
+    return { cleanup: () => {
+    } };
+  }
+  const tabPanels = Array.from(document.querySelectorAll(`.${tabPanelsClass}`));
+  if (tabPanels.length === 0) {
+    console.error(`[aria-ease] No elements with class="${tabPanelsClass}" found. Make sure tab panels exist before calling makeTabsAccessible.`);
+    return { cleanup: () => {
+    } };
+  }
+  if (tabs.length !== tabPanels.length) {
+    console.error(`[aria-ease] Tab/panel mismatch: found ${tabs.length} tabs but ${tabPanels.length} panels.`);
+    return { cleanup: () => {
+    } };
+  }
+  const handlerMap = /* @__PURE__ */ new WeakMap();
+  const clickHandlerMap = /* @__PURE__ */ new WeakMap();
+  const contextMenuHandlerMap = /* @__PURE__ */ new WeakMap();
+  let activeTabIndex = 0;
+  function initialize() {
+    tabList.setAttribute("role", "tablist");
+    tabList.setAttribute("aria-orientation", orientation);
+    tabs.forEach((tab, index) => {
+      const panel = tabPanels[index];
+      if (!tab.id) {
+        tab.id = `${tabListId}-tab-${index}`;
+      }
+      if (!panel.id) {
+        panel.id = `${tabListId}-panel-${index}`;
+      }
+      tab.setAttribute("role", "tab");
+      tab.setAttribute("aria-controls", panel.id);
+      tab.setAttribute("aria-selected", "false");
+      tab.setAttribute("tabindex", "-1");
+      panel.setAttribute("role", "tabpanel");
+      panel.setAttribute("aria-labelledby", tab.id);
+      panel.hidden = true;
+      const hasFocusableContent = panel.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      if (!hasFocusableContent) {
+        panel.setAttribute("tabindex", "0");
+      }
+    });
+    activateTab(0, false);
+  }
+  function activateTab(index, shouldFocus = true) {
+    if (index < 0 || index >= tabs.length) {
+      console.error(`[aria-ease] Invalid tab index: ${index}`);
+      return;
+    }
+    const previousIndex = activeTabIndex;
+    tabs.forEach((tab, i) => {
+      const panel = tabPanels[i];
+      tab.setAttribute("aria-selected", "false");
+      tab.setAttribute("tabindex", "-1");
+      panel.hidden = true;
+    });
+    const activeTab = tabs[index];
+    const activePanel = tabPanels[index];
+    activeTab.setAttribute("aria-selected", "true");
+    activeTab.setAttribute("tabindex", "0");
+    activePanel.hidden = false;
+    if (shouldFocus) {
+      activeTab.focus();
+    }
+    activeTabIndex = index;
+    if (callback?.onTabChange && previousIndex !== index) {
+      try {
+        callback.onTabChange(index, previousIndex);
+      } catch (error) {
+        console.error("[aria-ease] Error in tabs onTabChange callback:", error);
+      }
+    }
+  }
+  function moveFocus(direction) {
+    const currentFocusedIndex = tabs.findIndex((tab) => tab === document.activeElement);
+    const currentIndex = currentFocusedIndex !== -1 ? currentFocusedIndex : activeTabIndex;
+    let newIndex = currentIndex;
+    switch (direction) {
+      case "first":
+        newIndex = 0;
+        break;
+      case "last":
+        newIndex = tabs.length - 1;
+        break;
+      case "next":
+        newIndex = (currentIndex + 1) % tabs.length;
+        break;
+      case "prev":
+        newIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+        break;
+    }
+    tabs[newIndex].focus();
+    tabs[newIndex].setAttribute("tabindex", "0");
+    tabs[activeTabIndex].setAttribute("tabindex", "-1");
+    if (activateOnFocus) {
+      activateTab(newIndex, false);
+    } else {
+      const currentActive = activeTabIndex;
+      tabs.forEach((tab, i) => {
+        if (i === newIndex) {
+          tab.setAttribute("tabindex", "0");
+        } else if (i !== currentActive) {
+          tab.setAttribute("tabindex", "-1");
+        }
+      });
+    }
+  }
+  function handleTabClick(index) {
+    return () => {
+      activateTab(index);
+    };
+  }
+  function handleTabKeydown(index) {
+    return (event) => {
+      const { key } = event;
+      let handled = false;
+      if (orientation === "horizontal") {
+        switch (key) {
+          case "ArrowLeft":
+            event.preventDefault();
+            moveFocus("prev");
+            handled = true;
+            break;
+          case "ArrowRight":
+            event.preventDefault();
+            moveFocus("next");
+            handled = true;
+            break;
+        }
+      } else {
+        switch (key) {
+          case "ArrowUp":
+            event.preventDefault();
+            moveFocus("prev");
+            handled = true;
+            break;
+          case "ArrowDown":
+            event.preventDefault();
+            moveFocus("next");
+            handled = true;
+            break;
+        }
+      }
+      if (!handled) {
+        switch (key) {
+          case "Home":
+            event.preventDefault();
+            moveFocus("first");
+            break;
+          case "End":
+            event.preventDefault();
+            moveFocus("last");
+            break;
+          case " ":
+          case "Enter":
+            if (!activateOnFocus) {
+              event.preventDefault();
+              activateTab(index);
+            }
+            break;
+          case "F10":
+            if (event.shiftKey && callback?.onContextMenu) {
+              event.preventDefault();
+              try {
+                callback.onContextMenu(index, tabs[index]);
+              } catch (error) {
+                console.error("[aria-ease] Error in tabs onContextMenu callback:", error);
+              }
+            }
+            break;
+        }
+      }
+    };
+  }
+  function handleTabContextMenu(index) {
+    return (event) => {
+      if (callback?.onContextMenu) {
+        event.preventDefault();
+        try {
+          callback.onContextMenu(index, tabs[index]);
+        } catch (error) {
+          console.error("[aria-ease] Error in tabs onContextMenu callback:", error);
+        }
+      }
+    };
+  }
+  function addListeners() {
+    tabs.forEach((tab, index) => {
+      const clickHandler = handleTabClick(index);
+      const keydownHandler = handleTabKeydown(index);
+      const contextMenuHandler = handleTabContextMenu(index);
+      tab.addEventListener("click", clickHandler);
+      tab.addEventListener("keydown", keydownHandler);
+      if (callback?.onContextMenu) {
+        tab.addEventListener("contextmenu", contextMenuHandler);
+        contextMenuHandlerMap.set(tab, contextMenuHandler);
+      }
+      handlerMap.set(tab, keydownHandler);
+      clickHandlerMap.set(tab, clickHandler);
+    });
+  }
+  function removeListeners() {
+    tabs.forEach((tab) => {
+      const keydownHandler = handlerMap.get(tab);
+      const clickHandler = clickHandlerMap.get(tab);
+      const contextMenuHandler = contextMenuHandlerMap.get(tab);
+      if (keydownHandler) {
+        tab.removeEventListener("keydown", keydownHandler);
+        handlerMap.delete(tab);
+      }
+      if (clickHandler) {
+        tab.removeEventListener("click", clickHandler);
+        clickHandlerMap.delete(tab);
+      }
+      if (contextMenuHandler) {
+        tab.removeEventListener("contextmenu", contextMenuHandler);
+        contextMenuHandlerMap.delete(tab);
+      }
+    });
+  }
+  function cleanup() {
+    removeListeners();
+    tabs.forEach((tab, index) => {
+      const panel = tabPanels[index];
+      tab.removeAttribute("role");
+      tab.removeAttribute("aria-selected");
+      tab.removeAttribute("aria-controls");
+      tab.removeAttribute("tabindex");
+      panel.removeAttribute("role");
+      panel.removeAttribute("aria-labelledby");
+      panel.removeAttribute("tabindex");
+      panel.hidden = false;
+    });
+    tabList.removeAttribute("role");
+    tabList.removeAttribute("aria-orientation");
+  }
+  function refresh() {
+    removeListeners();
+    const newTabs = Array.from(tabList.querySelectorAll(`.${tabsClass}`));
+    const newPanels = Array.from(document.querySelectorAll(`.${tabPanelsClass}`));
+    tabs.length = 0;
+    tabs.push(...newTabs);
+    tabPanels.length = 0;
+    tabPanels.push(...newPanels);
+    initialize();
+    addListeners();
+  }
+  initialize();
+  addListeners();
+  return { activateTab, cleanup, refresh };
+}
+
+export { makeTabsAccessible };

package/dist/src/toggle/index.cjs

@@ -69,34 +69,6 @@ function makeToggleAccessible({ toggleId, togglesClass, isSingleToggle = true })
           event.preventDefault();
           toggleButton(index);
           break;
-        case "ArrowDown":
-        case "ArrowRight":
-          if (!isSingleToggle && toggles.length > 1) {
-            event.preventDefault();
-            const nextIndex = (index + 1) % toggles.length;
-            toggles[nextIndex].focus();
-          }
-          break;
-        case "ArrowUp":
-        case "ArrowLeft":
-          if (!isSingleToggle && toggles.length > 1) {
-            event.preventDefault();
-            const prevIndex = (index - 1 + toggles.length) % toggles.length;
-            toggles[prevIndex].focus();
-          }
-          break;
-        case "Home":
-          if (!isSingleToggle && toggles.length > 1) {
-            event.preventDefault();
-            toggles[0].focus();
-          }
-          break;
-        case "End":
-          if (!isSingleToggle && toggles.length > 1) {
-            event.preventDefault();
-            toggles[toggles.length - 1].focus();
-          }
-          break;
       }
     };
   }

package/dist/src/toggle/index.d.cts

@@ -1,4 +1,4 @@
-import { a as AccessibilityInstance } from '../Types.d-CRjhbrcw.cjs';
+import { a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.cjs';
 
 /**
  * Makes a toggle button accessible by managing ARIA attributes and keyboard interactions.

package/dist/src/toggle/index.d.ts

@@ -1,4 +1,4 @@
-import { a as AccessibilityInstance } from '../Types.d-CRjhbrcw.js';
+import { a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.js';
 
 /**
  * Makes a toggle button accessible by managing ARIA attributes and keyboard interactions.

package/dist/src/toggle/index.js

@@ -67,34 +67,6 @@ function makeToggleAccessible({ toggleId, togglesClass, isSingleToggle = true })
           event.preventDefault();
           toggleButton(index);
           break;
-        case "ArrowDown":
-        case "ArrowRight":
-          if (!isSingleToggle && toggles.length > 1) {
-            event.preventDefault();
-            const nextIndex = (index + 1) % toggles.length;
-            toggles[nextIndex].focus();
-          }
-          break;
-        case "ArrowUp":
-        case "ArrowLeft":
-          if (!isSingleToggle && toggles.length > 1) {
-            event.preventDefault();
-            const prevIndex = (index - 1 + toggles.length) % toggles.length;
-            toggles[prevIndex].focus();
-          }
-          break;
-        case "Home":
-          if (!isSingleToggle && toggles.length > 1) {
-            event.preventDefault();
-            toggles[0].focus();
-          }
-          break;
-        case "End":
-          if (!isSingleToggle && toggles.length > 1) {
-            event.preventDefault();
-            toggles[toggles.length - 1].focus();
-          }
-          break;
       }
     };
   }

package/dist/src/utils/test/{chunk-7RMRFSJL.js → chunk-XLG3MIPQ.js}

@@ -13,6 +13,10 @@ var contract_default = {
   accordion: {
     path: "./contracts/AccordionContract.json",
     component: "accordion"
+  },
+  tabs: {
+    path: "./contracts/TabsContract.json",
+    component: "tabs"
   }
 };
 
@@ -127,7 +131,7 @@ ${"\u2500".repeat(60)}`);
     this.log(`\u{1F4A1} Optional Enhancements (${suggestions.length}):
 `);
     this.log(`These features are optional per APG guidelines but recommended`);
-    this.log(`for improved user experience and keyboard navigation:
+    this.log(`for improved user experience and keyboard interaction:
 `);
     suggestions.forEach((test, index) => {
       this.log(`${index + 1}. ${test.description}`);