@motion-proto/live-tokens 0.96.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);
@@ -311,6 +329,23 @@ function variantPattern(label) {
   const keys = [.../* @__PURE__ */ new Set([words.join("-"), ...words])].map((key) => key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
   return `(?:^|-)(?:${keys.join("|")})$`;
 }
+function stateMarkers(contract) {
+  if (isInapplicable(contract.states)) return [];
+  const markers = [];
+  for (const state of contract.states) {
+    if (restingState(state.state)) continue;
+    const attributes = [];
+    for (const [part, attrs] of Object.entries(state.attributes ?? {})) {
+      const declared = contract.parts[part];
+      if (declared === void 0 || typeof declared !== "string" && declared.portal) continue;
+      const selector = part === contract.root ? null : typeof declared === "string" ? declared : declared.selector;
+      for (const [name, value] of Object.entries(attrs)) attributes.push({ selector, name, value });
+    }
+    if (!state.forceClass && !attributes.some((a) => a.value !== null)) continue;
+    markers.push({ forceClass: state.forceClass ?? null, attributes });
+  }
+  return markers;
+}
 function paintChecks(contract, map) {
   const checks = [];
   for (const [part, properties] of Object.entries(map)) {
@@ -354,7 +389,7 @@ function restingPaintSpec(contract) {
     }
   }
   if (entries.length === 0) return null;
-  return { id: contract.id, root: rootSelector, entries };
+  return { id: contract.id, root: rootSelector, entries, away: stateMarkers(contract) };
 }
 var TEXT_AXES = ["fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing"];
 var BLOCK_DISPLAYS = ["block", "flow-root", "list-item", "flex", "grid", "table-cell", "table-caption"];
@@ -362,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);
@@ -376,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(", ");
@@ -394,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);
@@ -403,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
@@ -523,24 +557,33 @@ var PageHarness = class _PageHarness {
       let asserted = 0;
       const root = document.querySelector(container);
       if (!root) return { instances, asserted, failures, uncovered };
-      const normalize = (node, css, raw) => {
+      const normalize = (node, css, raw, rendered = false) => {
         const probe = document.createElement("div");
-        probe.style.display = "none";
+        if (rendered) {
+          probe.style.visibility = "hidden";
+          probe.style.position = getComputedStyle(node).position;
+        } else probe.style.display = "none";
         probe.style.borderStyle = "solid";
         probe.style.outlineStyle = "solid";
         probe.style.fontSize = getComputedStyle(node).fontSize;
         (node.parentElement ?? document.body).appendChild(probe);
         probe.style.setProperty(css.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`), raw);
-        const computed = getComputedStyle(probe)[css];
+        const computed = (getComputedStyle(probe)[css] ?? "").trim();
         probe.remove();
-        return (computed ?? "").trim();
+        return !rendered && computed.endsWith("%") ? normalize(node, css, raw, true) : computed;
       };
+      const atRest = (element, markers) => !markers.some((marker) => (marker.forceClass === null || element.classList.contains(marker.forceClass)) && marker.attributes.every(({ selector, name, value }) => {
+        const part = selector === null ? element : element.querySelector(selector);
+        if (!part) return false;
+        return value === null ? !part.hasAttribute(name) : part.getAttribute(name) === value;
+      }));
       for (const spec of list) {
         const patterns = spec.entries.map((entry) => entry.pattern === null ? null : new RegExp(entry.pattern));
         const variants = [...new Set(spec.entries.map((entry) => entry.variant).filter((v) => v !== null))];
         for (const element of root.querySelectorAll(spec.root)) {
           if (element.closest(chrome)) continue;
           instances++;
+          if (!atRest(element, spec.away)) continue;
           const classes = [...element.classList];
           const line = window.__liveTokensPageLine(element, source);
           let covered = false;
@@ -842,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;
             }
@@ -957,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(() => {
@@ -1015,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