aria-ease 4.0.1 → 5.0.1

package/README.md

@@ -203,19 +203,19 @@ accordion.toggleItem(2); // Toggle third panel
 ```
 
 <details>
-<summary>📌 Legacy API (Still Supported)</summary>
+<summary>📌 Legacy API deprecated</summary>
 
 ```javascript
-import { updateAccordionTriggerAriaAttributes } from "aria-ease/accordion";
+import { makeAccordionAccessible } from "aria-ease/accordion";
 
 const accordionStates = [{ display: true }, { display: false }];
 
-updateAccordionTriggerAriaAttributes(
-  "accordion-container",
-  "accordion-trigger",
-  accordionStates,
-  0,
-);
+makeAccordionAccessible({
+  accordionId: "faq-div",
+  triggersClass: "dropdown-button",
+  panelsClass: "accordion-panel",
+  allowMultiple: false, // Only one panel open at a time
+});
 ```
 
 </details>
@@ -265,19 +265,15 @@ const indices = checkboxGroup.getCheckedIndices(); // [0, 2]
 ```
 
 <details>
-<summary>📌 Legacy API (Still Supported)</summary>
+<summary>📌 Legacy API deprecated</summary>
 
 ```javascript
-import { updateCheckboxAriaAttributes } from "aria-ease/checkbox";
-
-const checkboxStates = [{ checked: true }, { checked: false }];
+import { makeCheckboxAccessible } from "aria-ease/checkbox";
 
-updateCheckboxAriaAttributes(
-  "checkbox-group",
-  "custom-checkbox",
-  checkboxStates,
-  0,
-);
+makeCheckboxAccessible({
+  checkboxGroupId: "checkbox-div",
+  checkboxesClass: "course-checkbox",
+});
 ```
 
 </details>
@@ -326,14 +322,16 @@ const selected = radioGroup.getSelectedIndex(); // Get current selection
 ```
 
 <details>
-<summary>📌 Legacy API (Still Supported)</summary>
+<summary>📌 Legacy API deprecated</summary>
 
 ```javascript
-import { updateRadioAriaAttributes } from "aria-ease/radio";
-
-const radioStates = [{ checked: true }, { checked: false }];
+import { makeRadioAccessible } from "aria-ease/radio";
 
-updateRadioAriaAttributes("radio-group", "custom-radio", radioStates, 0);
+makeRadioAccessible({
+  radioGroupId: "radio-div",
+  radiosClass: "radio",
+  defaultSelectedIndex: 0, // Optional: which radio is selected initially
+});
 ```
 
 </details>
@@ -393,7 +391,7 @@ toggle.cleanup();
 ```
 
 <details>
-<summary>📌 Legacy API (Still Supported)</summary>
+<summary>📌 Legacy API deprecated</summary>
 
 ```javascript
 import { updateToggleAriaAttribute } from "aria-ease/toggle";

package/bin/cli.cjs

@@ -13330,10 +13330,11 @@ async function runContractTestsPlaywright(componentName, url) {
           return trigger && trigger.getAttribute("data-menu-initialized") === "true";
         },
         componentContract.selectors.trigger,
-        { timeout: 6e3 }
+        { timeout: 1e4 }
       ).catch(() => {
         console.warn("Menu initialization signal not detected, continuing with tests...");
       });
+      await page.waitForTimeout(300);
     }
     async function resolveRelativeTarget(selector, relative) {
       const items = await page.locator(selector).all();
@@ -13411,18 +13412,84 @@ async function runContractTestsPlaywright(componentName, url) {
         const popupElement = page.locator(popupSelector).first();
         const isPopupVisible = await popupElement.isVisible();
         if (isPopupVisible) {
-          const closeSelector = componentContract.selectors.input || componentContract.selectors.trigger;
+          let menuClosed = false;
+          let closeSelector = componentContract.selectors.input;
+          if (!closeSelector && componentContract.selectors.focusable) {
+            closeSelector = componentContract.selectors.focusable;
+          } else if (!closeSelector) {
+            closeSelector = componentContract.selectors.trigger;
+          }
           if (closeSelector) {
             const closeElement = page.locator(closeSelector).first();
             await closeElement.focus();
-            await page.keyboard.press("Escape");
             await page.waitForTimeout(200);
-            if (componentContract.selectors.input) {
-              const inputElement = page.locator(componentContract.selectors.input).first();
-              await inputElement.clear();
-              await page.waitForTimeout(100);
+            await page.keyboard.press("Escape");
+            menuClosed = await page.waitForFunction(
+              (selector) => {
+                const popup = document.querySelector(selector);
+                return popup && getComputedStyle(popup).display === "none";
+              },
+              popupSelector,
+              { timeout: 3e3 }
+            ).then(() => true).catch(() => false);
+          }
+          if (!menuClosed && componentContract.selectors.trigger) {
+            const triggerElement = page.locator(componentContract.selectors.trigger).first();
+            await triggerElement.click();
+            await page.waitForTimeout(500);
+            menuClosed = await page.waitForFunction(
+              (selector) => {
+                const popup = document.querySelector(selector);
+                return popup && getComputedStyle(popup).display === "none";
+              },
+              popupSelector,
+              { timeout: 3e3 }
+            ).then(() => true).catch(() => false);
+          }
+          if (!menuClosed) {
+            await page.mouse.click(10, 10);
+            await page.waitForTimeout(500);
+            menuClosed = await page.waitForFunction(
+              (selector) => {
+                const popup = document.querySelector(selector);
+                return popup && getComputedStyle(popup).display === "none";
+              },
+              popupSelector,
+              { timeout: 3e3 }
+            ).then(() => true).catch(() => false);
+            if (menuClosed) {
+              console.log("\u{1F3AF} Strategy 3 (Click outside) worked");
             }
           }
+          if (!menuClosed) {
+            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 (componentName === "menu" && componentContract.selectors.trigger) {
+            await page.waitForFunction(
+              (selector) => {
+                const trigger = document.querySelector(selector);
+                return document.activeElement === trigger;
+              },
+              componentContract.selectors.trigger,
+              { timeout: 2e3 }
+            ).catch(async () => {
+              const triggerElement = page.locator(componentContract.selectors.trigger).first();
+              await triggerElement.focus();
+              await page.waitForTimeout(200);
+            });
+          }
+          await page.waitForTimeout(500);
+          if (componentContract.selectors.input) {
+            const inputElement = page.locator(componentContract.selectors.input).first();
+            await inputElement.clear();
+            await page.waitForTimeout(100);
+          }
         }
       }
       let shouldSkipTest = false;
@@ -13491,7 +13558,7 @@ async function runContractTestsPlaywright(componentName, url) {
               continue;
             }
             await relativeElement.click();
-            await page.waitForTimeout(componentName === "menu" ? 500 : 200);
+            await page.waitForTimeout(componentName === "menu" ? 800 : 200);
           } else {
             const actionSelector = componentContract.selectors[act.target];
             if (!actionSelector) {
@@ -13499,7 +13566,7 @@ async function runContractTestsPlaywright(componentName, url) {
               continue;
             }
             await page.locator(actionSelector).first().click();
-            await page.waitForTimeout(componentName === "menu" ? 500 : 200);
+            await page.waitForTimeout(componentName === "menu" ? 800 : 200);
           }
         }
         if (act.type === "keypress" && act.key) {
@@ -13522,9 +13589,9 @@ async function runContractTestsPlaywright(componentName, url) {
             keyValue = keyValue.replace(/ /g, "");
           }
           if (act.target === "focusable" && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Escape"].includes(keyValue)) {
-            await page.waitForTimeout(100);
+            await page.waitForTimeout(componentName === "menu" ? 200 : 100);
             await page.keyboard.press(keyValue);
-            await page.waitForTimeout(100);
+            await page.waitForTimeout(componentName === "menu" ? 300 : 100);
           } else {
             const keypressSelector = componentContract.selectors[act.target];
             if (!keypressSelector) {
@@ -13564,8 +13631,9 @@ async function runContractTestsPlaywright(componentName, url) {
             await page.waitForTimeout(100);
           }
         }
-        await page.waitForTimeout(100);
+        await page.waitForTimeout(componentName === "menu" ? 200 : 100);
       }
+      await page.waitForTimeout(componentName === "menu" ? 300 : 100);
       for (const assertion of assertions) {
         let target;
         if (assertion.target === "relative") {
@@ -13663,7 +13731,11 @@ async function runContractTestsPlaywright(componentName, url) {
             await (0, test_exports.expect)(target).toBeFocused({ timeout: 5e3 });
             passes.push(`${assertion.target} has focus as expected. Test: "${dynamicTest.description}".`);
           } catch {
-            failures.push(`${assertion.failureMessage}`);
+            const actualFocus = await page.evaluate(() => {
+              const focused = document.activeElement;
+              return focused ? `${focused.tagName}#${focused.id || "no-id"}.${focused.className || "no-class"}` : "no element focused";
+            });
+            failures.push(`${assertion.failureMessage} (actual focus: ${actualFocus})`);
           }
         }
         if (assertion.assertion === "toHaveRole" && assertion.expectedValue) {

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-45KMD4F4.js");
+  const { runTest } = await import("./test-TAH4VGZV.js");
   runTest();
 });
 program.command("help").description("Display help information").action(() => {

package/bin/{contractTestRunnerPlaywright-EZLNNJV5.js → contractTestRunnerPlaywright-YPBTKJP7.js}

@@ -57,10 +57,11 @@ async function runContractTestsPlaywright(componentName, url) {
           return trigger && trigger.getAttribute("data-menu-initialized") === "true";
         },
         componentContract.selectors.trigger,
-        { timeout: 6e3 }
+        { timeout: 1e4 }
       ).catch(() => {
         console.warn("Menu initialization signal not detected, continuing with tests...");
       });
+      await page.waitForTimeout(300);
     }
     async function resolveRelativeTarget(selector, relative) {
       const items = await page.locator(selector).all();
@@ -138,18 +139,84 @@ async function runContractTestsPlaywright(componentName, url) {
         const popupElement = page.locator(popupSelector).first();
         const isPopupVisible = await popupElement.isVisible();
         if (isPopupVisible) {
-          const closeSelector = componentContract.selectors.input || componentContract.selectors.trigger;
+          let menuClosed = false;
+          let closeSelector = componentContract.selectors.input;
+          if (!closeSelector && componentContract.selectors.focusable) {
+            closeSelector = componentContract.selectors.focusable;
+          } else if (!closeSelector) {
+            closeSelector = componentContract.selectors.trigger;
+          }
           if (closeSelector) {
             const closeElement = page.locator(closeSelector).first();
             await closeElement.focus();
-            await page.keyboard.press("Escape");
             await page.waitForTimeout(200);
-            if (componentContract.selectors.input) {
-              const inputElement = page.locator(componentContract.selectors.input).first();
-              await inputElement.clear();
-              await page.waitForTimeout(100);
+            await page.keyboard.press("Escape");
+            menuClosed = await page.waitForFunction(
+              (selector) => {
+                const popup = document.querySelector(selector);
+                return popup && getComputedStyle(popup).display === "none";
+              },
+              popupSelector,
+              { timeout: 3e3 }
+            ).then(() => true).catch(() => false);
+          }
+          if (!menuClosed && componentContract.selectors.trigger) {
+            const triggerElement = page.locator(componentContract.selectors.trigger).first();
+            await triggerElement.click();
+            await page.waitForTimeout(500);
+            menuClosed = await page.waitForFunction(
+              (selector) => {
+                const popup = document.querySelector(selector);
+                return popup && getComputedStyle(popup).display === "none";
+              },
+              popupSelector,
+              { timeout: 3e3 }
+            ).then(() => true).catch(() => false);
+          }
+          if (!menuClosed) {
+            await page.mouse.click(10, 10);
+            await page.waitForTimeout(500);
+            menuClosed = await page.waitForFunction(
+              (selector) => {
+                const popup = document.querySelector(selector);
+                return popup && getComputedStyle(popup).display === "none";
+              },
+              popupSelector,
+              { timeout: 3e3 }
+            ).then(() => true).catch(() => false);
+            if (menuClosed) {
+              console.log("\u{1F3AF} Strategy 3 (Click outside) worked");
             }
           }
+          if (!menuClosed) {
+            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 (componentName === "menu" && componentContract.selectors.trigger) {
+            await page.waitForFunction(
+              (selector) => {
+                const trigger = document.querySelector(selector);
+                return document.activeElement === trigger;
+              },
+              componentContract.selectors.trigger,
+              { timeout: 2e3 }
+            ).catch(async () => {
+              const triggerElement = page.locator(componentContract.selectors.trigger).first();
+              await triggerElement.focus();
+              await page.waitForTimeout(200);
+            });
+          }
+          await page.waitForTimeout(500);
+          if (componentContract.selectors.input) {
+            const inputElement = page.locator(componentContract.selectors.input).first();
+            await inputElement.clear();
+            await page.waitForTimeout(100);
+          }
         }
       }
       let shouldSkipTest = false;
@@ -218,7 +285,7 @@ async function runContractTestsPlaywright(componentName, url) {
               continue;
             }
             await relativeElement.click();
-            await page.waitForTimeout(componentName === "menu" ? 500 : 200);
+            await page.waitForTimeout(componentName === "menu" ? 800 : 200);
           } else {
             const actionSelector = componentContract.selectors[act.target];
             if (!actionSelector) {
@@ -226,7 +293,7 @@ async function runContractTestsPlaywright(componentName, url) {
               continue;
             }
             await page.locator(actionSelector).first().click();
-            await page.waitForTimeout(componentName === "menu" ? 500 : 200);
+            await page.waitForTimeout(componentName === "menu" ? 800 : 200);
           }
         }
         if (act.type === "keypress" && act.key) {
@@ -249,9 +316,9 @@ async function runContractTestsPlaywright(componentName, url) {
             keyValue = keyValue.replace(/ /g, "");
           }
           if (act.target === "focusable" && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Escape"].includes(keyValue)) {
-            await page.waitForTimeout(100);
+            await page.waitForTimeout(componentName === "menu" ? 200 : 100);
             await page.keyboard.press(keyValue);
-            await page.waitForTimeout(100);
+            await page.waitForTimeout(componentName === "menu" ? 300 : 100);
           } else {
             const keypressSelector = componentContract.selectors[act.target];
             if (!keypressSelector) {
@@ -291,8 +358,9 @@ async function runContractTestsPlaywright(componentName, url) {
             await page.waitForTimeout(100);
           }
         }
-        await page.waitForTimeout(100);
+        await page.waitForTimeout(componentName === "menu" ? 200 : 100);
       }
+      await page.waitForTimeout(componentName === "menu" ? 300 : 100);
       for (const assertion of assertions) {
         let target;
         if (assertion.target === "relative") {
@@ -390,7 +458,11 @@ async function runContractTestsPlaywright(componentName, url) {
             await (0, test_exports.expect)(target).toBeFocused({ timeout: 5e3 });
             passes.push(`${assertion.target} has focus as expected. Test: "${dynamicTest.description}".`);
           } catch {
-            failures.push(`${assertion.failureMessage}`);
+            const actualFocus = await page.evaluate(() => {
+              const focused = document.activeElement;
+              return focused ? `${focused.tagName}#${focused.id || "no-id"}.${focused.className || "no-class"}` : "no element focused";
+            });
+            failures.push(`${assertion.failureMessage} (actual focus: ${actualFocus})`);
           }
         }
         if (assertion.assertion === "toHaveRole" && assertion.expectedValue) {

package/bin/{test-45KMD4F4.js → test-TAH4VGZV.js}

@@ -12776,7 +12776,7 @@ Error: ${error instanceof Error ? error.message : String(error)}`
 URL must include protocol (e.g., "http://localhost:5173/test")`
         );
       }
-      const { runContractTestsPlaywright } = await import("./contractTestRunnerPlaywright-EZLNNJV5.js");
+      const { runContractTestsPlaywright } = await import("./contractTestRunnerPlaywright-YPBTKJP7.js");
       contract = await runContractTestsPlaywright(componentName, url);
     } else {
       console.log(`\u{1F9EA} Running jsdom tests (limited event handling)`);

package/dist/{contractTestRunnerPlaywright-UQQI5MYS.js → contractTestRunnerPlaywright-45CFWUOD.js}

@@ -55,10 +55,11 @@ async function runContractTestsPlaywright(componentName, url) {
           return trigger && trigger.getAttribute("data-menu-initialized") === "true";
         },
         componentContract.selectors.trigger,
-        { timeout: 6e3 }
+        { timeout: 1e4 }
       ).catch(() => {
         console.warn("Menu initialization signal not detected, continuing with tests...");
       });
+      await page.waitForTimeout(300);
     }
     async function resolveRelativeTarget(selector, relative) {
       const items = await page.locator(selector).all();
@@ -136,18 +137,84 @@ async function runContractTestsPlaywright(componentName, url) {
         const popupElement = page.locator(popupSelector).first();
         const isPopupVisible = await popupElement.isVisible();
         if (isPopupVisible) {
-          const closeSelector = componentContract.selectors.input || componentContract.selectors.trigger;
+          let menuClosed = false;
+          let closeSelector = componentContract.selectors.input;
+          if (!closeSelector && componentContract.selectors.focusable) {
+            closeSelector = componentContract.selectors.focusable;
+          } else if (!closeSelector) {
+            closeSelector = componentContract.selectors.trigger;
+          }
           if (closeSelector) {
             const closeElement = page.locator(closeSelector).first();
             await closeElement.focus();
-            await page.keyboard.press("Escape");
             await page.waitForTimeout(200);
-            if (componentContract.selectors.input) {
-              const inputElement = page.locator(componentContract.selectors.input).first();
-              await inputElement.clear();
-              await page.waitForTimeout(100);
+            await page.keyboard.press("Escape");
+            menuClosed = await page.waitForFunction(
+              (selector) => {
+                const popup = document.querySelector(selector);
+                return popup && getComputedStyle(popup).display === "none";
+              },
+              popupSelector,
+              { timeout: 3e3 }
+            ).then(() => true).catch(() => false);
+          }
+          if (!menuClosed && componentContract.selectors.trigger) {
+            const triggerElement = page.locator(componentContract.selectors.trigger).first();
+            await triggerElement.click();
+            await page.waitForTimeout(500);
+            menuClosed = await page.waitForFunction(
+              (selector) => {
+                const popup = document.querySelector(selector);
+                return popup && getComputedStyle(popup).display === "none";
+              },
+              popupSelector,
+              { timeout: 3e3 }
+            ).then(() => true).catch(() => false);
+          }
+          if (!menuClosed) {
+            await page.mouse.click(10, 10);
+            await page.waitForTimeout(500);
+            menuClosed = await page.waitForFunction(
+              (selector) => {
+                const popup = document.querySelector(selector);
+                return popup && getComputedStyle(popup).display === "none";
+              },
+              popupSelector,
+              { timeout: 3e3 }
+            ).then(() => true).catch(() => false);
+            if (menuClosed) {
+              console.log("\u{1F3AF} Strategy 3 (Click outside) worked");
             }
           }
+          if (!menuClosed) {
+            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 (componentName === "menu" && componentContract.selectors.trigger) {
+            await page.waitForFunction(
+              (selector) => {
+                const trigger = document.querySelector(selector);
+                return document.activeElement === trigger;
+              },
+              componentContract.selectors.trigger,
+              { timeout: 2e3 }
+            ).catch(async () => {
+              const triggerElement = page.locator(componentContract.selectors.trigger).first();
+              await triggerElement.focus();
+              await page.waitForTimeout(200);
+            });
+          }
+          await page.waitForTimeout(500);
+          if (componentContract.selectors.input) {
+            const inputElement = page.locator(componentContract.selectors.input).first();
+            await inputElement.clear();
+            await page.waitForTimeout(100);
+          }
         }
       }
       let shouldSkipTest = false;
@@ -216,7 +283,7 @@ async function runContractTestsPlaywright(componentName, url) {
               continue;
             }
             await relativeElement.click();
-            await page.waitForTimeout(componentName === "menu" ? 500 : 200);
+            await page.waitForTimeout(componentName === "menu" ? 800 : 200);
           } else {
             const actionSelector = componentContract.selectors[act.target];
             if (!actionSelector) {
@@ -224,7 +291,7 @@ async function runContractTestsPlaywright(componentName, url) {
               continue;
             }
             await page.locator(actionSelector).first().click();
-            await page.waitForTimeout(componentName === "menu" ? 500 : 200);
+            await page.waitForTimeout(componentName === "menu" ? 800 : 200);
           }
         }
         if (act.type === "keypress" && act.key) {
@@ -247,9 +314,9 @@ async function runContractTestsPlaywright(componentName, url) {
             keyValue = keyValue.replace(/ /g, "");
           }
           if (act.target === "focusable" && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Escape"].includes(keyValue)) {
-            await page.waitForTimeout(100);
+            await page.waitForTimeout(componentName === "menu" ? 200 : 100);
             await page.keyboard.press(keyValue);
-            await page.waitForTimeout(100);
+            await page.waitForTimeout(componentName === "menu" ? 300 : 100);
           } else {
             const keypressSelector = componentContract.selectors[act.target];
             if (!keypressSelector) {
@@ -289,8 +356,9 @@ async function runContractTestsPlaywright(componentName, url) {
             await page.waitForTimeout(100);
           }
         }
-        await page.waitForTimeout(100);
+        await page.waitForTimeout(componentName === "menu" ? 200 : 100);
       }
+      await page.waitForTimeout(componentName === "menu" ? 300 : 100);
       for (const assertion of assertions) {
         let target;
         if (assertion.target === "relative") {
@@ -388,7 +456,11 @@ async function runContractTestsPlaywright(componentName, url) {
             await (0, test_exports.expect)(target).toBeFocused({ timeout: 5e3 });
             passes.push(`${assertion.target} has focus as expected. Test: "${dynamicTest.description}".`);
           } catch {
-            failures.push(`${assertion.failureMessage}`);
+            const actualFocus = await page.evaluate(() => {
+              const focused = document.activeElement;
+              return focused ? `${focused.tagName}#${focused.id || "no-id"}.${focused.className || "no-class"}` : "no element focused";
+            });
+            failures.push(`${assertion.failureMessage} (actual focus: ${actualFocus})`);
           }
         }
         if (assertion.assertion === "toHaveRole" && assertion.expectedValue) {