@motion-proto/live-tokens 0.97.0 → 0.98.2

package/src/testing-js/page-compliance.contract.js

@@ -1,14 +1,26 @@
 import {
-  isInapplicable
-} from "./chunk-3UKGXCDL.js";
+  MOTION_MS,
+  MOTION_URL,
+  TEXT_SPACING_RULE,
+  TEXT_SPACING_URL,
+  newUnderTextSpacing
+} from "./chunk-SHLPDNAQ.js";
+import {
+  missingEngine,
+  recordA11y,
+  scanAxe
+} from "./chunk-EWSGE27V.js";
 import {
   DEFAULT_PAGE_VIEWPORTS,
   PAGES_ENV,
   PAGE_VIEWPORTS_ENV
-} from "./chunk-NB3NZRBM.js";
+} from "./chunk-7CM5D7PF.js";
+import {
+  isInapplicable
+} from "./chunk-YVVR3GJZ.js";
 import {
   allContracts
-} from "./chunk-SHBYZUPD.js";
+} from "./chunk-5HNZHIHG.js";
 
 // src/testing/page-compliance.contract.ts
 import { test } from "@playwright/test";
@@ -258,6 +270,12 @@ var TEXT_STYLES = [
 // src/editor/core/palettes/contrast.ts
 var AA_BODY = 4.5;
 var AA_LARGE = 3;
+var LARGE_TEXT_PX = 24;
+var LARGE_BOLD_PX = 18.66;
+var BOLD = 700;
+function isLargeText(px, weight) {
+  return px >= LARGE_TEXT_PX || px >= LARGE_BOLD_PX && weight >= BOLD;
+}
 function linearizeChannel(v8) {
   const s = v8 / 255;
   return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
@@ -379,9 +397,6 @@ var GRID_TOLERANCE = 1;
 var GRID_VIEWPORT = 768;
 var SETTLE_QUIET_MS = 300;
 var SETTLE_BUDGET_MS = 5e3;
-var LARGE_TEXT_PX = 24;
-var LARGE_BOLD_PX = 18.66;
-var BOLD = 700;
 var cssName = (camel) => camel.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
 function report(failures, scope, describe) {
   const lines = failures.map(describe);
@@ -393,8 +408,7 @@ function hex(rgb) {
   return `#${[r, g, b].map((c) => c.toString(16).padStart(2, "0")).join("")}`;
 }
 function aaFloor(pair) {
-  const large = pair.fontSize >= LARGE_TEXT_PX || pair.fontSize >= LARGE_BOLD_PX && pair.fontWeight >= BOLD;
-  return large ? AA_LARGE : AA_BODY;
+  return isLargeText(pair.fontSize, pair.fontWeight) ? AA_LARGE : AA_BODY;
 }
 function reasons(skipped) {
   return Object.entries(skipped).map(([reason, count]) => `${reason} (${count})`).join(", ");
@@ -411,7 +425,11 @@ var PageHarness = class _PageHarness {
   static async open(page, target, viewport) {
     await installPageProbe(page);
     await page.setViewportSize(viewport);
-    await page.goto(target.route);
+    await _PageHarness.load(page, target.route);
+    return new _PageHarness(page, target, viewport);
+  }
+  static async load(page, route) {
+    await page.goto(route);
     await page.locator(PAGE_CONTAINER).waitFor();
     await page.waitForFunction((selectors) => {
       const container = document.querySelector(selectors.container);
@@ -420,7 +438,6 @@ var PageHarness = class _PageHarness {
     }, { container: PAGE_CONTAINER, chrome: CHROME });
     await page.waitForLoadState("networkidle");
     await _PageHarness.settle(page);
-    return new _PageHarness(page, target, viewport);
   }
   /**
    * Every rule here measures geometry, and the geometry moves for as long as
@@ -868,13 +885,14 @@ var PageHarness = class _PageHarness {
           });
         }
       }
-      const clips = (style) => style.overflowX !== "visible" || style.overflowY !== "visible";
       for (const spec of list) {
         for (const instance of root.querySelectorAll(spec.root)) {
           if (instance.closest(chrome)) continue;
           let clipper = null;
           for (let node = instance.parentElement; node; node = node.parentElement) {
-            if (clips(getComputedStyle(node))) {
+            const overflowX = getComputedStyle(node).overflowX;
+            if (overflowX === "auto" || overflowX === "scroll") break;
+            if (overflowX !== "visible") {
               clipper = node;
               break;
             }
@@ -983,6 +1001,91 @@ var PageHarness = class _PageHarness {
     }
     return null;
   }
+  /**
+   * The accessibility rules return their results. The suite passes them to
+   * `recordA11y`, and the run reports each one at `warn` (decision 3 of
+   * docs/plans/a11y-testing.md).
+   *
+   * axe over the page's own markup. The router's chrome and every shipped
+   * component root stay out, since the component suite answers for what a
+   * component renders, and `color-contrast` stays off, since `page-contrast`
+   * owns page contrast (decision 8).
+   */
+  async scanA11y(componentRoots2) {
+    const results = await scanAxe(this.page, PAGE_CONTAINER, [CHROME, ...componentRoots2], "a11y-page");
+    const lines = await this.page.evaluate(({ targets: targets2, source }) => targets2.map((target) => {
+      try {
+        const element = document.querySelector(target);
+        return element ? window.__liveTokensPageLine(element, source) : 1;
+      } catch {
+        return 1;
+      }
+    }), { targets: results.map((result) => result.target), source: this.target.source });
+    return results.map((result, index) => ({ ...result, line: lines[index] }));
+  }
+  /** The overflow observation again under the SC 1.4.12 override, minus every
+   *  failure the page already has without it, which `page-overflow` reports. */
+  async scanTextSpacing(specs) {
+    const found = await newUnderTextSpacing(
+      this.page,
+      async () => (await this.observeOverflow(specs)).failures,
+      (failure) => `${failure.kind}|${failure.line}|${failure.tag}`
+    );
+    return found.map((failure) => ({
+      rule: "a11y-text-spacing",
+      engineRule: TEXT_SPACING_RULE,
+      impact: null,
+      target: failure.kind === "instance" ? failure.tag : `<${failure.tag}>`,
+      html: "",
+      help: `Under the text spacing override, ${failure.detail}`,
+      helpUrl: TEXT_SPACING_URL,
+      line: failure.line
+    }));
+  }
+  /**
+   * Loads the page again under `prefers-reduced-motion: reduce`, so a script
+   * that reads the preference at mount sees it too, and reports every
+   * animation still running whose run lasts past `MOTION_MS`. The page stays
+   * under the emulation afterwards.
+   */
+  async scanReducedMotion() {
+    await this.page.emulateMedia({ reducedMotion: "reduce" });
+    await _PageHarness.load(this.page, this.target.route);
+    return this.page.evaluate(({ container, chrome, source, limit, url }) => {
+      const root = document.querySelector(container);
+      if (!root) return [];
+      const results = [];
+      const seen = /* @__PURE__ */ new Set();
+      for (const animation of document.getAnimations()) {
+        if (animation.playState !== "running") continue;
+        const effect = animation.effect;
+        if (!(effect instanceof KeyframeEffect) || !effect.target) continue;
+        const element = effect.target;
+        if (!root.contains(element) || element.closest(chrome)) continue;
+        const end = Number(effect.getComputedTiming().endTime ?? 0);
+        if (end <= limit) continue;
+        const name = animation instanceof CSSAnimation ? `The animation ${animation.animationName.replace(/^svelte-[a-z0-9]+-/, "")}` : animation instanceof CSSTransition ? `A transition of ${animation.transitionProperty}` : `A script animation${animation.id ? ` ${animation.id}` : ""}`;
+        const classes = [...element.classList].filter((c) => !/^svelte-[a-z0-9]+$/.test(c));
+        const target = `${element.tagName.toLowerCase()}${classes.map((c) => `.${c}`).join("")}` + (effect.pseudoElement ?? "");
+        if (seen.has(`${target}
+${name}`)) continue;
+        seen.add(`${target}
+${name}`);
+        const html = element.outerHTML;
+        results.push({
+          rule: "a11y-reduced-motion",
+          engineRule: "prefers-reduced-motion",
+          impact: null,
+          target,
+          html: html.slice(0, html.indexOf(">") + 1),
+          help: `${name} keeps running under prefers-reduced-motion: reduce, ` + (Number.isFinite(end) ? `for ${Math.round(end)} ms` : "without end"),
+          helpUrl: url,
+          line: window.__liveTokensPageLine(element, source)
+        });
+      }
+      return results;
+    }, { container: PAGE_CONTAINER, chrome: CHROME, source: this.target.source, limit: MOTION_MS, url: MOTION_URL });
+  }
 };
 async function installPageProbe(page) {
   await page.addInitScript(() => {
@@ -1041,6 +1144,22 @@ for (const target of targets) {
       const inapplicable = await harness.assertOverflow(specs);
       test.skip(inapplicable !== null, inapplicable ?? "");
     });
+    test(`page-a11y | ${target.source} | ${at}`, async ({ page }) => {
+      const missing = await missingEngine(["axe"]);
+      test.skip(missing !== null, missing ?? "");
+      const roots = await componentRoots();
+      const harness = await PageHarness.open(page, target, viewport);
+      recordA11y(await harness.scanA11y(roots));
+    });
+    test(`page-text-spacing | ${target.source} | ${at}`, async ({ page }) => {
+      const specs = await paintSpecs();
+      const harness = await PageHarness.open(page, target, viewport);
+      recordA11y(await harness.scanTextSpacing(specs));
+    });
+    test(`page-reduced-motion | ${target.source} | ${at}`, async ({ page }) => {
+      const harness = await PageHarness.open(page, target, viewport);
+      recordA11y(await harness.scanReducedMotion());
+    });
   }
 }
 //# sourceMappingURL=page-compliance.contract.js.map