aria-ease 6.5.1 → 6.6.0

package/README.md

@@ -18,7 +18,7 @@ Aria-Ease isn't a utility library. **It's an accessibility infrastructure** that
 | **🔧 Development** | Component utilities for accessible patterns   | ✅ Available | Build it right from the start           |
 | **⚡ Linting**     | ESLint rules to enforce accessible coding     | 🚧 Roadmap   | Catch mistakes as you type              |
 | **🔍 Pre-Deploy**  | Axe-core powered static accessibility audit   | ✅ Available | Verify before it ships                  |
-| **🧪 Testing**     | WAI-ARIA APG contract testing with Playwright | ✅ Available | 26 combobox assertions in ~4 seconds    |
+| **🧪 Testing**     | WAI-ARIA APG contract testing with Playwright | ✅ Available | 26 combobox assertions in ~2 seconds    |
 | **🚀 CI/CD**       | Accessibility as deployment gatekeeper        | ✅ Available | Block inaccessible code from production |
 | **📊 Production**  | Real user signal monitoring and replay        | 🚧 Roadmap   | Understand how users actually interact  |
 | **📈 Insights**    | Dashboard for reporting and analytics         | 🚧 Roadmap   | Visualize accessibility health          |
@@ -70,11 +70,11 @@ This is the game-changer. We encoded the WAI-ARIA APG into deterministic JSON "c
 
 ```bash
 npx aria-ease test
-# ✓ 26 assertions in ~4 seconds
+# ✓ 26 assertions in ~2 seconds
 # ✓ 26 assertions in ~1 second in CI
 ```
 
-**Why this matters:** Before, verifying a combobox meant manual keyboard testing across browsers. Now, it's automated, fast, and repeatable. You can boast about executing 26 combobox interaction assertions in ~4 seconds.
+**Why this matters:** Before, verifying a combobox meant manual keyboard testing across browsers. Now, it's automated, fast, and repeatable. You can boast about executing 26 combobox interaction assertions in ~2 seconds.
 
 #### 4. **CI/CD Integration** (Available Now)
 
@@ -134,7 +134,7 @@ pnpm add aria-ease
 
 ### Automated Accessibility Audits (CLI)
 
-Run automated accessibility audits on your website with one command:
+Run axe-core powered automated accessibility audits on your website with one command:
 
 ```bash
 npx aria-ease audit --url https://yoursite.com
@@ -754,7 +754,7 @@ For older browser support, use a polyfill service or transpile with appropriate
 
 ---
 
-## � CI/CD Integration: Accessibility as a Deployment Gatekeeper
+## 🚀 CI/CD Integration: Accessibility as a Deployment Gatekeeper
 
 **The game-changer:** Turn accessibility into a deployment invariant. Code that fails accessibility checks cannot reach production.
 
@@ -876,10 +876,14 @@ Create `ariaease.config.js` in your project root:
 ```javascript
 export default {
   audit: {
-    urls: ["http://localhost:5173/", "http://localhost:5173/changelog"],
+    urls: [
+      "http://localhost:5173", // Homepage
+      "http://localhost:5173/docs", // Docs
+      "http://localhost:5173/examples", // Examples
+    ],
     output: {
-      format: "html",
-      out: "./accessibility-reports/audit",
+      format: "all", // Generate JSON, CSV, and HTML reports
+      out: "./accessibility-reports",
     },
   },
 };
@@ -993,11 +997,11 @@ The first time you see that green check mark in your CI/CD pipeline—knowing th
 
 **No one has any excuse to ship inaccessible code anymore.**
 
-You've shifted accessibility left (into development), automated the verification, and made it a deployment gatekeeper. By the time code reaches manual testing, there should only be minute, non-automatable aspects left to verify.
+You've shifted accessibility left (into development), automated the verification, and made it a deployment gatekeeper.
 
 ---
 
-## �📖 More Resources
+## 📖 More Resources
 
 - [Full Documentation](https://ariaease.site/docs)
 - [GitHub Repository](https://github.com/aria-ease/aria-ease)

package/bin/{chunk-AUJAN4RK.js → chunk-LKN5PRYD.js}

@@ -195,11 +195,6 @@ ${"\u2500".repeat(60)}`);
 ${"\u2550".repeat(60)}`);
     this.log(`\u{1F4CA} Summary
 `);
-    const staticIcon = this.staticFailures === 0 ? "\u2705" : "\u274C";
-    const staticStatus = this.staticFailures === 0 ? "PASS" : "FAIL";
-    this.log(`${staticIcon} Static ARIA Tests: ${staticStatus}`);
-    this.log(`   ${this.staticPasses}/${this.staticPasses + this.staticFailures} required attributes present`);
-    this.log("");
     if (totalFailures === 0 && this.skipped === 0 && this.optionalSuggestions === 0) {
       this.log(`\u2705 All ${totalRun} tests passed!`);
       this.log(`   ${this.componentName.charAt(0).toUpperCase()}${this.componentName.slice(1)} component meets WAI-ARIA expectations for Roles, States, Properties, and Keyboard Interactions \u2713`);

package/bin/cli.cjs

@@ -603,11 +603,6 @@ ${"\u2500".repeat(60)}`);
 ${"\u2550".repeat(60)}`);
         this.log(`\u{1F4CA} Summary
 `);
-        const staticIcon = this.staticFailures === 0 ? "\u2705" : "\u274C";
-        const staticStatus = this.staticFailures === 0 ? "PASS" : "FAIL";
-        this.log(`${staticIcon} Static ARIA Tests: ${staticStatus}`);
-        this.log(`   ${this.staticPasses}/${this.staticPasses + this.staticFailures} required attributes present`);
-        this.log("");
         if (totalFailures === 0 && this.skipped === 0 && this.optionalSuggestions === 0) {
           this.log(`\u2705 All ${totalRun} tests passed!`);
           this.log(`   ${this.componentName.charAt(0).toUpperCase()}${this.componentName.slice(1)} component meets WAI-ARIA expectations for Roles, States, Properties, and Keyboard Interactions \u2713`);
@@ -967,29 +962,20 @@ This indicates a problem with the menu component's close functionality.`
         }
       }
       async shouldSkipTest(test, page) {
-        for (const act of test.action) {
-          if (act.type === "keypress" && (act.target === "submenuTrigger" || act.target === "submenu")) {
-            const submenuSelector = this.selectors[act.target];
-            if (submenuSelector) {
-              const submenuCount = await page.locator(submenuSelector).count();
-              if (submenuCount === 0) {
-                return true;
-              }
-            }
-          }
+        const requiresSubmenu = test.action.some(
+          (act) => act.target === "submenu" || act.target === "submenuTrigger" || act.target === "submenuItems"
+        ) || test.assertions.some(
+          (assertion) => assertion.target === "submenu" || assertion.target === "submenuTrigger" || assertion.target === "submenuItems"
+        );
+        if (!requiresSubmenu) {
+          return false;
         }
-        for (const assertion of test.assertions) {
-          if (assertion.target === "submenu" || assertion.target === "submenuTrigger") {
-            const submenuSelector = this.selectors[assertion.target];
-            if (submenuSelector) {
-              const submenuCount = await page.locator(submenuSelector).count();
-              if (submenuCount === 0) {
-                return true;
-              }
-            }
-          }
+        const submenuTriggerSelector = this.selectors.submenuTrigger;
+        if (!submenuTriggerSelector) {
+          return true;
         }
-        return false;
+        const submenuTriggerCount = await page.locator(submenuTriggerSelector).count();
+        return submenuTriggerCount === 0;
       }
       getMainSelector() {
         return this.mainSelector;
@@ -1132,6 +1118,9 @@ var init_ActionExecutor = __esm({
         this.selectors = selectors;
         this.timeoutMs = timeoutMs;
       }
+      isOptionalMenuTarget(target) {
+        return ["submenu", "submenuTrigger", "submenuItems"].includes(target);
+      }
       /**
        * Check if error is due to browser/page being closed
        */
@@ -1252,7 +1241,7 @@ var init_ActionExecutor = __esm({
           } else if (keyValue.includes(" ")) {
             keyValue = keyValue.replace(/ /g, "");
           }
-          if (target === "focusable" && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Escape"].includes(keyValue)) {
+          if (target === "focusable" && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Escape", "Home", "End", "Tab", "Shift+Tab"].includes(keyValue)) {
             await this.page.keyboard.press(keyValue);
             return { success: true };
           }
@@ -1263,9 +1252,10 @@ var init_ActionExecutor = __esm({
           const locator = this.page.locator(selector).first();
           const elementCount = await locator.count();
           if (elementCount === 0) {
+            const optionalMenuTarget = this.isOptionalMenuTarget(target);
             return {
               success: false,
-              error: `${target} element not found (optional submenu test)`,
+              error: optionalMenuTarget ? `${target} element not found (optional submenu test)` : `${target} element not found.`,
               shouldBreak: true
               // Signal to skip this test
             };
@@ -1638,23 +1628,35 @@ This usually means:
       }).catch(() => {
       });
     }
-    const failuresBeforeStatic = failures.length;
+    const hasSubmenuCapability = componentName === "menu" && !!componentContract.selectors.submenuTrigger ? await page.locator(componentContract.selectors.submenuTrigger).count() > 0 : false;
+    let staticFailed = 0;
     const staticAssertionRunner = new AssertionRunner(page, componentContract.selectors, assertionTimeoutMs);
     for (const test of componentContract.static[0]?.assertions || []) {
       if (test.target === "relative") continue;
       const staticDescription = `${test.target}${test.attribute ? ` (${test.attribute})` : ""}`;
+      if (componentName === "menu" && test.target === "submenuTrigger" && !hasSubmenuCapability) {
+        passes.push(`Skipping submenu static assertion for ${test.target}: no submenu capability detected in rendered component.`);
+        reporter.reportStaticTest(staticDescription, true);
+        continue;
+      }
       const targetSelector = componentContract.selectors[test.target];
       if (!targetSelector) {
         const failure = `Selector for target ${test.target} not found.`;
         failures.push(failure);
+        staticFailed += 1;
         reporter.reportStaticTest(staticDescription, false, failure);
         continue;
       }
       const target = page.locator(targetSelector).first();
       const exists = await target.count() > 0;
       if (!exists) {
+        if (test.isOptional === true) {
+          reporter.reportStaticTest(staticDescription, true);
+          continue;
+        }
         const failure = `Target ${test.target} not found.`;
         failures.push(failure);
+        staticFailed += 1;
         reporter.reportStaticTest(staticDescription, false, failure);
         continue;
       }
@@ -1691,6 +1693,7 @@ This usually means:
         if (!hasAny && !allRedundant) {
           const failure = test.failureMessage + ` None of the attributes "${test.attribute}" are present.`;
           failures.push(failure);
+          staticFailed += 1;
           reporter.reportStaticTest(staticDescription, false, failure);
         } else if (!allRedundant && hasAny) {
           passes.push(`At least one of the attributes "${test.attribute}" exists on the element.`);
@@ -1716,6 +1719,7 @@ This usually means:
             reporter.reportStaticTest(staticDescription, true);
           } else if (!result.success && result.failMessage) {
             failures.push(result.failMessage);
+            staticFailed += 1;
             reporter.reportStaticTest(staticDescription, false, result.failMessage);
           }
         }
@@ -1745,9 +1749,12 @@ This usually means:
       }
       const actionExecutor = new ActionExecutor(page, componentContract.selectors, actionTimeoutMs);
       const assertionRunner = new AssertionRunner(page, componentContract.selectors, assertionTimeoutMs);
+      let shouldSkipCurrentTest = false;
+      let shouldAbortCurrentTest = false;
       for (const act of action) {
         if (!page || page.isClosed()) {
           failures.push(`CRITICAL: Browser/page closed during test execution. Remaining actions skipped.`);
+          shouldAbortCurrentTest = true;
           break;
         }
         let result;
@@ -1765,18 +1772,29 @@ This usually means:
           continue;
         }
         if (!result.success) {
-          if (result.error) {
-            failures.push(result.error);
-          }
           if (result.shouldBreak) {
             if (result.error?.includes("optional submenu test")) {
               reporter.reportTest(dynamicTest, "skip", result.error);
+              shouldSkipCurrentTest = true;
+            } else if (result.error) {
+              failures.push(result.error);
+              shouldAbortCurrentTest = true;
             }
             break;
           }
+          if (result.error) {
+            failures.push(result.error);
+          }
           continue;
         }
       }
+      if (shouldSkipCurrentTest) {
+        continue;
+      }
+      if (shouldAbortCurrentTest) {
+        reporter.reportTest(dynamicTest, "fail", failures[failures.length - 1]);
+        continue;
+      }
       for (const assertion of assertions) {
         const result = await assertionRunner.validate(assertion, dynamicTest.description);
         if (result.success && result.passMessage) {
@@ -1796,7 +1814,6 @@ This usually means:
       }
     }
     const staticTotal = componentContract.static[0].assertions.length;
-    const staticFailed = failures.length - failuresBeforeStatic;
     const staticPassed = Math.max(0, staticTotal - staticFailed);
     reporter.reportStatic(staticPassed, staticFailed);
     reporter.summary(failures);

package/bin/cli.js

@@ -237,7 +237,7 @@ program.command("audit").description("Run axe-core powered accessibility audit o
   process.exit(1);
 });
 program.command("test").description("Run core a11y accessibility standard tests on UI components").action(async () => {
-  const { runTest } = await import("./test-C3CMRHSI.js");
+  const { runTest } = await import("./test-LP723IXM.js");
   runTest();
 });
 program.command("help").description("Display help information").action(() => {

package/{dist/contractTestRunnerPlaywright-7F756CFB.js → bin/contractTestRunnerPlaywright-PC6JOYYV.js}

@@ -2,7 +2,7 @@ import {
   ContractReporter,
   contract_default,
   createTestPage
-} from "./chunk-AUJAN4RK.js";
+} from "./chunk-LKN5PRYD.js";
 import {
   __export,
   __reExport
@@ -166,29 +166,20 @@ This indicates a problem with the menu component's close functionality.`
     }
   }
   async shouldSkipTest(test, page) {
-    for (const act of test.action) {
-      if (act.type === "keypress" && (act.target === "submenuTrigger" || act.target === "submenu")) {
-        const submenuSelector = this.selectors[act.target];
-        if (submenuSelector) {
-          const submenuCount = await page.locator(submenuSelector).count();
-          if (submenuCount === 0) {
-            return true;
-          }
-        }
-      }
+    const requiresSubmenu = test.action.some(
+      (act) => act.target === "submenu" || act.target === "submenuTrigger" || act.target === "submenuItems"
+    ) || test.assertions.some(
+      (assertion) => assertion.target === "submenu" || assertion.target === "submenuTrigger" || assertion.target === "submenuItems"
+    );
+    if (!requiresSubmenu) {
+      return false;
     }
-    for (const assertion of test.assertions) {
-      if (assertion.target === "submenu" || assertion.target === "submenuTrigger") {
-        const submenuSelector = this.selectors[assertion.target];
-        if (submenuSelector) {
-          const submenuCount = await page.locator(submenuSelector).count();
-          if (submenuCount === 0) {
-            return true;
-          }
-        }
-      }
+    const submenuTriggerSelector = this.selectors.submenuTrigger;
+    if (!submenuTriggerSelector) {
+      return true;
     }
-    return false;
+    const submenuTriggerCount = await page.locator(submenuTriggerSelector).count();
+    return submenuTriggerCount === 0;
   }
   getMainSelector() {
     return this.mainSelector;
@@ -300,6 +291,9 @@ var ActionExecutor = class {
     this.selectors = selectors;
     this.timeoutMs = timeoutMs;
   }
+  isOptionalMenuTarget(target) {
+    return ["submenu", "submenuTrigger", "submenuItems"].includes(target);
+  }
   /**
    * Check if error is due to browser/page being closed
    */
@@ -420,7 +414,7 @@ var ActionExecutor = class {
       } else if (keyValue.includes(" ")) {
         keyValue = keyValue.replace(/ /g, "");
       }
-      if (target === "focusable" && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Escape"].includes(keyValue)) {
+      if (target === "focusable" && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Escape", "Home", "End", "Tab", "Shift+Tab"].includes(keyValue)) {
         await this.page.keyboard.press(keyValue);
         return { success: true };
       }
@@ -431,9 +425,10 @@ var ActionExecutor = class {
       const locator = this.page.locator(selector).first();
       const elementCount = await locator.count();
       if (elementCount === 0) {
+        const optionalMenuTarget = this.isOptionalMenuTarget(target);
         return {
           success: false,
-          error: `${target} element not found (optional submenu test)`,
+          error: optionalMenuTarget ? `${target} element not found (optional submenu test)` : `${target} element not found.`,
           shouldBreak: true
           // Signal to skip this test
         };
@@ -792,23 +787,35 @@ This usually means:
       }).catch(() => {
       });
     }
-    const failuresBeforeStatic = failures.length;
+    const hasSubmenuCapability = componentName === "menu" && !!componentContract.selectors.submenuTrigger ? await page.locator(componentContract.selectors.submenuTrigger).count() > 0 : false;
+    let staticFailed = 0;
     const staticAssertionRunner = new AssertionRunner(page, componentContract.selectors, assertionTimeoutMs);
     for (const test of componentContract.static[0]?.assertions || []) {
       if (test.target === "relative") continue;
       const staticDescription = `${test.target}${test.attribute ? ` (${test.attribute})` : ""}`;
+      if (componentName === "menu" && test.target === "submenuTrigger" && !hasSubmenuCapability) {
+        passes.push(`Skipping submenu static assertion for ${test.target}: no submenu capability detected in rendered component.`);
+        reporter.reportStaticTest(staticDescription, true);
+        continue;
+      }
       const targetSelector = componentContract.selectors[test.target];
       if (!targetSelector) {
         const failure = `Selector for target ${test.target} not found.`;
         failures.push(failure);
+        staticFailed += 1;
         reporter.reportStaticTest(staticDescription, false, failure);
         continue;
       }
       const target = page.locator(targetSelector).first();
       const exists = await target.count() > 0;
       if (!exists) {
+        if (test.isOptional === true) {
+          reporter.reportStaticTest(staticDescription, true);
+          continue;
+        }
         const failure = `Target ${test.target} not found.`;
         failures.push(failure);
+        staticFailed += 1;
         reporter.reportStaticTest(staticDescription, false, failure);
         continue;
       }
@@ -845,6 +852,7 @@ This usually means:
         if (!hasAny && !allRedundant) {
           const failure = test.failureMessage + ` None of the attributes "${test.attribute}" are present.`;
           failures.push(failure);
+          staticFailed += 1;
           reporter.reportStaticTest(staticDescription, false, failure);
         } else if (!allRedundant && hasAny) {
           passes.push(`At least one of the attributes "${test.attribute}" exists on the element.`);
@@ -870,6 +878,7 @@ This usually means:
             reporter.reportStaticTest(staticDescription, true);
           } else if (!result.success && result.failMessage) {
             failures.push(result.failMessage);
+            staticFailed += 1;
             reporter.reportStaticTest(staticDescription, false, result.failMessage);
           }
         }
@@ -899,9 +908,12 @@ This usually means:
       }
       const actionExecutor = new ActionExecutor(page, componentContract.selectors, actionTimeoutMs);
       const assertionRunner = new AssertionRunner(page, componentContract.selectors, assertionTimeoutMs);
+      let shouldSkipCurrentTest = false;
+      let shouldAbortCurrentTest = false;
       for (const act of action) {
         if (!page || page.isClosed()) {
           failures.push(`CRITICAL: Browser/page closed during test execution. Remaining actions skipped.`);
+          shouldAbortCurrentTest = true;
           break;
         }
         let result;
@@ -919,18 +931,29 @@ This usually means:
           continue;
         }
         if (!result.success) {
-          if (result.error) {
-            failures.push(result.error);
-          }
           if (result.shouldBreak) {
             if (result.error?.includes("optional submenu test")) {
               reporter.reportTest(dynamicTest, "skip", result.error);
+              shouldSkipCurrentTest = true;
+            } else if (result.error) {
+              failures.push(result.error);
+              shouldAbortCurrentTest = true;
             }
             break;
           }
+          if (result.error) {
+            failures.push(result.error);
+          }
           continue;
         }
       }
+      if (shouldSkipCurrentTest) {
+        continue;
+      }
+      if (shouldAbortCurrentTest) {
+        reporter.reportTest(dynamicTest, "fail", failures[failures.length - 1]);
+        continue;
+      }
       for (const assertion of assertions) {
         const result = await assertionRunner.validate(assertion, dynamicTest.description);
         if (result.success && result.passMessage) {
@@ -950,7 +973,6 @@ This usually means:
       }
     }
     const staticTotal = componentContract.static[0].assertions.length;
-    const staticFailed = failures.length - failuresBeforeStatic;
     const staticPassed = Math.max(0, staticTotal - staticFailed);
     reporter.reportStatic(staticPassed, staticFailed);
     reporter.summary(failures);

package/bin/{test-C3CMRHSI.js → test-LP723IXM.js}

@@ -2,7 +2,7 @@ import {
   ContractReporter,
   closeSharedBrowser,
   contract_default
-} from "./chunk-AUJAN4RK.js";
+} from "./chunk-LKN5PRYD.js";
 import "./chunk-I2KLQ2HA.js";
 
 // src/utils/test/src/test.ts
@@ -116,7 +116,7 @@ Error: ${error instanceof Error ? error.message : String(error)}`
       const devServerUrl = await checkDevServer(url);
       if (devServerUrl) {
         console.log(`\u{1F3AD} Running Playwright tests on ${devServerUrl}`);
-        const { runContractTestsPlaywright } = await import("./contractTestRunnerPlaywright-7F756CFB.js");
+        const { runContractTestsPlaywright } = await import("./contractTestRunnerPlaywright-PC6JOYYV.js");
         contract = await runContractTestsPlaywright(componentName, devServerUrl);
       } else {
         throw new Error(

package/dist/{chunk-AUJAN4RK.js → chunk-LKN5PRYD.js}

@@ -195,11 +195,6 @@ ${"\u2500".repeat(60)}`);
 ${"\u2550".repeat(60)}`);
     this.log(`\u{1F4CA} Summary
 `);
-    const staticIcon = this.staticFailures === 0 ? "\u2705" : "\u274C";
-    const staticStatus = this.staticFailures === 0 ? "PASS" : "FAIL";
-    this.log(`${staticIcon} Static ARIA Tests: ${staticStatus}`);
-    this.log(`   ${this.staticPasses}/${this.staticPasses + this.staticFailures} required attributes present`);
-    this.log("");
     if (totalFailures === 0 && this.skipped === 0 && this.optionalSuggestions === 0) {
       this.log(`\u2705 All ${totalRun} tests passed!`);
       this.log(`   ${this.componentName.charAt(0).toUpperCase()}${this.componentName.slice(1)} component meets WAI-ARIA expectations for Roles, States, Properties, and Keyboard Interactions \u2713`);