aria-ease 6.0.0 → 6.1.0

package/bin/cli.cjs

@@ -676,7 +676,6 @@ async function runContractTestsPlaywright(componentName, url) {
   const passes = [];
   const skipped = [];
   let page = null;
-  const useNavigation = !!url;
   try {
     page = await createTestPage();
     if (url) {
@@ -690,8 +689,7 @@ async function runContractTestsPlaywright(componentName, url) {
     if (!mainSelector) {
       throw new Error(`No main selector (trigger, input, or container) found in contract for ${componentName}`);
     }
-    const elementTimeout = useNavigation ? 3e4 : 5e3;
-    await page.locator(mainSelector).first().waitFor({ state: "attached", timeout: elementTimeout });
+    await page.locator(mainSelector).first().waitFor({ state: "attached", timeout: 3e4 });
     if (componentName === "menu" && componentContract.selectors.trigger) {
       await page.locator(componentContract.selectors.trigger).first().waitFor({
         state: "visible",
@@ -802,15 +800,13 @@ async function runContractTestsPlaywright(componentName, url) {
             menuClosed = await (0, test_exports.expect)(popupElement).toBeHidden({ timeout: 2e3 }).then(() => true).catch(() => false);
           }
           if (!menuClosed) {
-            if (useNavigation) {
-              throw new Error(
-                `\u274C FATAL: Cannot close menu between tests. Menu remains visible after trying:
+            throw new Error(
+              `\u274C FATAL: Cannot close menu between tests. Menu remains visible after trying:
   1. Escape key
   2. Clicking trigger
   3. Clicking outside
 This indicates a problem with the menu component's close functionality.`
-              );
-            }
+            );
           }
           if (componentContract.selectors.input) {
             await page.locator(componentContract.selectors.input).first().clear();
@@ -821,6 +817,23 @@ This indicates a problem with the menu component's close functionality.`
           }
         }
       }
+      if (componentContract.selectors.panel && componentContract.selectors.trigger && !componentContract.selectors.popup) {
+        const triggerSelector = componentContract.selectors.trigger;
+        const panelSelector = componentContract.selectors.panel;
+        if (triggerSelector && panelSelector) {
+          const allTriggers = await page.locator(triggerSelector).all();
+          for (const trigger of allTriggers) {
+            const isExpanded = await trigger.getAttribute("aria-expanded") === "true";
+            const triggerPanel = await trigger.getAttribute("aria-controls");
+            if (isExpanded && triggerPanel) {
+              await trigger.click();
+              const panel = page.locator(`#${triggerPanel}`);
+              await (0, test_exports.expect)(panel).toBeHidden({ timeout: 1e3 }).catch(() => {
+              });
+            }
+          }
+        }
+      }
       let shouldSkipTest = false;
       for (const act of action) {
         if (act.type === "keypress" && (act.target === "submenuTrigger" || act.target === "submenu")) {

package/bin/cli.js

@@ -204,7 +204,7 @@ program.command("audit").description("Run axe-core powered accessibility audit o
   console.log(chalk.green("\n\u{1F389} All audits completed."));
 });
 program.command("test").description("Run core a11y accessibility standard tests on UI components").action(async () => {
-  const { runTest } = await import("./test-X6K2LCMO.js");
+  const { runTest } = await import("./test-HH2EW2NM.js");
   runTest();
 });
 program.command("help").description("Display help information").action(() => {

package/bin/{contractTestRunnerPlaywright-PMSOP5FY.js → contractTestRunnerPlaywright-HL2VPEEV.js}

@@ -36,7 +36,6 @@ async function runContractTestsPlaywright(componentName, url) {
   const passes = [];
   const skipped = [];
   let page = null;
-  const useNavigation = !!url;
   try {
     page = await createTestPage();
     if (url) {
@@ -50,8 +49,7 @@ async function runContractTestsPlaywright(componentName, url) {
     if (!mainSelector) {
       throw new Error(`No main selector (trigger, input, or container) found in contract for ${componentName}`);
     }
-    const elementTimeout = useNavigation ? 3e4 : 5e3;
-    await page.locator(mainSelector).first().waitFor({ state: "attached", timeout: elementTimeout });
+    await page.locator(mainSelector).first().waitFor({ state: "attached", timeout: 3e4 });
     if (componentName === "menu" && componentContract.selectors.trigger) {
       await page.locator(componentContract.selectors.trigger).first().waitFor({
         state: "visible",
@@ -162,15 +160,13 @@ async function runContractTestsPlaywright(componentName, url) {
             menuClosed = await (0, test_exports.expect)(popupElement).toBeHidden({ timeout: 2e3 }).then(() => true).catch(() => false);
           }
           if (!menuClosed) {
-            if (useNavigation) {
-              throw new Error(
-                `\u274C FATAL: Cannot close menu between tests. Menu remains visible after trying:
+            throw new Error(
+              `\u274C FATAL: Cannot close menu between tests. Menu remains visible after trying:
   1. Escape key
   2. Clicking trigger
   3. Clicking outside
 This indicates a problem with the menu component's close functionality.`
-              );
-            }
+            );
           }
           if (componentContract.selectors.input) {
             await page.locator(componentContract.selectors.input).first().clear();
@@ -181,6 +177,23 @@ This indicates a problem with the menu component's close functionality.`
           }
         }
       }
+      if (componentContract.selectors.panel && componentContract.selectors.trigger && !componentContract.selectors.popup) {
+        const triggerSelector = componentContract.selectors.trigger;
+        const panelSelector = componentContract.selectors.panel;
+        if (triggerSelector && panelSelector) {
+          const allTriggers = await page.locator(triggerSelector).all();
+          for (const trigger of allTriggers) {
+            const isExpanded = await trigger.getAttribute("aria-expanded") === "true";
+            const triggerPanel = await trigger.getAttribute("aria-controls");
+            if (isExpanded && triggerPanel) {
+              await trigger.click();
+              const panel = page.locator(`#${triggerPanel}`);
+              await (0, test_exports.expect)(panel).toBeHidden({ timeout: 1e3 }).catch(() => {
+              });
+            }
+          }
+        }
+      }
       let shouldSkipTest = false;
       for (const act of action) {
         if (act.type === "keypress" && (act.target === "submenuTrigger" || act.target === "submenu")) {

package/bin/{test-X6K2LCMO.js → test-HH2EW2NM.js}

@@ -114,7 +114,7 @@ Error: ${error instanceof Error ? error.message : String(error)}`
       const devServerUrl = await checkDevServer(url);
       if (devServerUrl) {
         console.log(`\u{1F3AD} Running Playwright tests on ${devServerUrl}`);
-        const { runContractTestsPlaywright } = await import("./contractTestRunnerPlaywright-PMSOP5FY.js");
+        const { runContractTestsPlaywright } = await import("./contractTestRunnerPlaywright-HL2VPEEV.js");
         contract = await runContractTestsPlaywright(componentName, devServerUrl);
       } else {
         throw new Error(

package/dist/{contractTestRunnerPlaywright-ZO6GM4TU.js → contractTestRunnerPlaywright-EXEBWWPC.js}

@@ -34,7 +34,6 @@ async function runContractTestsPlaywright(componentName, url) {
   const passes = [];
   const skipped = [];
   let page = null;
-  const useNavigation = !!url;
   try {
     page = await createTestPage();
     if (url) {
@@ -48,8 +47,7 @@ async function runContractTestsPlaywright(componentName, url) {
     if (!mainSelector) {
       throw new Error(`No main selector (trigger, input, or container) found in contract for ${componentName}`);
     }
-    const elementTimeout = useNavigation ? 3e4 : 5e3;
-    await page.locator(mainSelector).first().waitFor({ state: "attached", timeout: elementTimeout });
+    await page.locator(mainSelector).first().waitFor({ state: "attached", timeout: 3e4 });
     if (componentName === "menu" && componentContract.selectors.trigger) {
       await page.locator(componentContract.selectors.trigger).first().waitFor({
         state: "visible",
@@ -160,15 +158,13 @@ async function runContractTestsPlaywright(componentName, url) {
             menuClosed = await (0, test_exports.expect)(popupElement).toBeHidden({ timeout: 2e3 }).then(() => true).catch(() => false);
           }
           if (!menuClosed) {
-            if (useNavigation) {
-              throw new Error(
-                `\u274C FATAL: Cannot close menu between tests. Menu remains visible after trying:
+            throw new Error(
+              `\u274C FATAL: Cannot close menu between tests. Menu remains visible after trying:
   1. Escape key
   2. Clicking trigger
   3. Clicking outside
 This indicates a problem with the menu component's close functionality.`
-              );
-            }
+            );
           }
           if (componentContract.selectors.input) {
             await page.locator(componentContract.selectors.input).first().clear();
@@ -179,6 +175,23 @@ This indicates a problem with the menu component's close functionality.`
           }
         }
       }
+      if (componentContract.selectors.panel && componentContract.selectors.trigger && !componentContract.selectors.popup) {
+        const triggerSelector = componentContract.selectors.trigger;
+        const panelSelector = componentContract.selectors.panel;
+        if (triggerSelector && panelSelector) {
+          const allTriggers = await page.locator(triggerSelector).all();
+          for (const trigger of allTriggers) {
+            const isExpanded = await trigger.getAttribute("aria-expanded") === "true";
+            const triggerPanel = await trigger.getAttribute("aria-controls");
+            if (isExpanded && triggerPanel) {
+              await trigger.click();
+              const panel = page.locator(`#${triggerPanel}`);
+              await (0, test_exports.expect)(panel).toBeHidden({ timeout: 1e3 }).catch(() => {
+              });
+            }
+          }
+        }
+      }
       let shouldSkipTest = false;
       for (const act of action) {
         if (act.type === "keypress" && (act.target === "submenuTrigger" || act.target === "submenu")) {

package/dist/index.cjs

@@ -365,7 +365,6 @@ async function runContractTestsPlaywright(componentName, url) {
   const passes = [];
   const skipped = [];
   let page = null;
-  const useNavigation = !!url;
   try {
     page = await createTestPage();
     if (url) {
@@ -379,8 +378,7 @@ async function runContractTestsPlaywright(componentName, url) {
     if (!mainSelector) {
       throw new Error(`No main selector (trigger, input, or container) found in contract for ${componentName}`);
     }
-    const elementTimeout = useNavigation ? 3e4 : 5e3;
-    await page.locator(mainSelector).first().waitFor({ state: "attached", timeout: elementTimeout });
+    await page.locator(mainSelector).first().waitFor({ state: "attached", timeout: 3e4 });
     if (componentName === "menu" && componentContract.selectors.trigger) {
       await page.locator(componentContract.selectors.trigger).first().waitFor({
         state: "visible",
@@ -491,15 +489,13 @@ async function runContractTestsPlaywright(componentName, url) {
             menuClosed = await (0, test_exports.expect)(popupElement).toBeHidden({ timeout: 2e3 }).then(() => true).catch(() => false);
           }
           if (!menuClosed) {
-            if (useNavigation) {
-              throw new Error(
-                `\u274C FATAL: Cannot close menu between tests. Menu remains visible after trying:
+            throw new Error(
+              `\u274C FATAL: Cannot close menu between tests. Menu remains visible after trying:
   1. Escape key
   2. Clicking trigger
   3. Clicking outside
 This indicates a problem with the menu component's close functionality.`
-              );
-            }
+            );
           }
           if (componentContract.selectors.input) {
             await page.locator(componentContract.selectors.input).first().clear();
@@ -510,6 +506,23 @@ This indicates a problem with the menu component's close functionality.`
           }
         }
       }
+      if (componentContract.selectors.panel && componentContract.selectors.trigger && !componentContract.selectors.popup) {
+        const triggerSelector = componentContract.selectors.trigger;
+        const panelSelector = componentContract.selectors.panel;
+        if (triggerSelector && panelSelector) {
+          const allTriggers = await page.locator(triggerSelector).all();
+          for (const trigger of allTriggers) {
+            const isExpanded = await trigger.getAttribute("aria-expanded") === "true";
+            const triggerPanel = await trigger.getAttribute("aria-controls");
+            if (isExpanded && triggerPanel) {
+              await trigger.click();
+              const panel = page.locator(`#${triggerPanel}`);
+              await (0, test_exports.expect)(panel).toBeHidden({ timeout: 1e3 }).catch(() => {
+              });
+            }
+          }
+        }
+      }
       let shouldSkipTest = false;
       for (const act of action) {
         if (act.type === "keypress" && (act.target === "submenuTrigger" || act.target === "submenu")) {
@@ -819,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.`);
@@ -870,6 +883,9 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
     const panel = panels[index];
     trigger.setAttribute("aria-expanded", "true");
     panel.style.display = "block";
+    if (callback?.onExpand) {
+      callback.onExpand(index);
+    }
   }
   function collapseItem(index) {
     if (index < 0 || index >= triggers.length) {
@@ -880,6 +896,9 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
     const panel = panels[index];
     trigger.setAttribute("aria-expanded", "false");
     panel.style.display = "none";
+    if (callback?.onCollapse) {
+      callback.onCollapse(index);
+    }
   }
   function toggleItem(index) {
     const trigger = triggers[index];
@@ -1742,7 +1761,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.`);
@@ -1789,9 +1808,9 @@ 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);
         }
@@ -1803,9 +1822,10 @@ 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);
       }
@@ -1814,12 +1834,13 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
   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);
       }
@@ -1829,9 +1850,9 @@ 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);
       }
@@ -1874,9 +1895,9 @@ 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);
             }

package/dist/index.d.cts

@@ -28,16 +28,29 @@ 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;
@@ -50,15 +63,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.
@@ -134,10 +142,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,16 +28,29 @@ 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;
@@ -50,15 +63,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.
@@ -134,10 +142,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.js

@@ -5,7 +5,7 @@ import {
 } from "./chunk-PDZQOXUN.js";
 
 // 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.`);
@@ -56,6 +56,9 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
     const panel = panels[index];
     trigger.setAttribute("aria-expanded", "true");
     panel.style.display = "block";
+    if (callback?.onExpand) {
+      callback.onExpand(index);
+    }
   }
   function collapseItem(index) {
     if (index < 0 || index >= triggers.length) {
@@ -66,6 +69,9 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
     const panel = panels[index];
     trigger.setAttribute("aria-expanded", "false");
     panel.style.display = "none";
+    if (callback?.onCollapse) {
+      callback.onCollapse(index);
+    }
   }
   function toggleItem(index) {
     const trigger = triggers[index];
@@ -928,7 +934,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.`);
@@ -975,9 +981,9 @@ 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);
         }
@@ -989,9 +995,10 @@ 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);
       }
@@ -1000,12 +1007,13 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
   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);
       }
@@ -1015,9 +1023,9 @@ 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);
       }
@@ -1060,9 +1068,9 @@ 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);
             }
@@ -1278,7 +1286,7 @@ Error: ${error instanceof Error ? error.message : String(error)}`
       const devServerUrl = await checkDevServer(url);
       if (devServerUrl) {
         console.log(`\u{1F3AD} Running Playwright tests on ${devServerUrl}`);
-        const { runContractTestsPlaywright } = await import("./contractTestRunnerPlaywright-ZO6GM4TU.js");
+        const { runContractTestsPlaywright } = await import("./contractTestRunnerPlaywright-EXEBWWPC.js");
         contract = await runContractTestsPlaywright(componentName, devServerUrl);
       } else {
         throw new Error(

package/dist/src/{Types.d-COr5IFp5.d.ts → Types.d-B-NDbH_q.d.cts}

@@ -22,19 +22,32 @@ 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;
 }
 
-export type { AccessibilityInstance as A, ComboboxConfig as C };
+export type { AccessibilityInstance as A, ComboboxConfig as C, AccordionConfig as a };

package/dist/src/{Types.d-COr5IFp5.d.cts → Types.d-B-NDbH_q.d.ts}

@@ -22,19 +22,32 @@ 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;
 }
 
-export type { AccessibilityInstance as A, ComboboxConfig as C };
+export type { AccessibilityInstance as A, ComboboxConfig as C, AccordionConfig as a };

package/dist/src/accordion/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 // 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.`);
@@ -52,6 +52,9 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
     const panel = panels[index];
     trigger.setAttribute("aria-expanded", "true");
     panel.style.display = "block";
+    if (callback?.onExpand) {
+      callback.onExpand(index);
+    }
   }
   function collapseItem(index) {
     if (index < 0 || index >= triggers.length) {
@@ -62,6 +65,9 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
     const panel = panels[index];
     trigger.setAttribute("aria-expanded", "false");
     panel.style.display = "none";
+    if (callback?.onCollapse) {
+      callback.onCollapse(index);
+    }
   }
   function toggleItem(index) {
     const trigger = triggers[index];

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

@@ -1,4 +1,4 @@
-import { A as AccessibilityInstance } from '../Types.d-COr5IFp5.cjs';
+import { a as AccordionConfig, A as AccessibilityInstance } from '../Types.d-B-NDbH_q.cjs';
 
 /**
  * Makes an accordion accessible by managing ARIA attributes, keyboard navigation, and state.
@@ -7,14 +7,9 @@ import { A as AccessibilityInstance } from '../Types.d-COr5IFp5.cjs';
  * @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;
 
 export { makeAccordionAccessible };

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

@@ -1,4 +1,4 @@
-import { A as AccessibilityInstance } from '../Types.d-COr5IFp5.js';
+import { a as AccordionConfig, A as AccessibilityInstance } from '../Types.d-B-NDbH_q.js';
 
 /**
  * Makes an accordion accessible by managing ARIA attributes, keyboard navigation, and state.
@@ -7,14 +7,9 @@ import { A as AccessibilityInstance } from '../Types.d-COr5IFp5.js';
  * @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;
 
 export { makeAccordionAccessible };

package/dist/src/accordion/index.js

@@ -1,5 +1,5 @@
 // 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.`);
@@ -50,6 +50,9 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
     const panel = panels[index];
     trigger.setAttribute("aria-expanded", "true");
     panel.style.display = "block";
+    if (callback?.onExpand) {
+      callback.onExpand(index);
+    }
   }
   function collapseItem(index) {
     if (index < 0 || index >= triggers.length) {
@@ -60,6 +63,9 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
     const panel = panels[index];
     trigger.setAttribute("aria-expanded", "false");
     panel.style.display = "none";
+    if (callback?.onCollapse) {
+      callback.onCollapse(index);
+    }
   }
   function toggleItem(index) {
     const trigger = triggers[index];

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

@@ -1,4 +1,4 @@
-import { A as AccessibilityInstance } from '../Types.d-COr5IFp5.cjs';
+import { A as AccessibilityInstance } from '../Types.d-B-NDbH_q.cjs';
 
 /**
  * Adds keyboard interaction to block. The block traps focus and can be interacted with using the keyboard.

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

@@ -1,4 +1,4 @@
-import { A as AccessibilityInstance } from '../Types.d-COr5IFp5.js';
+import { A as AccessibilityInstance } from '../Types.d-B-NDbH_q.js';
 
 /**
  * Adds keyboard interaction to block. The block traps focus and can be interacted with using the keyboard.

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

@@ -1,4 +1,4 @@
-import { A as AccessibilityInstance } from '../Types.d-COr5IFp5.cjs';
+import { A as AccessibilityInstance } from '../Types.d-B-NDbH_q.cjs';
 
 /**
  * Makes a checkbox group accessible by managing ARIA attributes and keyboard navigation.

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

@@ -1,4 +1,4 @@
-import { A as AccessibilityInstance } from '../Types.d-COr5IFp5.js';
+import { A as AccessibilityInstance } from '../Types.d-B-NDbH_q.js';
 
 /**
  * Makes a checkbox group accessible by managing ARIA attributes and keyboard navigation.

package/dist/src/combobox/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 // 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.`);
@@ -48,9 +48,9 @@ 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);
         }
@@ -62,9 +62,10 @@ 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);
       }
@@ -73,12 +74,13 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
   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);
       }
@@ -88,9 +90,9 @@ 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);
       }
@@ -133,9 +135,9 @@ 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);
             }

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

@@ -1,4 +1,4 @@
-import { C as ComboboxConfig, A as AccessibilityInstance } from '../Types.d-COr5IFp5.cjs';
+import { C as ComboboxConfig, A as AccessibilityInstance } from '../Types.d-B-NDbH_q.cjs';
 
 /**
  * Makes a Combobox accessible by adding appropriate ARIA attributes, keyboard interactions and focus management.
@@ -6,9 +6,9 @@ import { C as ComboboxConfig, A as AccessibilityInstance } from '../Types.d-COr5
  * @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;
 
 export { makeComboboxAccessible };

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

@@ -1,4 +1,4 @@
-import { C as ComboboxConfig, A as AccessibilityInstance } from '../Types.d-COr5IFp5.js';
+import { C as ComboboxConfig, A as AccessibilityInstance } from '../Types.d-B-NDbH_q.js';
 
 /**
  * Makes a Combobox accessible by adding appropriate ARIA attributes, keyboard interactions and focus management.
@@ -6,9 +6,9 @@ import { C as ComboboxConfig, A as AccessibilityInstance } from '../Types.d-COr5
  * @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;
 
 export { makeComboboxAccessible };

package/dist/src/combobox/index.js

@@ -1,5 +1,5 @@
 // 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.`);
@@ -46,9 +46,9 @@ 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);
         }
@@ -60,9 +60,10 @@ 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);
       }
@@ -71,12 +72,13 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
   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);
       }
@@ -86,9 +88,9 @@ 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);
       }
@@ -131,9 +133,9 @@ 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);
             }

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

@@ -1,4 +1,4 @@
-import { A as AccessibilityInstance } from '../Types.d-COr5IFp5.cjs';
+import { A as AccessibilityInstance } from '../Types.d-B-NDbH_q.cjs';
 
 /**
   * Adds keyboard interaction to toggle menu. The menu traps focus and can be interacted with using the keyboard. The first interactive item of the menu has focus when menu open.

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

@@ -1,4 +1,4 @@
-import { A as AccessibilityInstance } from '../Types.d-COr5IFp5.js';
+import { A as AccessibilityInstance } from '../Types.d-B-NDbH_q.js';
 
 /**
   * Adds keyboard interaction to toggle menu. The menu traps focus and can be interacted with using the keyboard. The first interactive item of the menu has focus when menu open.

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

@@ -1,4 +1,4 @@
-import { A as AccessibilityInstance } from '../Types.d-COr5IFp5.cjs';
+import { A as AccessibilityInstance } from '../Types.d-B-NDbH_q.cjs';
 
 /**
  * Makes a radio group accessible by managing ARIA attributes, keyboard navigation, and state.

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

@@ -1,4 +1,4 @@
-import { A as AccessibilityInstance } from '../Types.d-COr5IFp5.js';
+import { A as AccessibilityInstance } from '../Types.d-B-NDbH_q.js';
 
 /**
  * Makes a radio group accessible by managing ARIA attributes, keyboard navigation, and state.

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

@@ -1,4 +1,4 @@
-import { A as AccessibilityInstance } from '../Types.d-COr5IFp5.cjs';
+import { A as AccessibilityInstance } from '../Types.d-B-NDbH_q.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-COr5IFp5.js';
+import { A as AccessibilityInstance } from '../Types.d-B-NDbH_q.js';
 
 /**
  * Makes a toggle button accessible by managing ARIA attributes and keyboard interactions.

package/dist/src/utils/test/{contractTestRunnerPlaywright-CREJNINL.js → contractTestRunnerPlaywright-LJHY3AB4.js}

@@ -19,7 +19,6 @@ async function runContractTestsPlaywright(componentName, url) {
   const passes = [];
   const skipped = [];
   let page = null;
-  const useNavigation = !!url;
   try {
     page = await createTestPage();
     if (url) {
@@ -33,8 +32,7 @@ async function runContractTestsPlaywright(componentName, url) {
     if (!mainSelector) {
       throw new Error(`No main selector (trigger, input, or container) found in contract for ${componentName}`);
     }
-    const elementTimeout = useNavigation ? 3e4 : 5e3;
-    await page.locator(mainSelector).first().waitFor({ state: "attached", timeout: elementTimeout });
+    await page.locator(mainSelector).first().waitFor({ state: "attached", timeout: 3e4 });
     if (componentName === "menu" && componentContract.selectors.trigger) {
       await page.locator(componentContract.selectors.trigger).first().waitFor({
         state: "visible",
@@ -145,15 +143,13 @@ async function runContractTestsPlaywright(componentName, url) {
             menuClosed = await expect(popupElement).toBeHidden({ timeout: 2e3 }).then(() => true).catch(() => false);
           }
           if (!menuClosed) {
-            if (useNavigation) {
-              throw new Error(
-                `\u274C FATAL: Cannot close menu between tests. Menu remains visible after trying:
+            throw new Error(
+              `\u274C FATAL: Cannot close menu between tests. Menu remains visible after trying:
   1. Escape key
   2. Clicking trigger
   3. Clicking outside
 This indicates a problem with the menu component's close functionality.`
-              );
-            }
+            );
           }
           if (componentContract.selectors.input) {
             await page.locator(componentContract.selectors.input).first().clear();
@@ -164,6 +160,23 @@ This indicates a problem with the menu component's close functionality.`
           }
         }
       }
+      if (componentContract.selectors.panel && componentContract.selectors.trigger && !componentContract.selectors.popup) {
+        const triggerSelector = componentContract.selectors.trigger;
+        const panelSelector = componentContract.selectors.panel;
+        if (triggerSelector && panelSelector) {
+          const allTriggers = await page.locator(triggerSelector).all();
+          for (const trigger of allTriggers) {
+            const isExpanded = await trigger.getAttribute("aria-expanded") === "true";
+            const triggerPanel = await trigger.getAttribute("aria-controls");
+            if (isExpanded && triggerPanel) {
+              await trigger.click();
+              const panel = page.locator(`#${triggerPanel}`);
+              await expect(panel).toBeHidden({ timeout: 1e3 }).catch(() => {
+              });
+            }
+          }
+        }
+      }
       let shouldSkipTest = false;
       for (const act of action) {
         if (act.type === "keypress" && (act.target === "submenuTrigger" || act.target === "submenu")) {

package/dist/src/utils/test/index.cjs

@@ -336,7 +336,6 @@ async function runContractTestsPlaywright(componentName, url) {
   const passes = [];
   const skipped = [];
   let page = null;
-  const useNavigation = !!url;
   try {
     page = await createTestPage();
     if (url) {
@@ -350,8 +349,7 @@ async function runContractTestsPlaywright(componentName, url) {
     if (!mainSelector) {
       throw new Error(`No main selector (trigger, input, or container) found in contract for ${componentName}`);
     }
-    const elementTimeout = useNavigation ? 3e4 : 5e3;
-    await page.locator(mainSelector).first().waitFor({ state: "attached", timeout: elementTimeout });
+    await page.locator(mainSelector).first().waitFor({ state: "attached", timeout: 3e4 });
     if (componentName === "menu" && componentContract.selectors.trigger) {
       await page.locator(componentContract.selectors.trigger).first().waitFor({
         state: "visible",
@@ -462,15 +460,13 @@ async function runContractTestsPlaywright(componentName, url) {
             menuClosed = await test.expect(popupElement).toBeHidden({ timeout: 2e3 }).then(() => true).catch(() => false);
           }
           if (!menuClosed) {
-            if (useNavigation) {
-              throw new Error(
-                `\u274C FATAL: Cannot close menu between tests. Menu remains visible after trying:
+            throw new Error(
+              `\u274C FATAL: Cannot close menu between tests. Menu remains visible after trying:
   1. Escape key
   2. Clicking trigger
   3. Clicking outside
 This indicates a problem with the menu component's close functionality.`
-              );
-            }
+            );
           }
           if (componentContract.selectors.input) {
             await page.locator(componentContract.selectors.input).first().clear();
@@ -481,6 +477,23 @@ This indicates a problem with the menu component's close functionality.`
           }
         }
       }
+      if (componentContract.selectors.panel && componentContract.selectors.trigger && !componentContract.selectors.popup) {
+        const triggerSelector = componentContract.selectors.trigger;
+        const panelSelector = componentContract.selectors.panel;
+        if (triggerSelector && panelSelector) {
+          const allTriggers = await page.locator(triggerSelector).all();
+          for (const trigger of allTriggers) {
+            const isExpanded = await trigger.getAttribute("aria-expanded") === "true";
+            const triggerPanel = await trigger.getAttribute("aria-controls");
+            if (isExpanded && triggerPanel) {
+              await trigger.click();
+              const panel = page.locator(`#${triggerPanel}`);
+              await test.expect(panel).toBeHidden({ timeout: 1e3 }).catch(() => {
+              });
+            }
+          }
+        }
+      }
       let shouldSkipTest = false;
       for (const act of action) {
         if (act.type === "keypress" && (act.target === "submenuTrigger" || act.target === "submenu")) {

package/dist/src/utils/test/index.js

@@ -106,7 +106,7 @@ Error: ${error instanceof Error ? error.message : String(error)}`
       const devServerUrl = await checkDevServer(url);
       if (devServerUrl) {
         console.log(`\u{1F3AD} Running Playwright tests on ${devServerUrl}`);
-        const { runContractTestsPlaywright } = await import('./contractTestRunnerPlaywright-CREJNINL.js');
+        const { runContractTestsPlaywright } = await import('./contractTestRunnerPlaywright-LJHY3AB4.js');
         contract = await runContractTestsPlaywright(componentName, devServerUrl);
       } else {
         throw new Error(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aria-ease",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "Out-of-the-box accessibility utility package to develop production ready applications.",
   "main": "dist/index.cjs",
   "type": "module",