aria-ease 6.0.1 → 6.2.0

package/dist/index.cjs

@@ -832,7 +832,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/accordion/src/makeAccordionAccessible/makeAccordionAccessible.ts
-function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allowMultipleOpen = false }) {
+function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allowMultipleOpen = false, callback }) {
   const accordionContainer = document.querySelector(`#${accordionId}`);
   if (!accordionContainer) {
     console.error(`[aria-ease] Element with id="${accordionId}" not found. Make sure the accordion container exists before calling makeAccordionAccessible.`);
@@ -883,6 +883,13 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
     const panel = panels[index];
     trigger.setAttribute("aria-expanded", "true");
     panel.style.display = "block";
+    if (callback?.onExpand) {
+      try {
+        callback.onExpand(index);
+      } catch (error) {
+        console.error("[aria-ease] Error in accordion onExpand callback:", error);
+      }
+    }
   }
   function collapseItem(index) {
     if (index < 0 || index >= triggers.length) {
@@ -893,6 +900,13 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
     const panel = panels[index];
     trigger.setAttribute("aria-expanded", "false");
     panel.style.display = "none";
+    if (callback?.onCollapse) {
+      try {
+        callback.onCollapse(index);
+      } catch (error) {
+        console.error("[aria-ease] Error in accordion onCollapse callback:", error);
+      }
+    }
   }
   function toggleItem(index) {
     const trigger = triggers[index];
@@ -979,13 +993,25 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
       collapseItem(index);
     });
   }
+  function refresh() {
+    removeListeners();
+    const newTriggers = Array.from(accordionContainer.querySelectorAll(`.${triggersClass}`));
+    const newPanels = Array.from(accordionContainer.querySelectorAll(`.${panelsClass}`));
+    triggers.length = 0;
+    triggers.push(...newTriggers);
+    panels.length = 0;
+    panels.push(...newPanels);
+    initialize();
+    addListeners();
+  }
   initialize();
   addListeners();
   return {
     expandItem,
     collapseItem,
     toggleItem,
-    cleanup
+    cleanup,
+    refresh
   };
 }
 
@@ -1027,7 +1053,7 @@ function hasSubmenu(menuItem) {
 function getSubmenuId(menuItem) {
   return menuItem.getAttribute("aria-controls");
 }
-function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, triggerButton, openSubmenu, closeSubmenu) {
+function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, triggerButton, openSubmenu, closeSubmenu, onOpenChange) {
   const currentEl = elementItems.item(elementItemIndex);
   switch (event.key) {
     case "ArrowUp":
@@ -1084,6 +1110,9 @@ function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, t
       if (menuElementDiv && triggerButton) {
         if (getComputedStyle(menuElementDiv).display === "block") {
           handleMenuClose(menuElementDiv, triggerButton);
+          if (onOpenChange) {
+            onOpenChange(false);
+          }
         }
         triggerButton.focus();
       }
@@ -1103,6 +1132,9 @@ function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, t
     case "Tab": {
       if (menuElementDiv && triggerButton && (!event.shiftKey || event.shiftKey)) {
         handleMenuClose(menuElementDiv, triggerButton);
+        if (onOpenChange) {
+          onOpenChange(false);
+        }
       }
       break;
     }
@@ -1288,7 +1320,7 @@ function makeCheckboxAccessible({ checkboxGroupId, checkboxesClass }) {
 }
 
 // src/menu/src/makeMenuAccessible/makeMenuAccessible.ts
-function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
+function makeMenuAccessible({ menuId, menuItemsClass, triggerId, callback }) {
   const menuDiv = document.querySelector(`#${menuId}`);
   if (!menuDiv) {
     console.error(`[aria-ease] Element with id="${menuId}" not found. Make sure the menu element exists before calling makeMenuAccessible.`);
@@ -1348,8 +1380,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
     const nodeListLike = {
       length: items.length,
       item: (index) => items[index],
-      forEach: (callback) => {
-        items.forEach(callback);
+      forEach: (callback2) => {
+        items.forEach(callback2);
       },
       [Symbol.iterator]: function* () {
         for (const item of items) {
@@ -1393,7 +1425,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
       submenuInstance = makeMenuAccessible({
         menuId: submenuId,
         menuItemsClass,
-        triggerId: submenuTrigger.id
+        triggerId: submenuTrigger.id,
+        callback
       });
       submenuInstances.set(submenuId, submenuInstance);
     }
@@ -1402,6 +1435,15 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
   function closeSubmenu() {
     closeMenu();
   }
+  function onOpenChange(isOpen) {
+    if (callback?.onOpenChange) {
+      try {
+        callback.onOpenChange(isOpen);
+      } catch (error) {
+        console.error("[aria-ease] Error in menu onOpenChange callback:", error);
+      }
+    }
+  }
   function addListeners() {
     const items = getFilteredItems();
     const nodeListLike = toNodeListLike(items);
@@ -1414,7 +1456,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
           menuDiv,
           triggerButton,
           openSubmenu,
-          closeSubmenu
+          closeSubmenu,
+          onOpenChange
         );
         menuItem.addEventListener("keydown", handler);
         handlerMap.set(menuItem, handler);
@@ -1439,12 +1482,26 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
     if (items && items.length > 0) {
       items[0].focus();
     }
+    if (callback?.onOpenChange) {
+      try {
+        callback.onOpenChange(true);
+      } catch (error) {
+        console.error("[aria-ease] Error in menu onOpenChange callback:", error);
+      }
+    }
   }
   function closeMenu() {
     setAria(false);
     menuDiv.style.display = "none";
     removeListeners();
     triggerButton.focus();
+    if (callback?.onOpenChange) {
+      try {
+        callback.onOpenChange(false);
+      } catch (error) {
+        console.error("[aria-ease] Error in menu onOpenChange callback:", error);
+      }
+    }
   }
   function intializeMenuItems() {
     const items = getItems();
@@ -1755,7 +1812,7 @@ function makeToggleAccessible({ toggleId, togglesClass, isSingleToggle = true })
 }
 
 // src/combobox/src/makeComboBoxAccessible/makeComboBoxAccessible.ts
-function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId, listBoxItemsClass, config }) {
+function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId, listBoxItemsClass, callback }) {
   const comboboxInput = document.getElementById(`${comboboxInputId}`);
   if (!comboboxInput) {
     console.error(`[aria-ease] Element with id="${comboboxInputId}" not found. Make sure the combobox input element exists before calling makeComboboxAccessible.`);
@@ -1802,11 +1859,11 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
       if (typeof activeItem.scrollIntoView === "function") {
         activeItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
       }
-      if (config?.onActiveDescendantChange) {
+      if (callback?.onActiveDescendantChange) {
         try {
-          config.onActiveDescendantChange(itemId, activeItem);
+          callback.onActiveDescendantChange(itemId, activeItem);
         } catch (error) {
-          console.error("[aria-ease] Error in onActiveDescendantChange callback:", error);
+          console.error("[aria-ease] Error in combobox onActiveDescendantChange callback:", error);
         }
       }
     } else {
@@ -1816,25 +1873,27 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
   }
   function openListbox() {
     comboboxInput.setAttribute("aria-expanded", "true");
-    if (config?.onOpenChange) {
+    listBox.style.display = "block";
+    if (callback?.onOpenChange) {
       try {
-        config.onOpenChange(true);
+        callback.onOpenChange(true);
       } catch (error) {
-        console.error("[aria-ease] Error in onOpenChange callback:", error);
+        console.error("[aria-ease] Error in combobox onOpenChange callback:", error);
       }
     }
   }
   function closeListbox() {
     comboboxInput.setAttribute("aria-expanded", "false");
     comboboxInput.setAttribute("aria-activedescendant", "");
+    listBox.style.display = "none";
     activeIndex = -1;
     const visibleItems = getVisibleItems();
     visibleItems.forEach((item) => item.setAttribute("aria-selected", "false"));
-    if (config?.onOpenChange) {
+    if (callback?.onOpenChange) {
       try {
-        config.onOpenChange(false);
+        callback.onOpenChange(false);
       } catch (error) {
-        console.error("[aria-ease] Error in onOpenChange callback:", error);
+        console.error("[aria-ease] Error in combobox onOpenChange callback:", error);
       }
     }
   }
@@ -1842,11 +1901,11 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
     const value = item.textContent?.trim() || "";
     comboboxInput.value = value;
     closeListbox();
-    if (config?.onSelect) {
+    if (callback?.onSelect) {
       try {
-        config.onSelect(item, value);
+        callback.onSelect(item);
       } catch (error) {
-        console.error("[aria-ease] Error in onSelect callback:", error);
+        console.error("[aria-ease] Error in combobox onSelect callback:", error);
       }
     }
   }
@@ -1887,11 +1946,11 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
         } else if (comboboxInput.value) {
           event.preventDefault();
           comboboxInput.value = "";
-          if (config?.onClear) {
+          if (callback?.onClear) {
             try {
-              config.onClear();
+              callback.onClear();
             } catch (error) {
-              console.error("[aria-ease] Error in onClear callback:", error);
+              console.error("[aria-ease] Error in combobox onClear callback:", error);
             }
           }
         }

package/dist/index.d.cts

@@ -28,21 +28,45 @@ interface AccessibilityInstance {
   getPressedIndices?: () => number[];
 }
 
+interface AccordionConfig {
+  accordionId: string;
+  triggersClass: string;
+  panelsClass: string;
+  allowMultipleOpen?: boolean;
+  callback?: AccordionCallback;
+}
+
+interface AccordionCallback {
+    onExpand?: (index: number) => void;
+    onCollapse?: (index: number) => void;
+}
+
 interface ComboboxConfig {
     comboboxInputId: string; 
     comboboxButtonId?: string; 
     listBoxId: string; 
     listBoxItemsClass: string;
-    config?: config;
+    callback?: ComboboxCallback;
 }
 
-interface config {
-    onSelect?: (item: HTMLElement, value: string) => void;
+interface ComboboxCallback {
+    onSelect?: (item: HTMLElement) => void;
     onOpenChange?: (isOpen: boolean) => void;
     onActiveDescendantChange?: (optionId: string, item: HTMLElement) => void;
     onClear?: () => void;
 }
 
+interface MenuConfig {
+    menuId: string; 
+    menuItemsClass: string; 
+    triggerId: string;
+    callback: MenuCallback;
+}
+
+interface MenuCallback {
+    onOpenChange?: (isOpen: boolean) => void;
+}
+
 /**
  * Makes an accordion accessible by managing ARIA attributes, keyboard navigation, and state.
  * Handles multiple accordion items with proper focus management and keyboard interactions.
@@ -50,15 +74,10 @@ interface config {
  * @param {string} triggersClass - The shared class of all accordion trigger buttons.
  * @param {string} panelsClass - The shared class of all accordion panels.
  * @param {boolean} allowMultipleOpen - Whether multiple panels can be open simultaneously (default: false).
+ * @param {AccordionCallback} callback - Configuration options for callbacks.
  */
 
-interface AccordionConfig {
-    accordionId: string;
-    triggersClass: string;
-    panelsClass: string;
-    allowMultipleOpen?: boolean;
-}
-declare function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allowMultipleOpen }: AccordionConfig): AccessibilityInstance;
+declare function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allowMultipleOpen, callback }: AccordionConfig): AccessibilityInstance;
 
 /**
  * Adds keyboard interaction to block. The block traps focus and can be interacted with using the keyboard.
@@ -92,11 +111,7 @@ declare function makeCheckboxAccessible({ checkboxGroupId, checkboxesClass }: Ch
   * @param {string} triggerId - The id of the button that triggers the menu.
 */
 
-declare function makeMenuAccessible({ menuId, menuItemsClass, triggerId }: {
-    menuId: string;
-    menuItemsClass: string;
-    triggerId: string;
-}): AccessibilityInstance;
+declare function makeMenuAccessible({ menuId, menuItemsClass, triggerId, callback }: MenuConfig): AccessibilityInstance;
 
 /**
  * Makes a radio group accessible by managing ARIA attributes, keyboard navigation, and state.
@@ -134,10 +149,10 @@ declare function makeToggleAccessible({ toggleId, togglesClass, isSingleToggle }
  * @param {string} comboboxButtonId - The id of the button that toggles the listbox (optional).
  * @param {string} listBoxId - The id of the listbox element.
  * @param {string} listBoxItemsClass - The class of the items within the listbox.
- * @param {ComboboxConfig} config - Configuration options for callbacks.
+ * @param {ComboboxCallback} callback - Configuration options for callbacks.
  */
 
-declare function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId, listBoxItemsClass, config }: ComboboxConfig): AccessibilityInstance;
+declare function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId, listBoxItemsClass, callback }: ComboboxConfig): AccessibilityInstance;
 
 /**
  * Runs static and interactions accessibility test on UI components.

package/dist/index.d.ts

@@ -28,21 +28,45 @@ interface AccessibilityInstance {
   getPressedIndices?: () => number[];
 }
 
+interface AccordionConfig {
+  accordionId: string;
+  triggersClass: string;
+  panelsClass: string;
+  allowMultipleOpen?: boolean;
+  callback?: AccordionCallback;
+}
+
+interface AccordionCallback {
+    onExpand?: (index: number) => void;
+    onCollapse?: (index: number) => void;
+}
+
 interface ComboboxConfig {
     comboboxInputId: string; 
     comboboxButtonId?: string; 
     listBoxId: string; 
     listBoxItemsClass: string;
-    config?: config;
+    callback?: ComboboxCallback;
 }
 
-interface config {
-    onSelect?: (item: HTMLElement, value: string) => void;
+interface ComboboxCallback {
+    onSelect?: (item: HTMLElement) => void;
     onOpenChange?: (isOpen: boolean) => void;
     onActiveDescendantChange?: (optionId: string, item: HTMLElement) => void;
     onClear?: () => void;
 }
 
+interface MenuConfig {
+    menuId: string; 
+    menuItemsClass: string; 
+    triggerId: string;
+    callback: MenuCallback;
+}
+
+interface MenuCallback {
+    onOpenChange?: (isOpen: boolean) => void;
+}
+
 /**
  * Makes an accordion accessible by managing ARIA attributes, keyboard navigation, and state.
  * Handles multiple accordion items with proper focus management and keyboard interactions.
@@ -50,15 +74,10 @@ interface config {
  * @param {string} triggersClass - The shared class of all accordion trigger buttons.
  * @param {string} panelsClass - The shared class of all accordion panels.
  * @param {boolean} allowMultipleOpen - Whether multiple panels can be open simultaneously (default: false).
+ * @param {AccordionCallback} callback - Configuration options for callbacks.
  */
 
-interface AccordionConfig {
-    accordionId: string;
-    triggersClass: string;
-    panelsClass: string;
-    allowMultipleOpen?: boolean;
-}
-declare function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allowMultipleOpen }: AccordionConfig): AccessibilityInstance;
+declare function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allowMultipleOpen, callback }: AccordionConfig): AccessibilityInstance;
 
 /**
  * Adds keyboard interaction to block. The block traps focus and can be interacted with using the keyboard.
@@ -92,11 +111,7 @@ declare function makeCheckboxAccessible({ checkboxGroupId, checkboxesClass }: Ch
   * @param {string} triggerId - The id of the button that triggers the menu.
 */
 
-declare function makeMenuAccessible({ menuId, menuItemsClass, triggerId }: {
-    menuId: string;
-    menuItemsClass: string;
-    triggerId: string;
-}): AccessibilityInstance;
+declare function makeMenuAccessible({ menuId, menuItemsClass, triggerId, callback }: MenuConfig): AccessibilityInstance;
 
 /**
  * Makes a radio group accessible by managing ARIA attributes, keyboard navigation, and state.
@@ -134,10 +149,10 @@ declare function makeToggleAccessible({ toggleId, togglesClass, isSingleToggle }
  * @param {string} comboboxButtonId - The id of the button that toggles the listbox (optional).
  * @param {string} listBoxId - The id of the listbox element.
  * @param {string} listBoxItemsClass - The class of the items within the listbox.
- * @param {ComboboxConfig} config - Configuration options for callbacks.
+ * @param {ComboboxCallback} callback - Configuration options for callbacks.
  */
 
-declare function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId, listBoxItemsClass, config }: ComboboxConfig): AccessibilityInstance;
+declare function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId, listBoxItemsClass, callback }: ComboboxConfig): AccessibilityInstance;
 
 /**
  * Runs static and interactions accessibility test on UI components.