aria-ease 5.0.3 → 6.0.1

package/README.md

@@ -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/{dist/src/utils/test/chunk-TUWQNVQJ.js → bin/chunk-7RMRFSJL.js}

@@ -186,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`);
@@ -235,4 +235,53 @@ ${"\u2550".repeat(60)}`);
   }
 };
 
-export { ContractReporter, contract_default };
+// 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,
+  createTestPage,
+  closeSharedBrowser
+};

package/bin/cli.cjs

@@ -468,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`);
@@ -590,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, {
@@ -625,30 +675,33 @@ async function runContractTestsPlaywright(componentName, url) {
   const failures = [];
   const passes = [];
   const skipped = [];
-  let browser = null;
+  let page = null;
   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: 9e5
-    });
-    await page.addStyleTag({ content: `* { transition: none !important; animation: none !important; }` });
+    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.locator(mainSelector).first().waitFor({ state: "attached", timeout: 9e5 });
+    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",
-        timeout: 1e4
+        timeout: 5e3
       }).catch(() => {
         console.warn("Menu trigger not visible, continuing with tests...");
       });
     }
     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,8 +771,8 @@ 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().catch(() => false);
@@ -735,16 +788,16 @@ async function runContractTestsPlaywright(componentName, url) {
             const closeElement = page.locator(closeSelector).first();
             await closeElement.focus();
             await page.keyboard.press("Escape");
-            menuClosed = await (0, test_exports.expect)(popupElement).toBeHidden({ 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();
-            menuClosed = await (0, test_exports.expect)(popupElement).toBeHidden({ 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);
-            menuClosed = await (0, test_exports.expect)(popupElement).toBeHidden({ timeout: 3e3 }).then(() => true).catch(() => false);
+            menuClosed = await (0, test_exports.expect)(popupElement).toBeHidden({ timeout: 2e3 }).then(() => true).catch(() => false);
           }
           if (!menuClosed) {
             throw new Error(
@@ -764,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")) {
@@ -924,7 +994,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) => {
@@ -938,7 +1008,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) => {
@@ -1040,19 +1110,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 = {};
   }
 });
@@ -1062,56 +1132,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) {
@@ -1153,12 +1225,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") {
@@ -1189,6 +1265,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-JNQFZBJA.js");
+  const { runTest } = await import("./test-HH2EW2NM.js");
   runTest();
 });
 program.command("help").description("Display help information").action(() => {

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

@@ -1,15 +1,13 @@
 import {
   ContractReporter,
-  contract_default
-} from "./chunk-TUWQNVQJ.js";
+  contract_default,
+  createTestPage
+} from "./chunk-7RMRFSJL.js";
 import {
   __export,
   __reExport
 } from "./chunk-I2KLQ2HA.js";
 
-// src/utils/test/contract/contractTestRunnerPlaywright.ts
-import { chromium } from "playwright";
-
 // node_modules/@playwright/test/index.mjs
 var test_exports = {};
 __export(test_exports, {
@@ -37,30 +35,33 @@ async function runContractTestsPlaywright(componentName, url) {
   const failures = [];
   const passes = [];
   const skipped = [];
-  let browser = null;
+  let page = null;
   try {
-    browser = await chromium.launch({ headless: true });
-    const context = await browser.newContext();
-    const page = await context.newPage();
-    await page.goto(url, {
-      waitUntil: "domcontentloaded",
-      timeout: 9e5
-    });
-    await page.addStyleTag({ content: `* { transition: none !important; animation: none !important; }` });
+    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.locator(mainSelector).first().waitFor({ state: "attached", timeout: 9e5 });
+    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",
-        timeout: 1e4
+        timeout: 5e3
       }).catch(() => {
         console.warn("Menu trigger not visible, continuing with tests...");
       });
     }
     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":
@@ -130,8 +131,8 @@ 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().catch(() => false);
@@ -147,16 +148,16 @@ async function runContractTestsPlaywright(componentName, url) {
             const closeElement = page.locator(closeSelector).first();
             await closeElement.focus();
             await page.keyboard.press("Escape");
-            menuClosed = await (0, test_exports.expect)(popupElement).toBeHidden({ 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();
-            menuClosed = await (0, test_exports.expect)(popupElement).toBeHidden({ 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);
-            menuClosed = await (0, test_exports.expect)(popupElement).toBeHidden({ timeout: 3e3 }).then(() => true).catch(() => false);
+            menuClosed = await (0, test_exports.expect)(popupElement).toBeHidden({ timeout: 2e3 }).then(() => true).catch(() => false);
           }
           if (!menuClosed) {
             throw new Error(
@@ -176,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")) {
@@ -336,7 +354,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) => {
@@ -350,7 +368,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) => {
@@ -452,7 +470,7 @@ 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 };
 }