aria-ease 2.8.0 → 2.8.2

package/dist/src/utils/test/contractTestRunnerPlaywright-ZY2T4UTV.js

@@ -0,0 +1,249 @@
+import { ContractReporter, contract_default } from './chunk-SSBW5VAA.js';
+import { chromium } from 'playwright';
+import { readFileSync } from 'fs';
+
+async function runContractTestsPlaywright(componentName, url) {
+  const reporter = new ContractReporter(true);
+  const contractTyped = contract_default;
+  const contractPath = contractTyped[componentName]?.path;
+  if (!contractPath) {
+    throw new Error(`Contract path not found for component: ${componentName}`);
+  }
+  const resolvedPath = new URL(contractPath, import.meta.url).pathname;
+  const contractData = readFileSync(resolvedPath, "utf-8");
+  const componentContract = JSON.parse(contractData);
+  const totalTests = componentContract.static[0].assertions.length + componentContract.dynamic.length;
+  reporter.start(componentName, totalTests);
+  const failures = [];
+  const passes = [];
+  let browser = null;
+  try {
+    browser = await chromium.launch({ headless: true });
+    const context = await browser.newContext();
+    const page = await context.newPage();
+    await page.goto(url, { waitUntil: "networkidle" });
+    await page.waitForSelector(componentContract.selectors.trigger, { timeout: 9e4 });
+    async function resolveRelativeTarget(selector, relative) {
+      const items = await page.locator(selector).all();
+      switch (relative) {
+        case "first":
+          return items[0];
+        case "second":
+          return items[1];
+        case "last":
+          return items[items.length - 1];
+        case "next": {
+          const currentIndex = await page.evaluate(([sel]) => {
+            const items2 = Array.from(document.querySelectorAll(sel));
+            return items2.indexOf(document.activeElement);
+          }, [selector]);
+          const nextIndex = (currentIndex + 1) % items.length;
+          return items[nextIndex];
+        }
+        case "previous": {
+          const currentIndex = await page.evaluate(([sel]) => {
+            const items2 = Array.from(document.querySelectorAll(sel));
+            return items2.indexOf(document.activeElement);
+          }, [selector]);
+          const prevIndex = (currentIndex - 1 + items.length) % items.length;
+          return items[prevIndex];
+        }
+        default:
+          return null;
+      }
+    }
+    for (const test of componentContract.static[0]?.assertions || []) {
+      if (test.target === "relative") continue;
+      const targetSelector = componentContract.selectors[test.target];
+      if (!targetSelector) {
+        failures.push(`Selector for target ${test.target} not found.`);
+        continue;
+      }
+      const target = page.locator(targetSelector).first();
+      const exists = await target.count() > 0;
+      if (!exists) {
+        failures.push(`Target ${test.target} not found.`);
+        continue;
+      }
+      if (!test.expectedValue) {
+        const attributes = test.attribute.split(" | ");
+        let hasAny = false;
+        for (const attr of attributes) {
+          const value = await target.getAttribute(attr.trim());
+          if (value !== null) {
+            hasAny = true;
+            break;
+          }
+        }
+        if (!hasAny) {
+          failures.push(test.failureMessage + ` None of the attributes "${test.attribute}" are present.`);
+        } else {
+          passes.push(`At least one of the attributes "${test.attribute}" exists on the element.`);
+        }
+      } else {
+        const attributeValue = await target.getAttribute(test.attribute);
+        const expectedValues = test.expectedValue.split(" | ");
+        if (!attributeValue || !expectedValues.includes(attributeValue)) {
+          failures.push(test.failureMessage + ` Attribute value does not match expected value. Expected: ${test.expectedValue}, Found: ${attributeValue}`);
+        } else {
+          passes.push(`Attribute value matches expected value. Expected: ${test.expectedValue}, Found: ${attributeValue}`);
+        }
+      }
+    }
+    for (const dynamicTest of componentContract.dynamic || []) {
+      const { action, assertions } = dynamicTest;
+      const failuresBeforeTest = failures.length;
+      const containerElement = page.locator(componentContract.selectors.container).first();
+      const triggerElement = page.locator(componentContract.selectors.trigger).first();
+      const isContainerVisible = await containerElement.isVisible();
+      if (isContainerVisible) {
+        await triggerElement.click();
+        await page.waitForTimeout(50);
+      }
+      for (const act of action) {
+        if (act.type === "click") {
+          if (act.target === "document") {
+            await page.mouse.click(10, 10);
+          } else {
+            const actionSelector = componentContract.selectors[act.target];
+            if (!actionSelector) {
+              failures.push(`Selector for action target ${act.target} not found.`);
+              continue;
+            }
+            await page.locator(actionSelector).first().click();
+            await page.waitForTimeout(200);
+          }
+        }
+        if (act.type === "keypress" && act.key) {
+          const keyMap = {
+            "Space": "Space",
+            "Enter": "Enter",
+            "Escape": "Escape",
+            "Arrow Up": "ArrowUp",
+            "Arrow Down": "ArrowDown",
+            "Arrow Left": "ArrowLeft",
+            "Arrow Right": "ArrowRight",
+            "Home": "Home",
+            "End": "End",
+            "Tab": "Tab"
+          };
+          let keyValue = keyMap[act.key] || act.key;
+          if (keyValue === "Space") {
+            keyValue = " ";
+          } else if (keyValue.includes(" ")) {
+            keyValue = keyValue.replace(/ /g, "");
+          }
+          if (act.target === "focusable" && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Escape"].includes(keyValue)) {
+            await page.waitForTimeout(100);
+            await page.keyboard.press(keyValue);
+            await page.waitForTimeout(50);
+          } else {
+            const keypressSelector = componentContract.selectors[act.target];
+            if (!keypressSelector) {
+              failures.push(`Selector for keypress target ${act.target} not found.`);
+              continue;
+            }
+            const target = page.locator(keypressSelector).first();
+            await target.press(keyValue);
+          }
+        }
+        await page.waitForTimeout(100);
+      }
+      for (const assertion of assertions) {
+        let target;
+        if (assertion.target === "relative") {
+          const relativeSelector = componentContract.selectors.relative;
+          if (!relativeSelector) {
+            failures.push("Relative selector is not defined in the contract.");
+            continue;
+          }
+          if (!assertion.expectedValue) {
+            failures.push("Expected value for relative target is not defined.");
+            continue;
+          }
+          target = await resolveRelativeTarget(relativeSelector, assertion.expectedValue);
+        } else {
+          const assertionSelector = componentContract.selectors[assertion.target];
+          if (!assertionSelector) {
+            failures.push(`Selector for assertion target ${assertion.target} not found.`);
+            continue;
+          }
+          target = page.locator(assertionSelector).first();
+        }
+        if (!target) {
+          failures.push(`Target ${assertion.target} not found.`);
+          continue;
+        }
+        if (assertion.assertion === "toBeVisible") {
+          const isVisible = await target.isVisible();
+          if (isVisible) {
+            passes.push(`${assertion.target} is visible as expected. Test: "${dynamicTest.description}".`);
+          } else {
+            failures.push(`${assertion.failureMessage}`);
+          }
+        }
+        if (assertion.assertion === "notToBeVisible") {
+          const isVisible = await target.isVisible();
+          if (!isVisible) {
+            passes.push(`${assertion.target} is not visible as expected. Test: "${dynamicTest.description}".`);
+          } else {
+            failures.push(assertion.failureMessage + ` ${assertion.target} is still visible.`);
+          }
+        }
+        if (assertion.assertion === "toHaveAttribute" && assertion.attribute && assertion.expectedValue) {
+          const attributeValue = await target.getAttribute(assertion.attribute);
+          if (attributeValue === assertion.expectedValue) {
+            passes.push(`${assertion.target} has expected "${assertion.attribute}". Test: "${dynamicTest.description}".`);
+          } else {
+            failures.push(assertion.failureMessage + ` ${assertion.target} "${assertion.attribute}" should be "${assertion.expectedValue}", found "${attributeValue}".`);
+          }
+        }
+        if (assertion.assertion === "toHaveFocus") {
+          const hasFocus = await target.evaluate((el) => el === document.activeElement);
+          if (hasFocus) {
+            passes.push(`${assertion.target} has focus as expected. Test: "${dynamicTest.description}".`);
+          } else {
+            failures.push(`${assertion.failureMessage}`);
+          }
+        }
+        if (assertion.assertion === "toHaveRole" && assertion.expectedValue) {
+          const roleValue = await target.getAttribute("role");
+          if (roleValue === assertion.expectedValue) {
+            passes.push(`${assertion.target} has role "${assertion.expectedValue}". Test: "${dynamicTest.description}".`);
+          } else {
+            failures.push(assertion.failureMessage + ` Expected role "${assertion.expectedValue}", found "${roleValue}".`);
+          }
+        }
+      }
+      const failuresAfterTest = failures.length;
+      const testPassed = failuresAfterTest === failuresBeforeTest;
+      const failureMessage = testPassed ? void 0 : failures[failures.length - 1];
+      reporter.reportTest(dynamicTest, testPassed ? "pass" : "fail", failureMessage);
+    }
+    const staticPassed = componentContract.static[0].assertions.length;
+    const staticFailed = 0;
+    reporter.reportStatic(staticPassed, staticFailed);
+    reporter.summary(failures);
+  } catch (error) {
+    if (error instanceof Error) {
+      if (error.message.includes("Executable doesn't exist")) {
+        console.error("\n\u274C Playwright browsers not found!\n");
+        console.log("\u{1F4E6} Run: npx playwright install chromium\n");
+        failures.push("Playwright browser not installed. Run: npx playwright install chromium");
+      } else if (error.message.includes("net::ERR_CONNECTION_REFUSED")) {
+        console.error("\n\u274C Cannot connect to dev server!\n");
+        console.log(`   Make sure your dev server is running at ${url}
+`);
+        failures.push(`Dev server not running at ${url}`);
+      } else {
+        console.error("\u274C Playwright test error:", error.message);
+        failures.push(`Test error: ${error.message}`);
+      }
+    }
+  } finally {
+    if (browser) await browser.close();
+  }
+  return { passes, failures };
+}
+
+export { runContractTestsPlaywright };

package/dist/src/utils/test/contracts/MenuContract.json

@@ -69,7 +69,7 @@
                 {
                     "target": "container",
                     "assertion": "toBeVisible",
-                    "failureMessage": "Container should be visible after clicking the trigger."
+                    "failureMessage": "Menu should be visible after clicking the trigger."
                 },
                 {
                     "target": "trigger",
@@ -96,7 +96,7 @@
                 {
                     "target": "container",
                     "assertion": "notToBeVisible",
-                    "failureMessage": "Container should not be visible after clicking the trigger twice."
+                    "failureMessage": "Menu should not be visible after clicking the trigger twice."
                 },
                 {
                     "target": "trigger",
@@ -121,7 +121,7 @@
                 {
                     "target": "container",
                     "assertion": "toBeVisible",
-                    "failureMessage": "Container should be visible after pressing Enter on trigger."
+                    "failureMessage": "Menu should be visible after pressing Enter on trigger."
                 },
                 {
                     "target": "trigger",
@@ -147,7 +147,7 @@
                 {
                     "target": "container",
                     "assertion": "toBeVisible",
-                    "failureMessage": "Container should be visible after pressing Space on trigger."
+                    "failureMessage": "Menu should be visible after pressing Space on trigger."
                 },
                 {
                     "target": "trigger",
@@ -240,7 +240,7 @@
                 {
                     "target": "container",
                     "assertion": "notToBeVisible",
-                    "failureMessage": "Container should close after pressing Escape."
+                    "failureMessage": "Menu should close after pressing Escape."
                 },
                 {
                     "target": "trigger",
@@ -266,7 +266,7 @@
                 {
                     "target": "container",
                     "assertion": "notToBeVisible",
-                    "failureMessage": "Container should close after pressing Enter on trigger when menu is open."
+                    "failureMessage": "Menu should close after pressing Enter on trigger when menu is open."
                 },
                 {
                     "target": "trigger",
@@ -287,7 +287,7 @@
                 {
                     "target": "container",
                     "assertion": "notToBeVisible",
-                    "failureMessage": "Container should close after pressing Space on trigger when menu is open."
+                    "failureMessage": "Menu should close after pressing Space on trigger when menu is open."
                 },
                 {
                     "target": "trigger",
@@ -308,7 +308,7 @@
                 {
                     "target": "container",
                     "assertion": "notToBeVisible",
-                    "failureMessage": "Container should close after clicking outside."
+                    "failureMessage": "Menu should close after clicking outside."
                 },
                 {
                     "target": "trigger",
@@ -338,6 +338,50 @@
                     "failureMessage": "Submenu should open when Right arrow pressed on item with submenu"
                 }
             ]
+        },
+        {
+            "description": "Tab on a menuitem closes the menu and update aria-expanded",
+            "requiresBrowser": true,
+            "action": [
+                { "type": "click", "target": "trigger" },
+                { "type": "keypress", "target": "focusable", "key": "Tab" }
+            ],
+            "assertions": [
+                {
+                    "target": "container",
+                    "assertion": "notToBeVisible",
+                    "failureMessage": "Menu should close after clicking outside."
+                },
+                {
+                    "target": "trigger",
+                    "assertion": "toHaveAttribute",
+                    "attribute": "aria-expanded",
+                    "expectedValue": "false",
+                    "failureMessage": "Trigger's aria-expanded should be false after Tab key closes the menu."
+                }
+            ]
+        },
+        {
+            "description": "Shift+Tab on a menuitem closes the menu and update aria-expanded",
+            "requiresBrowser": true,
+            "action": [
+                { "type": "click", "target": "trigger" },
+                { "type": "keypress", "target": "focusable", "key": "Shift+Tab" }
+            ],
+            "assertions": [
+                {
+                    "target": "container",
+                    "assertion": "notToBeVisible",
+                    "failureMessage": "Menu should close after clicking outside."
+                },
+                {
+                    "target": "trigger",
+                    "assertion": "toHaveAttribute",
+                    "attribute": "aria-expanded",
+                    "expectedValue": "false",
+                    "failureMessage": "Trigger's aria-expanded should be false after Shift+Tab key closes the menu."
+                }
+            ]
         }
     ]
 }

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

@@ -9258,7 +9258,7 @@ async function runContractTestsPlaywright(componentName, url) {
     const context = await browser.newContext();
     const page = await context.newPage();
     await page.goto(url, { waitUntil: "networkidle" });
-    await page.waitForSelector(componentContract.selectors.trigger, { timeout: 5e3 });
+    await page.waitForSelector(componentContract.selectors.trigger, { timeout: 3e4 });
     async function resolveRelativeTarget(selector, relative) {
       const items = await page.locator(selector).all();
       switch (relative) {
@@ -13088,5 +13088,3 @@ react-is/cjs/react-is.development.js:
 */
 
 exports.testUiComponent = testUiComponent;
-//# sourceMappingURL=index.cjs.map
-//# sourceMappingURL=index.cjs.map

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

@@ -1,4 +1,4 @@
-import { __commonJS, __toESM, ContractReporter, contract_default } from './chunk-UAS6V5MH.js';
+import { __commonJS, __toESM, ContractReporter, contract_default } from './chunk-SSBW5VAA.js';
 import { axe } from 'jest-axe';
 import fs from 'fs/promises';
 
@@ -12524,7 +12524,7 @@ async function testUiComponent(componentName, component, url) {
   let contract;
   if (url) {
     console.log(`\u{1F3AD} Running Playwright E2E tests on ${url}`);
-    const { runContractTestsPlaywright } = await import('./contractTestRunnerPlaywright-IBC4FHWK.js');
+    const { runContractTestsPlaywright } = await import('./contractTestRunnerPlaywright-YNHMLHQ2.js');
     contract = await runContractTestsPlaywright(componentName, url);
   } else {
     console.log(`\u{1F9EA} Running jsdom tests (limited event handling)`);
@@ -12604,5 +12604,3 @@ react-is/cjs/react-is.development.js:
 */
 
 export { runTest, testUiComponent };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aria-ease",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "description": "Out-of-the-box accessibility utility package to develop production ready applications.",
   "main": "dist/index.cjs",
   "type": "module",
@@ -16,10 +16,10 @@
     "release:patch": "standard-version --release-as patch",
     "release:minor": "standard-version --release-as minor",
     "release:major": "standard-version --release-as major",
-    "build:core": "tsup ./index.ts --format esm,cjs --dts --sourcemap --outDir dist",
-    "build:modules": "tsup ./src/accordion/index.ts ./src/block/index.ts ./src/checkbox/index.ts ./src/menu/index.ts ./src/radio/index.ts ./src/toggle/index.ts --format esm,cjs --dts --treeshake --sourcemap --outDir dist/src",
-    "build:test": "tsup ./src/utils/test/index.ts --format esm,cjs --dts --treeshake --sourcemap --external jest-axe --external @testing-library/react --outDir dist/src/utils/test",
-    "build:cli": "tsup ./bin/cli.ts --format esm,cjs --dts --sourcemap --outDir bin --external commander --external chalk",
+    "build:core": "tsup ./index.ts --format esm,cjs --dts --outDir dist --external jest-axe --external @testing-library/react --external @axe-core/playwright --external playwright",
+    "build:modules": "tsup ./src/accordion/index.ts ./src/block/index.ts ./src/checkbox/index.ts ./src/menu/index.ts ./src/radio/index.ts ./src/toggle/index.ts --format esm,cjs --dts --treeshake --outDir dist/src",
+    "build:test": "tsup ./src/utils/test/index.ts --format esm,cjs --dts --treeshake --external jest-axe --external @testing-library/react --outDir dist/src/utils/test",
+    "build:cli": "tsup ./src/utils/cli/cli.ts --format esm,cjs --dts --outDir bin --external commander --external chalk --external jest-axe --external @testing-library/react --external @axe-core/playwright --external playwright",
     "build:contracts": "mkdir -p ./dist/src/utils/test && cp -r ./src/utils/test/contract/contracts ./dist/src/utils/test/",
     "build": "npm run build:core && npm run build:modules && npm run build:test && npm run build:cli && npm run build:contracts"
   },
@@ -59,7 +59,9 @@
     "tsup": "^8.5.0",
     "typescript": "^5.9.2",
     "vite": "^7.2.6",
-    "vitest": "^4.0.15"
+    "vitest": "^4.0.15",
+    "@testing-library/react": "^16.3.0",
+    "jest-axe": "^10.0.0"
   },
   "sideEffects": false,
   "exports": {
@@ -105,17 +107,16 @@
   },
   "files": [
     "dist",
-    "bin"
+    "README.md",
+    "LICENSE"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "dependencies": {
-    "@axe-core/playwright": "^4.10.2",
-    "@testing-library/react": "^16.3.0",
     "chalk": "^5.6.2",
     "commander": "^14.0.1",
-    "fs-extra": "^11.3.2",
-    "jest-axe": "^10.0.0",
-    "playwright": "^1.55.1",
-    "typescript-eslint": "^8.41.0"
+    "fs-extra": "^11.3.2"
   },
   "peerDependencies": {
     "@axe-core/playwright": "^4.10.2",