@motion-proto/live-tokens 0.97.0 → 0.99.0

package/src/testing-js/chunk-RTZQLW3F.js

@@ -0,0 +1,649 @@
+// src/testing/support/traceProperties.ts
+var BOX_SIZE = ["width", "height", "min-*", "inline-size", "block-size", "padding*"];
+var FOCUS = ["focus", "focus-visible"];
+var BORDER_PAINT = ["border-block*", "border-inline*", ...["", "-top", "-right", "-bottom", "-left"].flatMap((side) => [`border${side}`, `border${side}-color`, `border${side}-width`, `border${side}-style`])];
+var MOTION = [
+  "animation",
+  "animation-name",
+  "animation-duration",
+  "animation-delay",
+  "animation-iteration-count",
+  "transition",
+  "transition-property",
+  "transition-duration",
+  "transition-delay"
+];
+var TRACE_AXES = {
+  "color-contrast": {
+    target: ["color", "background*", "opacity", "text-shadow"],
+    pseudoElements: ["*"],
+    ancestors: ["background*", "opacity"]
+  },
+  "SIA-R65": {
+    target: ["outline*", "box-shadow", "border*", "background*", "color", "text-decoration*"],
+    pseudoElements: [],
+    ancestors: [],
+    force: FOCUS
+  },
+  "target-size": { target: BOX_SIZE, pseudoElements: BOX_SIZE, ancestors: [] },
+  "focus-indicator-contrast": {
+    target: ["outline*", "box-shadow", ...BORDER_PAINT, "background*", "color"],
+    pseudoElements: [],
+    ancestors: ["background*"],
+    force: FOCUS
+  },
+  "control-boundary-contrast": {
+    target: [...BORDER_PAINT, "outline", "outline-color", "outline-width", "outline-style", "background*"],
+    pseudoElements: [],
+    ancestors: ["background*"]
+  },
+  // Every element's line height is 1.5 under the override, so the theme's own cannot cause the overflow.
+  "text-spacing": {
+    target: ["height", "max-height", "width", "max-width", "padding*", "overflow*", "white-space"],
+    pseudoElements: [],
+    ancestors: []
+  },
+  // A pseudo-element that does not display does not move, so its display gates the motion, as Button's shimmer does.
+  "prefers-reduced-motion": { target: MOTION, pseudoElements: [...MOTION, "display"], ancestors: [] }
+};
+var sessions = /* @__PURE__ */ new WeakMap();
+function cdpSession(page) {
+  let session = sessions.get(page);
+  if (!session) {
+    session = (async () => {
+      const cdp = await page.context().newCDPSession(page);
+      await cdp.send("DOM.enable");
+      await cdp.send("CSS.enable");
+      return cdp;
+    })();
+    sessions.set(page, session);
+  }
+  return session;
+}
+function onAxis(property, axis) {
+  return axis.some((name) => name.endsWith("*") ? property.startsWith(name.slice(0, -1)) : property === name);
+}
+function authored(style) {
+  return (style?.cssProperties ?? []).filter((declaration) => declaration.text);
+}
+function regularRules(styles) {
+  return (styles.matchedCSSRules ?? []).filter(({ rule }) => rule.origin === "regular").map(({ rule }) => rule);
+}
+function declarations(styles) {
+  return [authored(styles.inlineStyle), ...regularRules(styles).map((rule) => authored(rule.style))].flat();
+}
+function cascadeOrder(styles) {
+  return [...regularRules(styles).flatMap((rule) => authored(rule.style)), ...authored(styles.inlineStyle)];
+}
+function winning(ordered, name) {
+  const all = ordered.filter((d) => d.name === name);
+  return all.filter((d) => d.important || /!\s*important\s*$/i.test(d.value)).at(-1) ?? all.at(-1);
+}
+function ruleKey(rule) {
+  return JSON.stringify([rule.styleSheetId, rule.selectorList.text, rule.style.range]);
+}
+function longhandsIn(page) {
+  return async (names) => new Map(await page.evaluate((names2) => names2.map((name) => {
+    if (name.startsWith("--")) return [name, [name]];
+    const style = document.createElement("div").style;
+    style.setProperty(name, "initial");
+    return [name, style.length ? Array.from({ length: style.length }, (_, i) => style.item(i)) : [name]];
+  }), names));
+}
+async function forcedDeclarations(plain, forced, longhands) {
+  const before = new Set(regularRules(plain).map(ruleKey));
+  const cascade = [
+    ...regularRules(forced).map((rule) => ({ forcedOnly: !before.has(ruleKey(rule)), declarations: authored(rule.style) })),
+    { forcedOnly: false, declarations: authored(forced.inlineStyle) }
+  ];
+  const expanded = await longhands([...new Set(cascade.flatMap((entry) => entry.declarations.map((d) => d.name)))]);
+  const changed = /* @__PURE__ */ new Set();
+  const kept = [];
+  for (const { forcedOnly, declarations: declarations2 } of cascade) {
+    for (const d of declarations2) {
+      const sets = expanded.get(d.name) ?? [d.name];
+      if (forcedOnly) sets.forEach((name) => changed.add(name));
+      if (forcedOnly || sets.some((name) => changed.has(name))) kept.push(d);
+    }
+  }
+  return kept;
+}
+function references(value) {
+  return [...value.matchAll(/var\(\s*(--[\w-]+)/g)].map((match) => match[1]);
+}
+function scopeDepths(page, selector, scope) {
+  return page.evaluate(({ selector: selector2, scope: scope2 }) => [...document.querySelectorAll(selector2)].map((element) => {
+    let depth = 0;
+    for (let node = element; node; node = node.parentElement, depth++) {
+      if (node.matches(scope2)) return depth;
+    }
+    return -1;
+  }), { selector, scope });
+}
+async function matchedStyles(cdp, nodeId, force = [], forceNodeId = nodeId) {
+  const forcePseudoState = (forcedPseudoClasses) => cdp.send("CSS.forcePseudoState", { nodeId: forceNodeId, forcedPseudoClasses });
+  if (force.length === 0) return cdp.send("CSS.getMatchedStylesForNode", { nodeId });
+  await forcePseudoState(force);
+  return cdp.send("CSS.getMatchedStylesForNode", { nodeId }).finally(() => forcePseudoState([]));
+}
+async function traceNode(cdp, node, axes, known, longhands) {
+  const matched = await matchedStyles(cdp, node.nodeId, axes.force, node.forceNodeId);
+  const own = axes.force ? await forcedDeclarations(await matchedStyles(cdp, node.nodeId), matched, longhands) : declarations(matched);
+  const pseudo = (matched.pseudoElements ?? []).flatMap(({ matches }) => declarations({ matchedCSSRules: matches }));
+  const chain = (matched.inherited ?? []).slice(0, node.depth);
+  const PSEUDO = -1;
+  const levels = [cascadeOrder(matched), ...chain.map(cascadeOrder)];
+  const pseudoCustom = pseudo.filter((d) => d.name.startsWith("--"));
+  const from = Math.max(node.ancestorsFrom - 1, 0);
+  const pending = [
+    ...own.filter((d) => onAxis(d.name, axes.target)).map((d) => ({ d, level: 0 })),
+    ...pseudo.filter((d) => onAxis(d.name, axes.pseudoElements)).map((d) => ({ d, level: PSEUDO })),
+    ...chain.slice(from).flatMap((entry, i) => declarations(entry).filter((d) => onAxis(d.name, axes.ancestors)).map((d) => ({ d, level: from + i + 1 })))
+  ].flatMap(({ d, level }) => references(d.value).map((name) => ({ name, level })));
+  const resolve = (name, level) => {
+    if (level === PSEUDO) {
+      const own2 = pseudoCustom.filter((d) => d.name === name);
+      if (own2.length > 0) return { declarations: own2, level: PSEUDO };
+    }
+    for (let at = Math.max(level, 0); at < levels.length; at++) {
+      const won = winning(levels[at], name);
+      if (won) return { declarations: [won], level: at };
+    }
+    return { declarations: [], level };
+  };
+  const found = /* @__PURE__ */ new Set();
+  const followed = /* @__PURE__ */ new Set();
+  for (let next = pending.pop(); next !== void 0; next = pending.pop()) {
+    const { name, level } = next;
+    const key = `${name}@${level}`;
+    if (known.has(name)) found.add(name);
+    else if (!followed.has(key)) {
+      followed.add(key);
+      const resolved = resolve(name, level);
+      for (const d of resolved.declarations) pending.push(...references(d.value).map((ref) => ({ name: ref, level: resolved.level })));
+    }
+  }
+  return [...found];
+}
+async function traceProperties(page, target, axes, known) {
+  let depths;
+  let forceDepths = [];
+  try {
+    depths = await scopeDepths(page, target.selector, target.scope);
+    if (target.forceOn) forceDepths = await scopeDepths(page, target.forceOn, target.scope);
+  } catch {
+    return [];
+  }
+  const cdp = await cdpSession(page);
+  const { root } = await cdp.send("DOM.getDocument", { depth: 0 });
+  const query = async (selector) => (await cdp.send("DOM.querySelectorAll", { nodeId: root.nodeId, selector })).nodeIds;
+  const nodeIds = await query(target.selector);
+  const forceNodeId = target.forceOn ? (await query(target.forceOn)).find((_, index) => forceDepths[index] >= 0) : void 0;
+  if (target.forceOn && forceNodeId === void 0) return [];
+  const longhands = longhandsIn(page);
+  const found = /* @__PURE__ */ new Set();
+  for (const [index, nodeId] of nodeIds.entries()) {
+    if (depths[index] < 0) continue;
+    const node = { nodeId, depth: depths[index], forceNodeId, ancestorsFrom: target.ancestorsFrom ?? 1 };
+    for (const name of await traceNode(cdp, node, axes, known, longhands)) found.add(name);
+  }
+  return [...found].sort();
+}
+
+// src/testing/support/nonTextContrast.ts
+var FOCUS_INDICATOR_RULE = "focus-indicator-contrast";
+var BOUNDARY_RULE = "control-boundary-contrast";
+var NON_TEXT_URL = "https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html";
+var FOCUS_ATTR = "data-lt-focus-probe";
+var NO_TRANSITION_ID = "lt-focus-probe-no-transition";
+var FORCE = ["focus", "focus-visible"];
+var SIBLING_FOCUS_ATTR = "data-lt-focus-sibling";
+function inPage(request) {
+  const scopes = [...document.querySelectorAll("scope" in request && request.scope || ":not(*)")];
+  const excluded = (el) => "exclude" in request && request.exclude.some((selector) => el.closest(selector));
+  const inScope2 = (el) => scopes.some((scope) => scope.contains(el)) && !excluded(el);
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = 1;
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  const paint = (layers) => {
+    ctx.clearRect(0, 0, 1, 1);
+    for (const layer of ["#fff", ...layers]) {
+      ctx.fillStyle = "transparent";
+      ctx.fillStyle = layer;
+      ctx.fillRect(0, 0, 1, 1);
+    }
+    return [...ctx.getImageData(0, 0, 1, 1).data.slice(0, 3)];
+  };
+  const alpha = (color) => {
+    ctx.clearRect(0, 0, 1, 1);
+    ctx.fillStyle = "transparent";
+    ctx.fillStyle = color;
+    ctx.fillRect(0, 0, 1, 1);
+    return ctx.getImageData(0, 0, 1, 1).data[3] / 255;
+  };
+  const rgb = (channels) => `rgb(${channels.join(" ")})`;
+  const luminance = (channels) => {
+    const [r, g, b] = channels.map((c) => {
+      const s = c / 255;
+      return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  };
+  const contrast = (a, b) => {
+    const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (hi + 0.05) / (lo + 0.05);
+  };
+  const selectorFor = (el) => {
+    const count = (selector) => scopes.reduce((n, scope) => n + (scope.matches(selector) ? 1 : 0) + scope.querySelectorAll(selector).length, 0);
+    const own = (e) => e.tagName.toLowerCase() + [...e.classList].filter((name) => !name.startsWith("svelte-") && /^[\w-]+$/.test(name)).map((name) => `.${name}`).join("");
+    const path = [];
+    for (let e = el; e; e = e.parentElement) {
+      const step = own(e);
+      path.unshift(step);
+      if (count(path.join(" > ")) === 1) break;
+      const same = [...e.parentElement?.children ?? []].filter((c) => c.tagName === e.tagName);
+      if (same.length > 1) path[0] = `${step}:nth-of-type(${same.indexOf(e) + 1})`;
+      if (count(path.join(" > ")) === 1 || scopes.includes(e)) break;
+    }
+    return path.join(" > ");
+  };
+  const backdrop = (from, ring) => {
+    const layers = [];
+    let level = 0;
+    let first = -1;
+    for (let e = from; e; e = e.parentElement, level++) {
+      const box = e.getBoundingClientRect();
+      const isScope = scopes.includes(e);
+      const contains = isScope || box.left <= ring.left + 0.5 && box.top <= ring.top + 0.5 && box.right >= ring.right - 0.5 && box.bottom >= ring.bottom - 0.5;
+      if (!contains) continue;
+      if (first < 0) first = level;
+      const style = getComputedStyle(e);
+      if (style.backgroundImage !== "none") return { color: null, first };
+      const a = alpha(style.backgroundColor);
+      if (a > 0) layers.unshift(style.backgroundColor);
+      if (a >= 1) break;
+      if (isScope) {
+        const page = getComputedStyle(document.documentElement).getPropertyValue("--page-bg").trim();
+        if (/gradient|url\(/.test(page)) return { color: null, first };
+        if (page) layers.unshift(page);
+        break;
+      }
+    }
+    return { color: paint(layers), first: Math.max(first, 0) };
+  };
+  const inflate = (box, by) => new DOMRect(box.x - by, box.y - by, box.width + 2 * by, box.height + 2 * by);
+  const px = (value) => parseFloat(value) || 0;
+  const html = (el) => el.outerHTML.replace(/\s+/g, " ").slice(0, 300);
+  const SIDES = ["Top", "Right", "Bottom", "Left"];
+  const visibleSide = (style, side) => {
+    const s = style;
+    return !["none", "hidden"].includes(s[`border${side}Style`]) && px(s[`border${side}Width`]) >= 0.99 ? s[`border${side}Color`] : null;
+  };
+  const candidates = (target) => {
+    const list = [target, ...target.querySelectorAll("*")];
+    for (const sibling of target.parentElement?.children ?? []) {
+      if (sibling !== target) list.push(sibling, ...sibling.querySelectorAll("*"));
+    }
+    return list.filter(inScope2);
+  };
+  const signature = (el) => {
+    const s = getComputedStyle(el);
+    return JSON.stringify([
+      [s.outlineStyle, s.outlineWidth, s.outlineColor, s.outlineOffset],
+      s.boxShadow,
+      SIDES.map((side) => visibleSide(s, side))
+    ]);
+  };
+  const indicatorOf = (el, before) => {
+    const [outlineBefore, shadowBefore, bordersBefore] = JSON.parse(before);
+    const s = getComputedStyle(el);
+    const outline = [s.outlineStyle, s.outlineWidth, s.outlineColor, s.outlineOffset];
+    if (JSON.stringify(outline) !== JSON.stringify(outlineBefore) && s.outlineStyle !== "none" && px(s.outlineWidth) > 0) {
+      if (s.outlineStyle === "auto") return { channel: "browser", color: "", extent: 0 };
+      if (alpha(s.outlineColor) > 0) return { channel: "outline", color: s.outlineColor, extent: px(s.outlineOffset) + px(s.outlineWidth) };
+    }
+    if (s.boxShadow !== shadowBefore && s.boxShadow !== "none") {
+      const shadows = s.boxShadow.split(/,(?![^(]*\))/).map((part) => part.trim());
+      for (const shadow of shadows) {
+        if (/\binset\b/.test(shadow)) continue;
+        const color = /^(?:[a-z-]+\([^)]*\)|#[\da-f]+|[a-z]+)/i.exec(shadow)?.[0] ?? "";
+        if (!color || alpha(color) === 0) continue;
+        const [x = 0, y = 0, blur = 0, spread = 0] = (shadow.slice(color.length).match(/-?[\d.]+px/g) ?? []).map(px);
+        return { channel: "shadow", color, extent: Math.max(Math.abs(x), Math.abs(y)) + blur + spread };
+      }
+    }
+    const borders = SIDES.map((side) => visibleSide(s, side));
+    for (const [i, color] of borders.entries()) {
+      if (color && color !== bordersBefore[i] && alpha(color) > 0) return { channel: "border", color, extent: 0 };
+    }
+    return null;
+  };
+  switch (request.kind) {
+    case "focusables": {
+      const style = document.createElement("style");
+      style.id = request.styleId;
+      style.textContent = "*, *::before, *::after { transition: none !important; }";
+      document.head.append(style);
+      for (const el of document.querySelectorAll(`[${request.marker}]`)) el.removeAttribute(request.marker);
+      const focusable = 'a[href], area[href], button, input:not([type="hidden"]), select, textarea, summary, iframe, [tabindex], [contenteditable]:not([contenteditable="false"])';
+      const found = scopes.flatMap((scope) => [scope, ...scope.querySelectorAll(focusable)]).filter((el, i, all) => all.indexOf(el) === i && el.matches(focusable) && inScope2(el)).filter((el) => el.tabIndex >= 0 && !el.matches(":disabled") && el.checkVisibility({ visibilityProperty: true }));
+      found.forEach((el, i) => el.setAttribute(request.attr, String(i)));
+      return found.length;
+    }
+    case "snapshot": {
+      const target = document.querySelector(`[${request.attr}="${request.index}"]`);
+      return candidates(target).map(signature);
+    }
+    case "measure": {
+      const target = document.querySelector(`[${request.attr}="${request.index}"]`);
+      const list = candidates(target);
+      for (const [i, el] of list.entries()) {
+        if (request.before[i] === void 0 || request.before[i] === signature(el)) continue;
+        const found = indicatorOf(el, request.before[i]);
+        if (!found) continue;
+        if (el !== target && !target.contains(el)) target.setAttribute(request.marker, "");
+        if (found.channel === "browser") return { kind: "browser" };
+        const ring = inflate(el.getBoundingClientRect(), Math.max(found.extent, 0));
+        const behind = backdrop(found.channel === "border" ? el.parentElement : el, found.extent < 0 ? el.getBoundingClientRect() : ring);
+        const offset = found.channel === "border" ? 1 : 0;
+        const common = {
+          channel: found.channel,
+          target: selectorFor(target),
+          indicator: selectorFor(el),
+          html: html(target),
+          ancestorsFrom: behind.first + offset
+        };
+        if (!behind.color) return { kind: "review", ...common };
+        const ratio = contrast(paint([rgb(behind.color), found.color]), behind.color);
+        return ratio < 3 ? { kind: "fail", ratio, ...common } : { kind: "pass" };
+      }
+      return { kind: "none" };
+    }
+    case "cleanup": {
+      document.getElementById(request.styleId)?.remove();
+      for (const el of document.querySelectorAll(`[${request.attr}]`)) el.removeAttribute(request.attr);
+      return null;
+    }
+    case "boundaries": {
+      const outcomes = [];
+      const control = "button, input, select, textarea, [aria-disabled]";
+      const inactive = (el) => {
+        const root = el.closest(request.root) ?? el;
+        const controls = [root, ...root.querySelectorAll(control)].filter((c) => c.matches(control));
+        return controls.length > 0 && controls.every((c) => c.matches(":disabled") || c.getAttribute("aria-disabled") === "true");
+      };
+      for (const part of request.parts) {
+        const elements = scopes.flatMap((scope) => [scope, ...scope.querySelectorAll(part.selector)]).filter((el, i, all) => all.indexOf(el) === i && el.matches(part.selector) && inScope2(el)).filter((el) => !part.when || el.matches(part.when)).filter((el) => el.checkVisibility({ visibilityProperty: true }) && el.getBoundingClientRect().width > 0 && !inactive(el));
+        for (const el of elements) {
+          const style = getComputedStyle(el);
+          const behind = backdrop(el.parentElement, el.getBoundingClientRect());
+          const common = { label: part.label, target: selectorFor(el), html: html(el), ancestorsFrom: behind.first + 1 };
+          if (!behind.color) {
+            outcomes.push({ kind: "review", edge: null, surface: null, ...common });
+            continue;
+          }
+          const surfaceColor = paint([rgb(behind.color), style.backgroundColor]);
+          const surface = style.backgroundImage === "none" ? contrast(surfaceColor, behind.color) : null;
+          const edges = [];
+          const borderUnder = style.backgroundClip === "border-box" ? surfaceColor : behind.color;
+          for (const side of SIDES) {
+            const color = visibleSide(style, side);
+            if (color) edges.push({ channel: "border", color, under: borderUnder });
+          }
+          if (!["none", "auto"].includes(style.outlineStyle) && px(style.outlineWidth) >= 0.99) {
+            edges.push({ channel: "outline", color: style.outlineColor, under: px(style.outlineOffset) < 0 ? surfaceColor : behind.color });
+          }
+          const edge = edges.map(({ channel, color, under }) => ({ channel, ratio: contrast(paint([rgb(under), color]), behind.color) })).reduce((best, next) => best && best.ratio >= next.ratio ? best : next, null);
+          if ((edge?.ratio ?? 0) >= 3 || (surface ?? 0) >= 3) continue;
+          outcomes.push({ kind: surface === null ? "review" : "fail", edge, surface, ...common });
+        }
+      }
+      return outcomes;
+    }
+    case "describe": {
+      return request.values.map((value) => {
+        const el = document.querySelector(`[${request.attr}="${value}"]`);
+        return { target: selectorFor(el), html: html(el) };
+      });
+    }
+  }
+}
+function run(page, request) {
+  return page.evaluate(inPage, request);
+}
+function describeTagged(page, scope, exclude, attr, values) {
+  return run(page, { kind: "describe", scope, exclude, attr, values });
+}
+function ratioText(ratio) {
+  return `${Math.floor(ratio * 100) / 100}:1`;
+}
+async function scanFocusIndicators(page, scope, exclude) {
+  const cdp = await cdpSession(page);
+  const count = await run(page, { kind: "focusables", scope, exclude, attr: FOCUS_ATTR, styleId: NO_TRANSITION_ID, marker: SIBLING_FOCUS_ATTR });
+  const checked = [];
+  try {
+    const { root } = await cdp.send("DOM.getDocument", { depth: 0 });
+    for (let index = 0; index < count; index++) {
+      const { nodeId } = await cdp.send("DOM.querySelector", { nodeId: root.nodeId, selector: `[${FOCUS_ATTR}="${index}"]` });
+      const before = await run(page, { kind: "snapshot", attr: FOCUS_ATTR, index, scope, exclude });
+      await cdp.send("CSS.forcePseudoState", { nodeId, forcedPseudoClasses: FORCE });
+      let outcome;
+      try {
+        outcome = await run(page, { kind: "measure", attr: FOCUS_ATTR, index, scope, exclude, before, marker: SIBLING_FOCUS_ATTR });
+      } finally {
+        await cdp.send("CSS.forcePseudoState", { nodeId, forcedPseudoClasses: [] });
+      }
+      if (outcome.kind !== "fail" && outcome.kind !== "review") continue;
+      const where = outcome.indicator === outcome.target ? "" : ` on ${outcome.indicator}`;
+      checked.push({
+        result: {
+          rule: outcome.kind === "fail" ? "a11y-component" : "a11y-review",
+          engineRule: FOCUS_INDICATOR_RULE,
+          impact: null,
+          target: outcome.target,
+          html: outcome.html,
+          help: outcome.kind === "fail" ? `Focus ${outcome.channel}${where} ${ratioText(outcome.ratio)} against the backdrop, needs 3:1` : `Focus ${outcome.channel}${where} sits over a gradient or image. Check by eye that it contrasts 3:1 with the backdrop`,
+          helpUrl: NON_TEXT_URL
+        },
+        trace: { selector: outcome.indicator, forceOn: outcome.target, ancestorsFrom: outcome.ancestorsFrom }
+      });
+    }
+  } finally {
+    await run(page, { kind: "cleanup", attr: FOCUS_ATTR, styleId: NO_TRANSITION_ID });
+  }
+  return checked;
+}
+async function scanBoundaries(page, scope, exclude, parts, root) {
+  if (parts.length === 0) return [];
+  const outcomes = await run(page, { kind: "boundaries", scope, exclude, parts, root });
+  return outcomes.map((outcome) => {
+    const edge = outcome.edge === null ? "no border" : `${outcome.edge.channel} ${ratioText(outcome.edge.ratio)}`;
+    return {
+      result: {
+        rule: outcome.kind === "fail" ? "a11y-component" : "a11y-review",
+        engineRule: BOUNDARY_RULE,
+        impact: null,
+        target: outcome.target,
+        html: outcome.html,
+        help: outcome.kind === "fail" ? `${outcome.label} ${edge} and surface ${ratioText(outcome.surface)} against the backdrop, needs 3:1` : `${outcome.label} sits on or carries a gradient or image. Check by eye that its edge contrasts 3:1 with the backdrop`,
+        helpUrl: NON_TEXT_URL
+      },
+      trace: { selector: outcome.target, ancestorsFrom: outcome.ancestorsFrom }
+    };
+  });
+}
+
+// src/testing/support/a11y.ts
+import { test } from "@playwright/test";
+var A11Y_ANNOTATION = "a11y";
+var AXE_TAGS = ["wcag2a", "wcag2aa", "wcag21aa", "wcag22aa"];
+var SCOPE_ATTR = "data-lt-a11y-scope";
+var EXCLUDE_ATTR = "data-lt-a11y-exclude";
+var HTML_LIMIT = 300;
+var EngineMissing = class extends Error {
+};
+async function importEngine(packageName, load) {
+  try {
+    return await load();
+  } catch (error) {
+    if (error.code === "ERR_MODULE_NOT_FOUND") throw new EngineMissing(`${packageName} is not installed`);
+    throw error;
+  }
+}
+var axeModules = null;
+async function importAxe() {
+  await importEngine("axe-core", () => import("axe-core"));
+  const { AxeBuilder } = await importEngine("@axe-core/playwright", () => import("@axe-core/playwright"));
+  return { AxeBuilder };
+}
+var loadAxe = () => axeModules ??= importAxe();
+var alfaModules = null;
+async function importAlfa() {
+  const { Audit, Outcome } = await importEngine("@siteimprove/alfa-act", () => import("@siteimprove/alfa-act"));
+  const { Rules } = await importEngine("@siteimprove/alfa-rules", () => import("@siteimprove/alfa-rules"));
+  const { Node } = await importEngine("@siteimprove/alfa-dom", () => import("@siteimprove/alfa-dom"));
+  const { Native: DomNative } = await importEngine("@siteimprove/alfa-dom", () => import("@siteimprove/alfa-dom/native"));
+  const { Device } = await importEngine("@siteimprove/alfa-device", () => import("@siteimprove/alfa-device"));
+  const { Native: DeviceNative } = await importEngine("@siteimprove/alfa-device", () => import("@siteimprove/alfa-device/native"));
+  const { Page: AlfaPage } = await importEngine("@siteimprove/alfa-web", () => import("@siteimprove/alfa-web"));
+  const http = await importEngine("@siteimprove/alfa-http", () => import("@siteimprove/alfa-http"));
+  const { URL } = await importEngine("@siteimprove/alfa-url", () => import("@siteimprove/alfa-url"));
+  return {
+    Audit,
+    Outcome,
+    R65: Rules.get("R65").getUnsafe(),
+    Node,
+    DomNative,
+    Device,
+    DeviceNative,
+    AlfaPage,
+    http,
+    URL
+  };
+}
+var loadAlfa = () => alfaModules ??= importAlfa();
+async function missingEngine(engines) {
+  try {
+    for (const name of engines) await (name === "axe" ? loadAxe() : loadAlfa());
+    return null;
+  } catch (error) {
+    if (error instanceof EngineMissing) return error.message;
+    throw error;
+  }
+}
+function axeResults(rule, results, withReasons) {
+  return results.flatMap(
+    (result) => result.nodes.map((node) => {
+      const reasons = withReasons ? [...new Set([...node.any, ...node.all, ...node.none].map((check) => check.message).filter(Boolean))] : [];
+      return {
+        rule,
+        engineRule: result.id,
+        impact: node.impact ?? result.impact ?? null,
+        target: node.target.map((part) => Array.isArray(part) ? part.join(" >>> ") : String(part)).join(" | "),
+        html: node.html.slice(0, HTML_LIMIT),
+        help: [result.help, ...reasons].join(". "),
+        helpUrl: result.helpUrl
+      };
+    })
+  );
+}
+async function scanAxe(page, scope, exclude, rule, only) {
+  const { AxeBuilder } = await loadAxe();
+  let builder = new AxeBuilder({ page }).include(scope);
+  builder = only ? builder.withRules(only) : builder.withTags(AXE_TAGS);
+  for (const selector of exclude) builder = builder.exclude(selector);
+  if (rule === "a11y-page") builder = builder.disableRules(["color-contrast"]);
+  const result = await builder.analyze();
+  return [
+    ...axeResults(rule, result.violations, false),
+    ...axeResults("a11y-review", result.incomplete, true)
+  ];
+}
+function pruneToScope(node) {
+  if (node.type === "element" && node.attributes?.some((a) => a.name === SCOPE_ATTR)) return true;
+  if (!node.children) return false;
+  if (node.type === "element" && node.name === "head") return true;
+  node.children = node.children.filter((child) => child.type === "type" || pruneToScope(child));
+  return node.type === "document" || node.children.some((child) => child.type === "element");
+}
+var FOCUS_HELP = {
+  failed: "Focusing the element changes nothing visible",
+  cantTell: "Focusing the element changes no style on it, its descendants, or its ancestors"
+};
+async function scanFocusVisible(page, scope, exclude) {
+  const alfa = await loadAlfa();
+  await page.evaluate(({ scope: scope2, exclude: exclude2, scopeAttr, excludeAttr }) => {
+    for (const element of document.querySelectorAll(scope2)) element.setAttribute(scopeAttr, "");
+    for (const selector of exclude2) {
+      for (const element of document.querySelectorAll(selector)) element.setAttribute(excludeAttr, "");
+    }
+  }, { scope, exclude, scopeAttr: SCOPE_ATTR, excludeAttr: EXCLUDE_ATTR });
+  let json;
+  try {
+    const handle = await page.evaluateHandle(() => document);
+    json = await handle.evaluate(alfa.DomNative.fromNode);
+    await handle.dispose();
+  } finally {
+    await page.evaluate((attrs) => {
+      for (const attr of attrs) for (const element of document.querySelectorAll(`[${attr}]`)) element.removeAttribute(attr);
+    }, [SCOPE_ATTR, EXCLUDE_ATTR]);
+  }
+  pruneToScope(json);
+  const fromWindow = alfa.DeviceNative.fromWindow;
+  const device = alfa.Device.from(await page.evaluate(fromWindow));
+  const url = alfa.URL.parse(page.url()).getUnsafe();
+  const { Request, Response, Headers, Header } = alfa.http;
+  const alfaPage = alfa.AlfaPage.of(
+    Request.of("GET", url),
+    Response.of(url, 200, Headers.of([Header.of("Content-Type", "text/html")])),
+    alfa.Node.from(json, device),
+    device
+  );
+  const results = [];
+  for (const outcome of await alfa.Audit.of(alfaPage, [alfa.R65]).evaluate()) {
+    const kind = alfa.Outcome.isFailed(outcome) ? "failed" : alfa.Outcome.isCantTell(outcome) ? "cantTell" : null;
+    if (!kind) continue;
+    const target = outcome.target;
+    if (!inScope(target)) continue;
+    if (kind === "cantTell" && target.attribute?.(SIBLING_FOCUS_ATTR).isSome()) continue;
+    results.push({
+      rule: "a11y-focus-visible",
+      engineRule: "SIA-R65",
+      impact: null,
+      target: elementLabel(target),
+      html: target.toString().replace(/\s+/g, " ").slice(0, HTML_LIMIT),
+      help: FOCUS_HELP[kind],
+      helpUrl: alfa.R65.uri
+    });
+  }
+  return results;
+}
+function inScope(target) {
+  for (const node of target.inclusiveAncestors()) {
+    if (typeof node.attribute !== "function") continue;
+    if (node.attribute(EXCLUDE_ATTR).isSome()) return false;
+    if (node.attribute(SCOPE_ATTR).isSome()) return true;
+  }
+  return false;
+}
+function elementLabel(target) {
+  const id = target.id.isSome() ? `#${target.id.get()}` : "";
+  return `${target.name}${id}${[...target.classes].map((name) => `.${name}`).join("")}`;
+}
+function recordA11y(results) {
+  if (results.length === 0) return;
+  test.info().annotations.push({ type: A11Y_ANNOTATION, description: JSON.stringify(results) });
+}
+
+export {
+  TRACE_AXES,
+  traceProperties,
+  describeTagged,
+  scanFocusIndicators,
+  scanBoundaries,
+  missingEngine,
+  scanAxe,
+  scanFocusVisible,
+  recordA11y
+};
+//# sourceMappingURL=chunk-RTZQLW3F.js.map