aria-ease 6.9.1 → 6.11.0

package/dist/src/combobox/index.cjs

@@ -34,16 +34,12 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
   }
   function setActiveDescendant(index) {
     const visibleItems = getVisibleItems();
-    visibleItems.forEach((item) => {
-      item.setAttribute("aria-selected", "false");
-    });
     if (index >= 0 && index < visibleItems.length) {
       const activeItem = visibleItems[index];
       const itemId = activeItem.id || `${listBoxId}-option-${index}`;
       if (!activeItem.id) {
         activeItem.id = itemId;
       }
-      activeItem.setAttribute("aria-selected", "true");
       comboboxInput.setAttribute("aria-activedescendant", itemId);
       if (typeof activeItem.scrollIntoView === "function") {
         activeItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
@@ -76,8 +72,6 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
     comboboxInput.setAttribute("aria-activedescendant", "");
     listBox.style.display = "none";
     activeIndex = -1;
-    const visibleItems = getVisibleItems();
-    visibleItems.forEach((item) => item.setAttribute("aria-selected", "false"));
     if (callback?.onOpenChange) {
       try {
         callback.onOpenChange(false);
@@ -89,6 +83,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
   function selectOption(item) {
     const value = item.textContent?.trim() || "";
     comboboxInput.value = value;
+    item.setAttribute("aria-selected", "true");
     closeListbox();
     if (callback?.onSelect) {
       try {
@@ -135,6 +130,10 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
         } else if (comboboxInput.value) {
           event.preventDefault();
           comboboxInput.value = "";
+          const visibleItems2 = getVisibleItems();
+          visibleItems2.forEach((item) => {
+            if (item.getAttribute("aria-selected") === "true") item.setAttribute("aria-selected", "false");
+          });
           if (callback?.onClear) {
             try {
               callback.onClear();
@@ -213,9 +212,24 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
   function initializeOptions() {
     const items = listBox.querySelectorAll(`.${listBoxItemsClass}`);
     if (items.length === 0) return;
+    let selectedValue = null;
+    for (const item of items) {
+      if (item.getAttribute("aria-selected") === "true") {
+        selectedValue = item.textContent?.trim() || null;
+        break;
+      }
+    }
+    if (!selectedValue && comboboxInput.value) {
+      selectedValue = comboboxInput.value.trim();
+    }
     items.forEach((item, index) => {
       item.setAttribute("role", "option");
-      item.setAttribute("aria-selected", "false");
+      const itemValue = item.textContent?.trim() || "";
+      if (selectedValue && itemValue === selectedValue) {
+        item.setAttribute("aria-selected", "true");
+      } else {
+        item.setAttribute("aria-selected", "false");
+      }
       const currentId = item.getAttribute("id");
       if (!currentId || currentId === "") {
         const itemId = `${listBoxId}-option-${index}`;

package/dist/src/combobox/index.js

@@ -32,16 +32,12 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
   }
   function setActiveDescendant(index) {
     const visibleItems = getVisibleItems();
-    visibleItems.forEach((item) => {
-      item.setAttribute("aria-selected", "false");
-    });
     if (index >= 0 && index < visibleItems.length) {
       const activeItem = visibleItems[index];
       const itemId = activeItem.id || `${listBoxId}-option-${index}`;
       if (!activeItem.id) {
         activeItem.id = itemId;
       }
-      activeItem.setAttribute("aria-selected", "true");
       comboboxInput.setAttribute("aria-activedescendant", itemId);
       if (typeof activeItem.scrollIntoView === "function") {
         activeItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
@@ -74,8 +70,6 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
     comboboxInput.setAttribute("aria-activedescendant", "");
     listBox.style.display = "none";
     activeIndex = -1;
-    const visibleItems = getVisibleItems();
-    visibleItems.forEach((item) => item.setAttribute("aria-selected", "false"));
     if (callback?.onOpenChange) {
       try {
         callback.onOpenChange(false);
@@ -87,6 +81,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
   function selectOption(item) {
     const value = item.textContent?.trim() || "";
     comboboxInput.value = value;
+    item.setAttribute("aria-selected", "true");
     closeListbox();
     if (callback?.onSelect) {
       try {
@@ -133,6 +128,10 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
         } else if (comboboxInput.value) {
           event.preventDefault();
           comboboxInput.value = "";
+          const visibleItems2 = getVisibleItems();
+          visibleItems2.forEach((item) => {
+            if (item.getAttribute("aria-selected") === "true") item.setAttribute("aria-selected", "false");
+          });
           if (callback?.onClear) {
             try {
               callback.onClear();
@@ -211,9 +210,24 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
   function initializeOptions() {
     const items = listBox.querySelectorAll(`.${listBoxItemsClass}`);
     if (items.length === 0) return;
+    let selectedValue = null;
+    for (const item of items) {
+      if (item.getAttribute("aria-selected") === "true") {
+        selectedValue = item.textContent?.trim() || null;
+        break;
+      }
+    }
+    if (!selectedValue && comboboxInput.value) {
+      selectedValue = comboboxInput.value.trim();
+    }
     items.forEach((item, index) => {
       item.setAttribute("role", "option");
-      item.setAttribute("aria-selected", "false");
+      const itemValue = item.textContent?.trim() || "";
+      if (selectedValue && itemValue === selectedValue) {
+        item.setAttribute("aria-selected", "true");
+      } else {
+        item.setAttribute("aria-selected", "false");
+      }
       const currentId = item.getAttribute("id");
       if (!currentId || currentId === "") {
         const itemId = `${listBoxId}-option-${index}`;

package/dist/src/utils/test/{configLoader-YE2CYGDG.js → configLoader-SHJSRG2A.js}

@@ -41,6 +41,23 @@ function validateConfig(config) {
     if (typeof cfg.test !== "object" || cfg.test === null) {
       errors.push("test must be an object");
     } else {
+      if (cfg.test.disableTimeouts !== void 0 && typeof cfg.test.disableTimeouts !== "boolean") {
+        errors.push("test.disableTimeouts must be a boolean when provided");
+      }
+      const testTimeoutFields = [
+        "actionTimeoutMs",
+        "assertionTimeoutMs",
+        "navigationTimeoutMs",
+        "componentReadyTimeoutMs"
+      ];
+      for (const field of testTimeoutFields) {
+        const value = cfg.test[field];
+        if (value !== void 0) {
+          if (typeof value !== "number" || !Number.isFinite(value) || value < 0) {
+            errors.push(`test.${field} must be a non-negative number when provided`);
+          }
+        }
+      }
       if (cfg.test.components !== void 0) {
         if (!Array.isArray(cfg.test.components)) {
           errors.push("test.components must be an array");
@@ -61,6 +78,23 @@ function validateConfig(config) {
               if (comp.strictness !== void 0 && !["minimal", "balanced", "strict", "paranoid"].includes(comp.strictness)) {
                 errors.push(`test.components[${idx}].strictness must be one of: minimal, balanced, strict, paranoid`);
               }
+              if (comp.disableTimeouts !== void 0 && typeof comp.disableTimeouts !== "boolean") {
+                errors.push(`test.components[${idx}].disableTimeouts must be a boolean when provided`);
+              }
+              const componentTimeoutFields = [
+                "actionTimeoutMs",
+                "assertionTimeoutMs",
+                "navigationTimeoutMs",
+                "componentReadyTimeoutMs"
+              ];
+              for (const field of componentTimeoutFields) {
+                const value = comp[field];
+                if (value !== void 0) {
+                  if (typeof value !== "number" || !Number.isFinite(value) || value < 0) {
+                    errors.push(`test.components[${idx}].${field} must be a non-negative number when provided`);
+                  }
+                }
+              }
             }
           });
         }

package/dist/src/utils/test/{contractTestRunnerPlaywright-LC5OAVXB.js → contractTestRunnerPlaywright-Z2AHXSNM.js}

@@ -212,8 +212,41 @@ var ActionExecutor = class {
   /**
    * Execute focus action
    */
-  async focus(target) {
+  /**
+   * Execute focus action (supports absolute, relative, and virtual focus)
+   * @param target - selector key (e.g. "input", "button", "relative", or "virtual")
+   * @param relativeTarget - for relative focus (e.g. "first", "last")
+   * @param virtualId - for virtual focus (aria-activedescendant value)
+   */
+  async focus(target, relativeTarget, virtualId) {
     try {
+      if (target === "virtual" && virtualId) {
+        const inputSelector = this.selectors.input;
+        if (!inputSelector) {
+          return { success: false, error: `Input selector not defined for virtual focus.` };
+        }
+        const input = this.page.locator(inputSelector).first();
+        const exists = await input.count();
+        if (!exists) {
+          return { success: false, error: `Input element not found for virtual focus.` };
+        }
+        await input.evaluate((el, id) => {
+          el.setAttribute("aria-activedescendant", id);
+        }, virtualId);
+        return { success: true };
+      }
+      if (target === "relative" && relativeTarget) {
+        const relativeSelector = this.selectors.relative;
+        if (!relativeSelector) {
+          return { success: false, error: `Relative selector not defined for focus action.` };
+        }
+        const element = await RelativeTargetResolver.resolve(this.page, relativeSelector, relativeTarget);
+        if (!element) {
+          return { success: false, error: `Could not resolve relative target ${relativeTarget} for focus.` };
+        }
+        await element.focus({ timeout: this.timeoutMs });
+        return { success: true };
+      }
       const selector = this.selectors[target];
       if (!selector) {
         return { success: false, error: `Selector for focus target ${target} not found.` };
@@ -404,10 +437,10 @@ var AssertionRunner = class {
   /**
    * Resolve the target element for an assertion
    */
-  async resolveTarget(targetName, relativeTarget) {
+  async resolveTarget(targetName, relativeTarget, selectorKey) {
     try {
       if (targetName === "relative") {
-        const relativeSelector = this.selectors.relative;
+        const relativeSelector = selectorKey ? this.selectors[selectorKey] : this.selectors.relative;
         if (!relativeSelector) {
           return { target: null, error: "Relative selector is not defined in the contract." };
         }
@@ -594,10 +627,30 @@ var AssertionRunner = class {
         failMessage: `CRITICAL: Browser/page closed before completing all tests. Increase test timeout or reduce test complexity.`
       };
     }
-    const { target, error } = await this.resolveTarget(assertion.target, assertion.relativeTarget || assertion.expectedValue);
+    const { target, error } = await this.resolveTarget(
+      assertion.target,
+      assertion.relativeTarget || assertion.expectedValue,
+      assertion.selectorKey
+    );
     if (error || !target) {
       return { success: false, failMessage: error || `Target ${assertion.target} not found.`, target: null };
     }
+    if (assertion.target === "input" && assertion.attribute === "aria-activedescendant" && assertion.expectedValue === "!empty" && assertion.relativeTarget && assertion.selectorKey) {
+      const optionLocator = await RelativeTargetResolver.resolve(this.page, this.selectors[assertion.selectorKey], assertion.relativeTarget);
+      const optionId = optionLocator ? await optionLocator.getAttribute("id") : null;
+      const inputId = await target.getAttribute("aria-activedescendant");
+      if (optionId && inputId === optionId) {
+        return {
+          success: true,
+          passMessage: `input[aria-activedescendant] matches id of ${assertion.relativeTarget}(${assertion.selectorKey}). Test: "${testDescription}".`
+        };
+      } else {
+        return {
+          success: false,
+          failMessage: `input[aria-activedescendant] should match id of ${assertion.relativeTarget}(${assertion.selectorKey}), found "${inputId}".`
+        };
+      }
+    }
     switch (assertion.assertion) {
       case "toBeVisible":
         return this.validateVisibility(target, assertion.target, true, assertion.failureMessage || "", testDescription);
@@ -638,8 +691,43 @@ async function runContractTestsPlaywright(componentName, url, strictness, config
   const componentConfig = config?.test?.components?.find((c) => c.name === componentName);
   const isCustomContract = !!componentConfig?.path;
   const reporter = new ContractReporter(true, isCustomContract);
-  const actionTimeoutMs = 400;
-  const assertionTimeoutMs = 400;
+  const defaultTimeouts = {
+    actionTimeoutMs: 400,
+    assertionTimeoutMs: 400,
+    navigationTimeoutMs: 3e4,
+    componentReadyTimeoutMs: 5e3
+  };
+  const globalDisableTimeouts = config?.test?.disableTimeouts === true;
+  const componentDisableTimeouts = componentConfig?.disableTimeouts === true;
+  const disableTimeouts = componentDisableTimeouts || globalDisableTimeouts;
+  const resolveTimeout = (componentValue, globalValue, fallback) => {
+    if (disableTimeouts) return 0;
+    const value = componentValue ?? globalValue;
+    if (typeof value !== "number" || !Number.isFinite(value) || value < 0) {
+      return fallback;
+    }
+    return value;
+  };
+  const actionTimeoutMs = resolveTimeout(
+    componentConfig?.actionTimeoutMs,
+    config?.test?.actionTimeoutMs,
+    defaultTimeouts.actionTimeoutMs
+  );
+  const assertionTimeoutMs = resolveTimeout(
+    componentConfig?.assertionTimeoutMs,
+    config?.test?.assertionTimeoutMs,
+    defaultTimeouts.assertionTimeoutMs
+  );
+  const navigationTimeoutMs = resolveTimeout(
+    componentConfig?.navigationTimeoutMs,
+    config?.test?.navigationTimeoutMs,
+    defaultTimeouts.navigationTimeoutMs
+  );
+  const componentReadyTimeoutMs = resolveTimeout(
+    componentConfig?.componentReadyTimeoutMs,
+    config?.test?.componentReadyTimeoutMs,
+    defaultTimeouts.componentReadyTimeoutMs
+  );
   const strictnessMode = normalizeStrictness(strictness);
   let contractPath = componentConfig?.path;
   if (!contractPath) {
@@ -697,7 +785,7 @@ async function runContractTestsPlaywright(componentName, url, strictness, config
       try {
         await page.goto(url, {
           waitUntil: "domcontentloaded",
-          timeout: 3e4
+          timeout: navigationTimeoutMs
         });
       } catch (error) {
         throw new Error(
@@ -715,7 +803,7 @@ async function runContractTestsPlaywright(componentName, url, strictness, config
       throw new Error(`CRITICAL: No selector found in contract for ${componentName}`);
     }
     try {
-      await page.locator(mainSelector).first().waitFor({ state: "attached", timeout: 3e4 });
+      await page.locator(mainSelector).first().waitFor({ state: "attached", timeout: componentReadyTimeoutMs });
     } catch (error) {
       throw new Error(
         `
@@ -729,18 +817,26 @@ This usually means:
     }
     reporter.start(componentName, totalTests, apgUrl);
     if (componentName === "menu" && componentContract.selectors.trigger) {
-      await page.locator(componentContract.selectors.trigger).first().waitFor({
-        state: "attached",
-        timeout: 5e3
-      }).catch(() => {
+      await page.locator(componentContract.selectors.trigger).first().waitFor({ state: "attached", timeout: componentReadyTimeoutMs }).catch(() => {
       });
     }
     const hasSubmenuCapability = componentName === "menu" && !!componentContract.selectors.submenuTrigger ? await page.locator(componentContract.selectors.submenuTrigger).count() > 0 : false;
+    const isSubmenuRelation = (rel) => rel.type === "aria-reference" && [rel.from, rel.to].some((name) => ["submenu", "submenuTrigger", "submenuItems"].includes(name || "")) || rel.type === "contains" && [rel.parent, rel.child].some((name) => ["submenu", "submenuTrigger", "submenuItems"].includes(name || ""));
     let staticPassed = 0;
     let staticFailed = 0;
     let staticWarnings = 0;
     for (const rel of componentContract.relationships || []) {
       const relationshipLevel = normalizeLevel(rel.level);
+      if (componentName === "menu" && !hasSubmenuCapability) {
+        const involvesSubmenu = isSubmenuRelation(rel);
+        if (involvesSubmenu) {
+          const relDescription = rel.type === "aria-reference" ? `${rel.from}.${rel.attribute} references ${rel.to}` : `${rel.parent} contains ${rel.child}`;
+          const skipMessage = `Skipping submenu relationship assertion: no submenu capability detected in rendered component.`;
+          skipped.push(skipMessage);
+          reporter.reportStaticTest(relDescription, "skip", skipMessage, relationshipLevel);
+          continue;
+        }
+      }
       if (rel.type === "aria-reference") {
         const relDescription = `${rel.from}.${rel.attribute} references ${rel.to}`;
         const fromSelector = componentContract.selectors[rel.from];
@@ -760,6 +856,12 @@ This usually means:
         const fromExists = await fromTarget.count() > 0;
         const toExists = await toTarget.count() > 0;
         if (!fromExists || !toExists) {
+          if (componentName === "menu" && isSubmenuRelation(rel)) {
+            const skipMessage = "Skipping submenu relationship assertion in static phase: submenu elements are not present until submenu is opened.";
+            skipped.push(skipMessage);
+            reporter.reportStaticTest(relDescription, "skip", skipMessage, relationshipLevel);
+            continue;
+          }
           const outcome = classifyFailure(
             `Relationship target not found: ${!fromExists ? rel.from : rel.to}.`,
             rel.level
@@ -815,6 +917,12 @@ This usually means:
         const parent = page.locator(parentSelector).first();
         const parentExists = await parent.count() > 0;
         if (!parentExists) {
+          if (componentName === "menu" && isSubmenuRelation(rel)) {
+            const skipMessage = "Skipping submenu relationship assertion in static phase: submenu container is not present until submenu is opened.";
+            skipped.push(skipMessage);
+            reporter.reportStaticTest(relDescription, "skip", skipMessage, relationshipLevel);
+            continue;
+          }
           const outcome = classifyFailure(`Relationship parent target not found: ${rel.parent}.`, rel.level);
           if (outcome.status === "fail") staticFailed += 1;
           if (outcome.status === "warn") staticWarnings += 1;
@@ -824,6 +932,12 @@ This usually means:
         const descendants = parent.locator(childSelector);
         const descendantCount = await descendants.count();
         if (descendantCount < 1) {
+          if (componentName === "menu" && isSubmenuRelation(rel)) {
+            const skipMessage = "Skipping submenu relationship assertion in static phase: submenu descendants are not present until submenu is opened.";
+            skipped.push(skipMessage);
+            reporter.reportStaticTest(relDescription, "skip", skipMessage, relationshipLevel);
+            continue;
+          }
           const outcome = classifyFailure(
             `Expected ${rel.parent} to contain descendant matching selector for ${rel.child}.`,
             rel.level
@@ -947,11 +1061,6 @@ This usually means:
         failures.push(`CRITICAL: Browser/page closed before completing all tests. ${componentContract.dynamic.length - componentContract.dynamic.indexOf(dynamicTest)} tests skipped.`);
         break;
       }
-      const { action, assertions } = dynamicTest;
-      const failuresBeforeTest = failures.length;
-      const warningsBeforeTest = warnings.length;
-      const skippedBeforeTest = skipped.length;
-      const dynamicLevel = normalizeLevel(dynamicTest.level);
       try {
         await strategy.resetState(page);
       } catch (error) {
@@ -959,6 +1068,40 @@ This usually means:
         reporter.error(errorMessage);
         throw error;
       }
+      const { setup = [], action, assertions } = dynamicTest;
+      const dynamicLevel = normalizeLevel(dynamicTest.level);
+      const actionExecutor = new ActionExecutor(page, componentContract.selectors, actionTimeoutMs);
+      if (Array.isArray(setup) && setup.length > 0) {
+        for (const setupAct of setup) {
+          let setupResult;
+          if (setupAct.type === "focus") {
+            if (setupAct.target === "relative" && setupAct.relativeTarget) {
+              setupResult = await actionExecutor.focus("relative", setupAct.relativeTarget);
+            } else {
+              setupResult = await actionExecutor.focus(setupAct.target);
+            }
+          } else if (setupAct.type === "type" && setupAct.value) {
+            setupResult = await actionExecutor.type(setupAct.target, setupAct.value);
+          } else if (setupAct.type === "click") {
+            setupResult = await actionExecutor.click(setupAct.target, setupAct.relativeTarget);
+          } else if (setupAct.type === "keypress" && setupAct.key) {
+            setupResult = await actionExecutor.keypress(setupAct.target, setupAct.key);
+          } else if (setupAct.type === "hover") {
+            setupResult = await actionExecutor.hover(setupAct.target, setupAct.relativeTarget);
+          } else {
+            continue;
+          }
+          if (!setupResult.success) {
+            const setupMsg = setupResult.error || "Setup action failed";
+            const outcome = classifyFailure(`Setup failed: ${setupMsg}`, dynamicTest.level);
+            reporter.reportTest({ description: dynamicTest.description, level: dynamicLevel }, outcome.status, outcome.detail);
+            continue;
+          }
+        }
+      }
+      const failuresBeforeTest = failures.length;
+      const warningsBeforeTest = warnings.length;
+      const skippedBeforeTest = skipped.length;
       const shouldSkipTest = await strategy.shouldSkipTest(dynamicTest, page);
       if (shouldSkipTest) {
         const skipMessage = `Skipping test - component-specific conditions not met`;
@@ -966,7 +1109,6 @@ This usually means:
         reporter.reportTest({ description: dynamicTest.description, level: dynamicLevel }, "skip", skipMessage);
         continue;
       }
-      const actionExecutor = new ActionExecutor(page, componentContract.selectors, actionTimeoutMs);
       const assertionRunner = new AssertionRunner(page, componentContract.selectors, assertionTimeoutMs);
       let shouldAbortCurrentTest = false;
       let actionOutcome = null;
@@ -978,7 +1120,11 @@ This usually means:
         }
         let result;
         if (act.type === "focus") {
-          result = await actionExecutor.focus(act.target);
+          if (act.target === "relative" && act.relativeTarget) {
+            result = await actionExecutor.focus("relative", act.relativeTarget);
+          } else {
+            result = await actionExecutor.focus(act.target);
+          }
         } else if (act.type === "type" && act.value) {
           result = await actionExecutor.type(act.target, act.value);
         } else if (act.type === "click") {
@@ -1056,7 +1202,14 @@ This usually means:
 Make sure your dev server is running at ${url}`);
       } else if (error.message.includes("Timeout") && error.message.includes("waitFor")) {
         throw new Error(
-          "\n\u274C CRITICAL: Component not found on page!\nThe component selector could not be found within 30 seconds.\nThis usually means:\n  - The component didn't render\n  - The URL is incorrect\n  - The component selector was not provided to the component utility, or a wrong selector was used\n"
+          `
+\u274C CRITICAL: Component not found on page!
+The component selector could not be found within ${componentReadyTimeoutMs}ms.
+This usually means:
+  - The component didn't render
+  - The URL is incorrect
+  - The component selector was not provided to the component utility, or a wrong selector was used
+`
         );
       } else if (error.message.includes("Target page, context or browser has been closed")) {
         throw new Error(