aria-ease 5.0.2 → 6.0.0

package/README.md

@@ -175,7 +175,7 @@ useEffect(() => {
     accordionId: "accordion-container",
     triggersClass: "accordion-trigger",
     panelsClass: "accordion-panel",
-    allowMultiple: false, // Only one panel open at a time (default)
+    allowMultipleOpen: false, // Only one panel open at a time (default)
   });
 
   return () => accordion.cleanup();
@@ -214,7 +214,7 @@ makeAccordionAccessible({
   accordionId: "faq-div",
   triggersClass: "dropdown-button",
   panelsClass: "accordion-panel",
-  allowMultiple: false, // Only one panel open at a time
+  allowMultipleOpen: false, // Only one panel open at a time
 });
 ```
 
@@ -428,20 +428,30 @@ blockInstance.current.cleanup();
 Aria-Ease includes a built-in testing framework for automated accessibility validation:
 
 ```javascript
-import { testUiComponent } from "aria-ease/test";
+import { describe, test, afterAll } from "vitest";
+import { testUiComponent, cleanupTests } from "aria-ease/test";
+import { render } from "@testing-library/react";
+import ShopifyUserMenu from "../src/components/menus/ShopifyUserMenu";
 
-// In your test file (Vitest, Jest, etc.)
-test("combobox is accessible", async () => {
-  const { container } = render(<Combobox />);
+afterAll(async () => {
+  await cleanupTests();
+});
 
-  // Runs axe-core + contract tests
-  const result = await testUiComponent(
-    "combobox",
-    container,
-    "http://localhost:3000", // Optional: full E2E with Playwright
-  );
+describe("Shopify User Menu Accessibility Test", () => {
+  test("renders Shopify user menu without accessibility violation(s)", async () => {
+    await testUiComponent(
+      "menu",
+      null,
+      "http://localhost:5173/test-harness?component=menu",
+    ); // For full component interaction test. Uses Playwright to test interaction and behaviors
+  }, 6000);
+});
 
-  expect(result.violations).toHaveLength(0);
+describe("Shopify User Menu Accessibility Test", () => {
+  test("renders Shopify user menu without accessibility violation(s)", async () => {
+    const { container } = render(<ShopifyUserMenu />);
+    await testUiComponent("menu", container, null); // For fast limited static tests. Doesn't test for interaction and behaviors
+  });
 });
 ```
 

package/bin/{chunk-Y2FZWFX7.js → chunk-7RMRFSJL.js}

@@ -7,6 +7,10 @@ var contract_default = {
   combobox: {
     path: "./contracts/ComboboxContract.json",
     component: "combobox"
+  },
+  accordion: {
+    path: "./contracts/AccordionContract.json",
+    component: "accordion"
   }
 };
 
@@ -182,7 +186,7 @@ ${"\u2550".repeat(60)}`);
     } else if (totalFailures === 0) {
       this.log(`\u2705 ${totalPasses}/${totalRun} required tests passed`);
       if (this.skipped > 0) {
-        this.log(`\u25CB  ${this.skipped} tests skipped (jsdom limitation)`);
+        this.log(`\u25CB  ${this.skipped} tests skipped`);
       }
       if (this.optionalSuggestions > 0) {
         this.log(`\u{1F4A1} ${this.optionalSuggestions} optional enhancement${this.optionalSuggestions > 1 ? "s" : ""} suggested`);
@@ -231,7 +235,53 @@ ${"\u2550".repeat(60)}`);
   }
 };
 
+// src/utils/test/contract/playwrightTestHarness.ts
+import { chromium } from "playwright";
+var sharedBrowser = null;
+var sharedContext = null;
+async function getOrCreateBrowser() {
+  if (!sharedBrowser) {
+    sharedBrowser = await chromium.launch({
+      headless: true,
+      // Launch with clean browser profile - no extensions, no user data
+      args: [
+        "--disable-extensions",
+        "--disable-blink-features=AutomationControlled"
+      ]
+    });
+  }
+  return sharedBrowser;
+}
+async function getOrCreateContext() {
+  if (!sharedContext) {
+    const browser = await getOrCreateBrowser();
+    sharedContext = await browser.newContext({
+      // Isolated context - no permissions, no geolocation, etc.
+      permissions: [],
+      // Ignore HTTPS errors for local dev servers
+      ignoreHTTPSErrors: true
+    });
+  }
+  return sharedContext;
+}
+async function createTestPage() {
+  const context = await getOrCreateContext();
+  return await context.newPage();
+}
+async function closeSharedBrowser() {
+  if (sharedContext) {
+    await sharedContext.close();
+    sharedContext = null;
+  }
+  if (sharedBrowser) {
+    await sharedBrowser.close();
+    sharedBrowser = null;
+  }
+}
+
 export {
   contract_default,
-  ContractReporter
+  ContractReporter,
+  createTestPage,
+  closeSharedBrowser
 };

package/bin/cli.cjs

@@ -283,6 +283,10 @@ var init_contract = __esm({
       combobox: {
         path: "./contracts/ComboboxContract.json",
         component: "combobox"
+      },
+      accordion: {
+        path: "./contracts/AccordionContract.json",
+        component: "accordion"
       }
     };
   }
@@ -464,7 +468,7 @@ ${"\u2550".repeat(60)}`);
         } else if (totalFailures === 0) {
           this.log(`\u2705 ${totalPasses}/${totalRun} required tests passed`);
           if (this.skipped > 0) {
-            this.log(`\u25CB  ${this.skipped} tests skipped (jsdom limitation)`);
+            this.log(`\u25CB  ${this.skipped} tests skipped`);
           }
           if (this.optionalSuggestions > 0) {
             this.log(`\u{1F4A1} ${this.optionalSuggestions} optional enhancement${this.optionalSuggestions > 1 ? "s" : ""} suggested`);
@@ -586,6 +590,56 @@ var init_contractTestRunner = __esm({
   }
 });
 
+// src/utils/test/contract/playwrightTestHarness.ts
+async function getOrCreateBrowser() {
+  if (!sharedBrowser) {
+    sharedBrowser = await import_playwright3.chromium.launch({
+      headless: true,
+      // Launch with clean browser profile - no extensions, no user data
+      args: [
+        "--disable-extensions",
+        "--disable-blink-features=AutomationControlled"
+      ]
+    });
+  }
+  return sharedBrowser;
+}
+async function getOrCreateContext() {
+  if (!sharedContext) {
+    const browser = await getOrCreateBrowser();
+    sharedContext = await browser.newContext({
+      // Isolated context - no permissions, no geolocation, etc.
+      permissions: [],
+      // Ignore HTTPS errors for local dev servers
+      ignoreHTTPSErrors: true
+    });
+  }
+  return sharedContext;
+}
+async function createTestPage() {
+  const context = await getOrCreateContext();
+  return await context.newPage();
+}
+async function closeSharedBrowser() {
+  if (sharedContext) {
+    await sharedContext.close();
+    sharedContext = null;
+  }
+  if (sharedBrowser) {
+    await sharedBrowser.close();
+    sharedBrowser = null;
+  }
+}
+var import_playwright3, sharedBrowser, sharedContext;
+var init_playwrightTestHarness = __esm({
+  "src/utils/test/contract/playwrightTestHarness.ts"() {
+    "use strict";
+    import_playwright3 = require("playwright");
+    sharedBrowser = null;
+    sharedContext = null;
+  }
+});
+
 // node_modules/@playwright/test/index.mjs
 var test_exports = {};
 __export(test_exports, {
@@ -621,34 +675,35 @@ async function runContractTestsPlaywright(componentName, url) {
   const failures = [];
   const passes = [];
   const skipped = [];
-  let browser = null;
+  let page = null;
+  const useNavigation = !!url;
   try {
-    browser = await import_playwright3.chromium.launch({ headless: true });
-    const context = await browser.newContext();
-    const page = await context.newPage();
-    await page.goto(url, {
-      waitUntil: "domcontentloaded",
-      timeout: 9e4
-    });
+    page = await createTestPage();
+    if (url) {
+      await page.goto(url, {
+        waitUntil: "domcontentloaded",
+        timeout: 3e4
+      });
+      await page.addStyleTag({ content: `* { transition: none !important; animation: none !important; }` });
+    }
     const mainSelector = componentContract.selectors.trigger || componentContract.selectors.input || componentContract.selectors.container;
     if (!mainSelector) {
       throw new Error(`No main selector (trigger, input, or container) found in contract for ${componentName}`);
     }
-    await page.waitForSelector(mainSelector, { timeout: 9e4 });
+    const elementTimeout = useNavigation ? 3e4 : 5e3;
+    await page.locator(mainSelector).first().waitFor({ state: "attached", timeout: elementTimeout });
     if (componentName === "menu" && componentContract.selectors.trigger) {
-      await page.waitForFunction(
-        (selector) => {
-          const trigger = document.querySelector(selector);
-          return trigger && trigger.getAttribute("data-menu-initialized") === "true";
-        },
-        componentContract.selectors.trigger,
-        { timeout: 1e4 }
-      ).catch(() => {
-        console.warn("Menu initialization signal not detected, continuing with tests...");
+      await page.locator(componentContract.selectors.trigger).first().waitFor({
+        state: "visible",
+        timeout: 5e3
+      }).catch(() => {
+        console.warn("Menu trigger not visible, continuing with tests...");
       });
-      await page.waitForTimeout(300);
     }
     async function resolveRelativeTarget(selector, relative) {
+      if (!page) {
+        throw new Error("Page is not initialized");
+      }
       const items = await page.locator(selector).all();
       switch (relative) {
         case "first":
@@ -718,11 +773,11 @@ async function runContractTestsPlaywright(componentName, url) {
     for (const dynamicTest of componentContract.dynamic || []) {
       const { action, assertions } = dynamicTest;
       const failuresBeforeTest = failures.length;
-      if (componentContract.selectors.listbox || componentContract.selectors.container) {
-        const popupSelector = componentContract.selectors.listbox || componentContract.selectors.container;
+      if (componentContract.selectors.popup) {
+        const popupSelector = componentContract.selectors.popup;
         if (!popupSelector) continue;
         const popupElement = page.locator(popupSelector).first();
-        const isPopupVisible = await popupElement.isVisible();
+        const isPopupVisible = await popupElement.isVisible().catch(() => false);
         if (isPopupVisible) {
           let menuClosed = false;
           let closeSelector = componentContract.selectors.input;
@@ -734,73 +789,35 @@ async function runContractTestsPlaywright(componentName, url) {
           if (closeSelector) {
             const closeElement = page.locator(closeSelector).first();
             await closeElement.focus();
-            await page.waitForTimeout(200);
             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);
+            menuClosed = await (0, test_exports.expect)(popupElement).toBeHidden({ timeout: 2e3 }).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);
+            menuClosed = await (0, test_exports.expect)(popupElement).toBeHidden({ timeout: 2e3 }).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");
-            }
+            menuClosed = await (0, test_exports.expect)(popupElement).toBeHidden({ timeout: 2e3 }).then(() => true).catch(() => false);
           }
           if (!menuClosed) {
-            throw new Error(
-              `\u274C FATAL: Cannot close menu between tests. Menu remains visible after trying:
+            if (useNavigation) {
+              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);
+            await page.locator(componentContract.selectors.input).first().clear();
+          }
+          if (componentName === "menu" && componentContract.selectors.trigger) {
+            const triggerElement = page.locator(componentContract.selectors.trigger).first();
+            await triggerElement.focus();
           }
         }
       }
@@ -844,7 +861,6 @@ This indicates a problem with the menu component's close functionality.`
             continue;
           }
           await page.locator(focusSelector).first().focus();
-          await page.waitForTimeout(100);
         }
         if (act.type === "type" && act.value) {
           const typeSelector = componentContract.selectors[act.target];
@@ -853,7 +869,6 @@ This indicates a problem with the menu component's close functionality.`
             continue;
           }
           await page.locator(typeSelector).first().fill(act.value);
-          await page.waitForTimeout(100);
         }
         if (act.type === "click") {
           if (act.target === "document") {
@@ -870,7 +885,6 @@ This indicates a problem with the menu component's close functionality.`
               continue;
             }
             await relativeElement.click();
-            await page.waitForTimeout(componentName === "menu" ? 800 : 200);
           } else {
             const actionSelector = componentContract.selectors[act.target];
             if (!actionSelector) {
@@ -878,7 +892,6 @@ This indicates a problem with the menu component's close functionality.`
               continue;
             }
             await page.locator(actionSelector).first().click();
-            await page.waitForTimeout(componentName === "menu" ? 800 : 200);
           }
         }
         if (act.type === "keypress" && act.key) {
@@ -901,9 +914,7 @@ This indicates a problem with the menu component's close functionality.`
             keyValue = keyValue.replace(/ /g, "");
           }
           if (act.target === "focusable" && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Escape"].includes(keyValue)) {
-            await page.waitForTimeout(componentName === "menu" ? 200 : 100);
             await page.keyboard.press(keyValue);
-            await page.waitForTimeout(componentName === "menu" ? 300 : 100);
           } else {
             const keypressSelector = componentContract.selectors[act.target];
             if (!keypressSelector) {
@@ -932,7 +943,6 @@ This indicates a problem with the menu component's close functionality.`
               continue;
             }
             await relativeElement.hover();
-            await page.waitForTimeout(100);
           } else {
             const hoverSelector = componentContract.selectors[act.target];
             if (!hoverSelector) {
@@ -940,12 +950,9 @@ This indicates a problem with the menu component's close functionality.`
               continue;
             }
             await page.locator(hoverSelector).first().hover();
-            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") {
@@ -974,7 +981,7 @@ This indicates a problem with the menu component's close functionality.`
         }
         if (assertion.assertion === "toBeVisible") {
           try {
-            await (0, test_exports.expect)(target).toBeVisible({ timeout: 3e3 });
+            await (0, test_exports.expect)(target).toBeVisible({ timeout: 2e3 });
             passes.push(`${assertion.target} is visible as expected. Test: "${dynamicTest.description}".`);
           } catch {
             const debugState = await page.evaluate((sel) => {
@@ -988,7 +995,7 @@ This indicates a problem with the menu component's close functionality.`
         }
         if (assertion.assertion === "notToBeVisible") {
           try {
-            await (0, test_exports.expect)(target).toBeHidden({ timeout: 5e3 });
+            await (0, test_exports.expect)(target).toBeHidden({ timeout: 2e3 });
             passes.push(`${assertion.target} is not visible as expected. Test: "${dynamicTest.description}".`);
           } catch {
             const debugState = await page.evaluate((sel) => {
@@ -1090,19 +1097,19 @@ This indicates a problem with the menu component's close functionality.`
       }
     }
   } finally {
-    if (browser) await browser.close();
+    if (page) await page.close();
   }
   return { passes, failures, skipped };
 }
-var import_playwright3, import_fs, import_meta2;
+var import_fs, import_meta2;
 var init_contractTestRunnerPlaywright = __esm({
   "src/utils/test/contract/contractTestRunnerPlaywright.ts"() {
     "use strict";
-    import_playwright3 = require("playwright");
     init_test();
     import_fs = require("fs");
     init_contract();
     init_ContractReporter();
+    init_playwrightTestHarness();
     import_meta2 = {};
   }
 });
@@ -1112,56 +1119,58 @@ async function testUiComponent(componentName, component, url) {
   if (!componentName || typeof componentName !== "string") {
     throw new Error("\u274C testUiComponent requires a valid componentName (string)");
   }
-  if (!component || !(component instanceof HTMLElement)) {
-    throw new Error("\u274C testUiComponent requires a valid component (HTMLElement)");
+  if (!url && (!component || !(component instanceof HTMLElement))) {
+    throw new Error("\u274C testUiComponent requires either a valid component (HTMLElement) or a URL");
   }
   if (url && typeof url !== "string") {
     throw new Error("\u274C testUiComponent url parameter must be a string");
   }
   let results;
-  try {
-    results = await (0, import_jest_axe.axe)(component);
-  } catch (error) {
-    throw new Error(
-      `\u274C Axe accessibility scan failed
+  if (component) {
+    try {
+      results = await (0, import_jest_axe.axe)(component);
+    } catch (error) {
+      throw new Error(
+        `\u274C Axe accessibility scan failed
 Error: ${error instanceof Error ? error.message : String(error)}`
-    );
+      );
+    }
+  } else {
+    results = { violations: [] };
   }
-  async function checkDevServer(testUrl) {
-    const urlsToTry = testUrl ? [testUrl] : [
-      "http://localhost:5173",
-      "http://localhost:3000",
-      "http://localhost:8080",
-      "http://localhost:4173"
-    ];
-    for (const serverUrl of urlsToTry) {
-      try {
-        const response = await fetch(serverUrl, {
-          method: "HEAD",
-          signal: AbortSignal.timeout(1e3)
-        });
-        if (response.ok || response.status === 304) {
-          return serverUrl;
-        }
-      } catch {
-        return null;
+  async function checkDevServer(url2) {
+    try {
+      const response = await fetch(url2, {
+        method: "HEAD",
+        signal: AbortSignal.timeout(1e3)
+      });
+      if (response.ok || response.status === 304) {
+        return url2;
       }
+    } catch {
+      return null;
     }
     return null;
   }
   let contract;
   try {
-    const devServerUrl = await checkDevServer(url);
-    if (devServerUrl) {
-      console.log(`\u{1F3AD} Running Playwright E2E tests on ${devServerUrl}`);
-      const { runContractTestsPlaywright: runContractTestsPlaywright2 } = await Promise.resolve().then(() => (init_contractTestRunnerPlaywright(), contractTestRunnerPlaywright_exports));
-      contract = await runContractTestsPlaywright2(componentName, devServerUrl);
-    } else {
-      console.log(`\u{1F9EA} Running jsdom tests (limited event handling)`);
-      console.log(`\u26A0\uFE0F  No dev server detected. Some tests may be skipped.
-For full coverage start your dev server and provide a URL.
-`);
+    if (url) {
+      const devServerUrl = await checkDevServer(url);
+      if (devServerUrl) {
+        console.log(`\u{1F3AD} Running Playwright tests on ${devServerUrl}`);
+        const { runContractTestsPlaywright: runContractTestsPlaywright2 } = await Promise.resolve().then(() => (init_contractTestRunnerPlaywright(), contractTestRunnerPlaywright_exports));
+        contract = await runContractTestsPlaywright2(componentName, devServerUrl);
+      } else {
+        throw new Error(
+          `\u274C Dev server not running at ${url}
+Please start your dev server and try again.`
+        );
+      }
+    } else if (component) {
+      console.log(`\u{1F3AD} Running component contract tests in JSDOM mode`);
       contract = await runContractTests(componentName, component);
+    } else {
+      throw new Error("\u274C Either component or URL must be provided");
     }
   } catch (error) {
     if (error instanceof Error) {
@@ -1203,12 +1212,16 @@ ${violationDetails}
   }
   return result;
 }
+async function cleanupTests() {
+  await closeSharedBrowser();
+}
 var import_jest_axe, runTest;
 var init_test2 = __esm({
   "src/utils/test/src/test.ts"() {
     "use strict";
     import_jest_axe = require("jest-axe");
     init_contractTestRunner();
+    init_playwrightTestHarness();
     runTest = async () => {
     };
     if (typeof window === "undefined") {
@@ -1239,6 +1252,7 @@ var init_test2 = __esm({
 // src/utils/test/index.ts
 var test_exports2 = {};
 __export(test_exports2, {
+  cleanupTests: () => cleanupTests,
   runTest: () => runTest,
   testUiComponent: () => testUiComponent
 });

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