automatica11y 0.3.3 → 0.4.1

package/src/run/generate-fixture.js

@@ -0,0 +1,74 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { probeFixture } from "../harness/generate/probe.js";
+
+const firstLine = (error) => (error instanceof Error ? error.message : String(error)).split("\n").find((l) => l.trim()) ?? "unknown error";
+
+/**
+ * Build a fixture for an archetype from what discovery found, and keep it only if it works.
+ * Candidates are bundled (all at once, or one by one if that fails), then probed in the browser in order. The first that
+ * passes wins. Every attempt is recorded, whether or not one wins, so a report can say what was tried.
+ *
+ * @param {{
+ *   browser: import("playwright-core").Browser,
+ *   adapter: import("../frameworks/index.js").Adapter,
+ *   archetype: string,
+ *   entry: { export?: string, tag?: string },
+ *   found: { exports: any[], tags: string[], facts: Record<string, any> },
+ *   pkg: string,
+ *   explicit?: boolean,
+ *   tmp: string,
+ *   workDir: string,
+ *   buildDir: string,
+ *   getServer: () => Promise<{ origin: string }>,
+ *   bundle: (options: any) => Promise<unknown>,
+ * }} input
+ * @returns {Promise<{ ok: boolean, reason: string | null, attempts: Array<{ recipe: string, summary: string, ok: boolean, reason: string | null }>, winner?: { recipe: string, summary: string, used: string[], source: string, file: string, extension: string } }>}
+ */
+export async function generateFixture({ browser, adapter, archetype, entry, found, explicit = false, pkg, tmp, workDir, buildDir, getServer, bundle }) {
+  const { candidates, reason } = adapter.generate({ archetype, pkg, entry, exports: found.exports, facts: found.facts, explicit });
+  if (candidates.length === 0) return { ok: false, reason, attempts: [] };
+
+  const extension = adapter.extension;
+  mkdirSync(join(tmp, "generated"), { recursive: true });
+  mkdirSync(join(tmp, "entries"), { recursive: true });
+  const prepared = candidates.map((candidate, index) => {
+    const name = `gen-${archetype}-${index}`;
+    const file = join(tmp, "generated", `${archetype}-${index}.${extension}`);
+    writeFileSync(file, candidate.source);
+    const entryFile = join(tmp, "entries", `${name}.js`);
+    writeFileSync(entryFile, adapter.entry(file, pkg));
+    return { candidate, name, file, entryFile, bundled: null };
+  });
+
+  // One build for every candidate. If a single bad one breaks it, build them one by one so the rest still get a chance.
+  try {
+    await bundle({ entries: Object.fromEntries(prepared.map((p) => [p.name, p.entryFile])), outdir: buildDir, workDir, framework: adapter });
+    for (const p of prepared) p.bundled = true;
+  } catch {
+    for (const p of prepared) {
+      try {
+        await bundle({ entries: { [p.name]: p.entryFile }, outdir: buildDir, workDir, framework: adapter });
+        p.bundled = true;
+      } catch (error) {
+        p.bundled = firstLine(error);
+      }
+    }
+  }
+
+  const server = await getServer();
+  const attempts = [];
+  for (const p of prepared) {
+    const base = { recipe: p.candidate.id, summary: p.candidate.summary };
+    if (p.bundled !== true) {
+      attempts.push({ ...base, ok: false, reason: `it didn't bundle: ${p.bundled}` });
+      continue;
+    }
+    const probe = await probeFixture(browser, `${server.origin}/${p.name}.html`, archetype);
+    attempts.push({ ...base, ok: probe.ok, reason: probe.reason });
+    if (probe.ok) {
+      return { ok: true, reason: null, attempts, winner: { ...base, used: p.candidate.used, source: p.candidate.source, file: p.file, extension } };
+    }
+  }
+  return { ok: false, reason: `${attempts.length === 1 ? "The one generated fixture didn't work" : `None of the ${attempts.length} generated fixtures worked`}. ${attempts.slice(0, 2).map((a) => `${a.summary}: ${a.reason}`).join("; ")}${attempts.length > 2 ? `; and ${attempts.length - 2} more` : ""}.`, attempts };
+}

package/src/run/run-plan.js

@@ -7,6 +7,7 @@ import { serveStatic } from "../harness/static-serve.js";
 import { listStories, readIndex, selectStories, storyUrl, waitForStory } from "../harness/storybook.js";
 import { closedShadowHosts, notTestableEntries } from "../harness/shadow.js";
 import { COMPUTED_NOT_APPLICABLE_FOR_PAGES } from "../tiers/computed/index.js";
+import { CONDITIONS_NOT_APPLICABLE_FOR_STORIES, runConditions } from "../tiers/conditions/index.js";
 import { NOT_APPLICABLE_FOR_PAGES } from "../tiers/interactions/index.js";
 import { failedVsr, runVsr } from "../tiers/vsr.js";
 import { openPage } from "../harness/url.js";
@@ -17,6 +18,7 @@ import { runRules, selfTest } from "../tiers/rules/index.js";
 import { evaluateFailCheck } from "./fail-check.js";
 import { mapPool } from "./pool.js";
 import { auditNpm } from "./audit-npm.js";
+import { adapterFor } from "../frameworks/index.js";
 import { failedTarget, summarize } from "./summary.js";
 
 /** How many stories to audit at once. */
@@ -24,7 +26,7 @@ const STORY_CONCURRENCY = 4;
 
 const EXIT = { OK: 0, FAIL_THRESHOLD: 1, ENVIRONMENT: 3, ALL_TARGETS_FAILED: 4 };
 
-const NPM_KINDS = new Set(["npm", "npm-react", "npm-wc", "npm-unsupported"]);
+const NPM_KINDS = new Set(["npm", "npm-react", "npm-vue", "npm-wc", "npm-unsupported"]);
 const UNSUPPORTED_KIND = (kind) => `${kind} targets aren't supported.`;
 
 /** Audit one page and return its target result. */
@@ -40,6 +42,9 @@ async function auditPage(browser, url, planTarget, plan, extraWarnings) {
         tiers.interactions = NOT_APPLICABLE_FOR_PAGES;
       } else if (tier === "computed") {
         tiers.computed = COMPUTED_NOT_APPLICABLE_FOR_PAGES;
+      } else if (tier === "conditions") {
+        // Each check opens its own copies of the page, so this runs while the first page is still open.
+        tiers.conditions = await runConditions(browser, url, "page");
       } else {
         tiers.vsr = await runVsr(opened.page, { scope: "body" }).catch(failedVsr);
       }
@@ -76,7 +81,9 @@ async function auditStory(browser, base, story, plan) {
             ? NOT_APPLICABLE_FOR_PAGES
             : tier === "computed"
               ? COMPUTED_NOT_APPLICABLE_FOR_PAGES
-              : await runVsr(opened.page, { scope: "#storybook-root" }).catch(failedVsr);
+              : tier === "conditions"
+                ? CONDITIONS_NOT_APPLICABLE_FOR_STORIES
+                : await runVsr(opened.page, { scope: "#storybook-root" }).catch(failedVsr);
     }
     const hidden = notTestableEntries(await closedShadowHosts(opened.page));
     return { id: story.id, ok: true, archetype: { status: "ran", configs: [{ libA11y: "n/a", tiers }] }, hidden };
@@ -222,14 +229,17 @@ export async function runPlan(plan, io) {
     }
     const targets = [];
     const mappings = {};
+    /** Fixtures the tool generated, by path under the output folder. */
+    const generatedFiles = {};
     for (const planTarget of plan.targets) {
-      const { result, mapping } = await runTarget(browser, planTarget, plan, io);
+      const { result, mapping, files } = await runTarget(browser, planTarget, plan, io);
       targets.push(result);
+      if (files) Object.assign(generatedFiles, files);
       if (mapping) {
         mappings[planTarget.id] = mapping;
         planTarget.mapping = mapping;
       }
-      if (result.npm) planTarget.kind = result.npm.flavor === "react" ? "npm-react" : "npm-wc";
+      if (result.npm) planTarget.kind = adapterFor(result.npm.flavor).kind;
     }
 
     const results = parseResults({
@@ -245,6 +255,11 @@ export async function runPlan(plan, io) {
     mkdirSync(outDir, { recursive: true });
     writeFileSync(resolve(outDir, "results.json"), `${JSON.stringify(results, null, 2)}\n`);
     writeFileSync(resolve(outDir, "report.md"), renderReport({ plan, results }));
+    for (const [relative, text] of Object.entries(generatedFiles)) {
+      const file = resolve(outDir, relative);
+      mkdirSync(dirname(file), { recursive: true });
+      writeFileSync(file, text);
+    }
     if (Object.keys(mappings).length > 0) {
       // The candidate mapping, in the shape --mapping reads, so it can be edited and passed back in.
       writeFileSync(resolve(outDir, "mapping.json"), `${JSON.stringify(mappings, null, 2)}\n`);

package/src/run/summary.js

@@ -37,6 +37,11 @@ export function summarize(archetypes, engines, gaps = []) {
     summary.computed = { pass: 0, fail: 0, undetermined: 0, notApplicable: 0, error: 0 };
     for (const check of measured) summary.computed[check.result === "not-applicable" ? "notApplicable" : check.result] += 1;
   }
+  const adapted = Object.values(archetypes).flatMap((a) => a.configs.flatMap((c) => c.tiers.conditions?.checks ?? []));
+  if (adapted.length) {
+    summary.conditions = { pass: 0, fail: 0, undetermined: 0, notApplicable: 0, error: 0 };
+    for (const check of adapted) summary.conditions[check.result === "not-applicable" ? "notApplicable" : check.result] += 1;
+  }
   const walks = Object.entries(archetypes).flatMap(([name, a]) => a.configs.map((c) => ({ name, vsr: c.tiers.vsr })).filter((x) => x.vsr?.status === "ran"));
   if (walks.length) {
     summary.vsr = { walks: walks.length, flagged: walks.reduce((n, w) => n + w.vsr.flags.length, 0) };

package/src/schema.js

@@ -2,20 +2,20 @@ import * as v from "valibot";
 
 export const WCAG_VERSIONS = ["2.0", "2.1", "2.2"];
 export const LEVELS = ["A", "AA", "AAA"];
-export const TIERS = ["rules", "interactions", "computed", "vsr"];
+export const TIERS = ["rules", "interactions", "computed", "conditions", "vsr"];
 export const ENGINES = ["axe", "ibm"];
 export const LIB_A11Y = ["on", "off"];
 export const IMPACTS = ["minor", "moderate", "serious", "critical"];
 export const TOOLKIT_LEVELS = [1, 2, 3];
 export const FAIL_MODES = ["any", "all"];
-export const ARCHETYPES = ["button", "link", "dialog", "menu", "tabs", "combobox", "form-field", "accordion", "tooltip", "chart"];
-export const FLAVORS = ["react", "wc"];
-export const MAPPING_STATUSES = ["template", "authored", "needs-fixture", "no-match"];
+export const ARCHETYPES = ["button", "link", "dialog", "menu", "tabs", "combobox", "form-field", "accordion", "tooltip", "live-region", "chart"];
+export const FLAVORS = ["react", "vue", "wc"];
+export const MAPPING_STATUSES = ["template", "authored", "generated", "needs-fixture", "no-match"];
 
 /** What a candidate mapping says about one archetype of one npm target. */
 export const MappingEntrySchema = v.object({
   flavor: v.optional(v.picklist(FLAVORS)),
-  /** Export name (React) the fixture or template uses. */
+  /** Export name (React or Vue) the fixture or template uses. */
   export: v.optional(v.string()),
   /** Custom element tag (web components) the fixture or template uses. */
   tag: v.optional(v.string()),
@@ -23,7 +23,14 @@ export const MappingEntrySchema = v.object({
   fixture: v.optional(v.nullable(v.string())),
   /** The library ships opt-in accessibility features. The fixture gets `libA11y` (true or false) and `--lib-a11y` runs it both ways. */
   libA11y: v.optional(v.boolean()),
+  /** Other packages to install beside the target, such as the token stylesheet or theme the library asks for. A fixture can then import them. */
+  install: v.optional(v.array(v.string())),
   status: v.optional(v.picklist(MAPPING_STATUSES)),
+  /** For a generated fixture: which recipe worked, what it was, which parts it used, and where its source was written. */
+  recipe: v.optional(v.string()),
+  summary: v.optional(v.string()),
+  used: v.optional(v.array(v.string())),
+  generatedFile: v.optional(v.string()),
   candidates: v.optional(v.array(v.string())),
   parts: v.optional(v.array(v.string())),
   reason: v.optional(v.string()),
@@ -42,7 +49,7 @@ export function parseMappingFile(input) {
   return result.output;
 }
 
-export const TARGET_KINDS = ["npm", "npm-react", "npm-wc", "npm-unsupported", "npm-non-ui", "storybook", "url", "html-file", "static-dir"];
+export const TARGET_KINDS = ["npm", "npm-react", "npm-vue", "npm-wc", "npm-unsupported", "npm-non-ui", "storybook", "url", "html-file", "static-dir"];
 
 const nullableString = v.nullable(v.string());
 
@@ -77,6 +84,8 @@ export const PlanSchema = v.object({
     archetypes: v.nullable(v.array(v.picklist(ARCHETYPES))),
     mapping: nullableString,
     maxStories: v.pipe(v.number(), v.integer(), v.minValue(1)),
+    /** Build fixtures from a package's parts when none is authored. A plan saved before this existed generates. */
+    generate: v.optional(v.boolean(), true),
     out: v.string(),
     fail: v.nullable(FailConfigSchema),
   }),
@@ -200,6 +209,17 @@ export const TargetResultSchema = v.object({
     v.object({
       status: v.picklist(["ran", "gap"]),
       reason: v.optional(v.nullable(v.string())),
+      /** Where the fixture came from, and for a generated one what was tried. */
+      fixture: v.optional(
+        v.object({
+          source: v.picklist(["template", "authored", "generated", "none"]),
+          recipe: v.optional(v.string()),
+          summary: v.optional(v.string()),
+          used: v.optional(v.array(v.string())),
+          file: v.optional(v.nullable(v.string())),
+          attempts: v.optional(v.array(v.object({ recipe: v.string(), summary: v.string(), ok: v.boolean(), reason: v.nullable(v.string()) }))),
+        }),
+      ),
       configs: v.array(v.object({ libA11y: v.picklist(["on", "off", "n/a"]), state: v.optional(v.string()), tiers: v.record(v.string(), TierResultSchema) })),
     }),
   ),
@@ -207,11 +227,14 @@ export const TargetResultSchema = v.object({
   npm: v.optional(
     v.object({
       name: v.string(),
+      /** The sub-path of the package that was tested, such as `button/v2`, or null for the package itself. */
+      subpath: v.optional(nullableString),
       version: nullableString,
       flavor: v.picklist(FLAVORS),
       framework: nullableString,
       react: nullableString,
       reactDom: nullableString,
+      vue: v.optional(nullableString),
       tags: v.array(v.string()),
     }),
   ),
@@ -221,6 +244,7 @@ export const TargetResultSchema = v.object({
     notTestable: v.array(v.string()),
     interactions: v.optional(v.object({ pass: v.number(), fail: v.number(), notApplicable: v.number(), error: v.number() })),
     computed: v.optional(v.object({ pass: v.number(), fail: v.number(), undetermined: v.number(), notApplicable: v.number(), error: v.number() })),
+    conditions: v.optional(v.object({ pass: v.number(), fail: v.number(), undetermined: v.number(), notApplicable: v.number(), error: v.number() })),
     vsr: v.optional(v.object({ walks: v.number(), flagged: v.number() })),
   }),
   warnings: v.array(v.string()),

package/src/tiers/computed/checks.js

@@ -5,8 +5,9 @@
  * It's a gap and never a pass.
  * These are automatica11y's own measurements. They're reported on their own and never added to axe-core or IBM counts.
  */
+import { num } from "../../text.js";
 import { criterionRef } from "../../wcag/index.js";
-import { contrastOver, contrastRatio, formatRatio, textThreshold } from "./color.js";
+import { contrastOver, contrastRatio, formatRatio, ringIsEnough, textThreshold } from "./color.js";
 
 const pass = (detail, extra = {}) => ({ result: "pass", detail, ...extra });
 const fail = (detail, extra = {}) => ({ result: "fail", detail, ...extra });
@@ -67,7 +68,7 @@ const TEXT_CONTRAST = {
     const skipped = reached === null ? " The trigger couldn't be reached with Tab, so keyboard focus wasn't measured." : "";
     if (failed.length) {
       const f = failed[0];
-      const more = failed.length > 1 ? ` ${failed.length - 1} more measurement${failed.length > 2 ? "s are" : " is"} below its threshold.` : "";
+      const more = failed.length > 1 ? ` ${num(failed.length - 1)} more measurement${failed.length > 2 ? "s are" : " is"} below its threshold.` : "";
       return fail(`In ${f.state}, "${f.text}" has ${formatRatio(f.ratio)} against its background and needs ${f.required}:1.${more} ${list}${skipped}`, { measurements });
     }
     if (unknown.length || reached === null) {
@@ -150,9 +151,47 @@ const FOCUS_CONTRAST = {
     if (px.changed === 0) return na("Nothing visible changed on focus, so there's no indicator to measure. The interactions tier reports that as a failure.");
     const perimeter = 2 * (rest.box.width + rest.box.height);
     const measurements = [{ changedPixels: px.changed, pixelsAtLeast3to1: px.strong, strongestChange: floor2(px.max), perimeterPixels: Math.round(perimeter) }];
-    const detail = `${px.strong} of ${px.changed} changed pixels reach 3:1 against their unfocused color, and the strongest change is ${formatRatio(px.max)}. A ring around this control needs about ${Math.round(perimeter)}.`;
-    return px.strong >= perimeter ? pass(detail, { method: "pixels", measurements }) : fail(detail, { method: "pixels", measurements });
+    const detail = `${num(px.strong)} of ${num(px.changed)} changed pixels reach 3:1 against their unfocused color, and the strongest change is ${formatRatio(px.max)}. Enough to count is about half the control's perimeter, ${Math.round(perimeter / 2)}.`;
+    return ringIsEnough(px.strong, perimeter) ? pass(detail, { method: "pixels", measurements }) : fail(detail, { method: "pixels", measurements });
   },
 };
 
-export const COMPUTED_CHECKS = [TEXT_CONTRAST, BOUNDARY_CONTRAST, FOCUS_CONTRAST];
+/**
+ * For a live region, the trigger is only a button that makes the message appear, so the message is what gets measured:
+ * the text that appears after the trigger is activated, in its resting state.
+ */
+const MESSAGE_TEXT_CONTRAST = {
+  name: "message-text-contrast",
+  criteria: ["1.4.3"],
+  async run(ctx) {
+    await parkPointer(ctx);
+    const before = (await ctx.page.evaluate(() => window.__a11yMeasure.text("page"))) ?? [];
+    await ctx.focus();
+    await ctx.press("Enter");
+    await ctx.settle(SETTLE_MS);
+    const after = (await ctx.page.evaluate(() => window.__a11yMeasure.text("page"))) ?? [];
+    const known = new Set(before.map((p) => p.key));
+    const fresh = after.filter((p) => !known.has(p.key));
+    if (fresh.length === 0) return na("No new visible text appeared when the trigger was activated, so there's no message text to measure.");
+    const rows = [];
+    const unknown = [];
+    for (const part of fresh) {
+      if (part.undetermined || !part.backdrop) unknown.push(`"${part.text}" can't be measured because ${part.undetermined ?? "its background couldn't be read"}.`);
+      else rows.push({ text: part.text, ratio: contrastOver(part.color, part.backdrop), required: textThreshold(part.size, part.weight) });
+    }
+    const measurements = rows.map((r) => ({ text: r.text, ratio: floor2(r.ratio), required: r.required }));
+    const failed = rows.filter((r) => r.ratio < r.required).sort((a, b) => a.ratio / a.required - b.ratio / b.required);
+    if (failed.length) return fail(`The message text "${failed[0].text}" has ${formatRatio(failed[0].ratio)} against its background and needs ${failed[0].required}:1.`, { measurements });
+    if (unknown.length) return undetermined(`${rows.length ? `The lowest measured is ${formatRatio(Math.min(...rows.map((r) => r.ratio)))}. ` : ""}${unknown[0]}`, { measurements });
+    const lowest = rows.reduce((a, b) => (b.ratio / b.required < a.ratio / a.required ? b : a));
+    return pass(`The message text "${lowest.text}" has ${formatRatio(lowest.ratio)} against its background (needs ${lowest.required}:1).`, { measurements });
+  },
+};
+
+/** The checks that apply to an archetype. */
+export function computedChecksFor(archetype) {
+  return archetype === "live-region" ? [MESSAGE_TEXT_CONTRAST] : [TEXT_CONTRAST, BOUNDARY_CONTRAST, FOCUS_CONTRAST];
+}
+
+/** Every computed check, for tests and docs. */
+export const COMPUTED_CHECKS = [TEXT_CONTRAST, BOUNDARY_CONTRAST, FOCUS_CONTRAST, MESSAGE_TEXT_CONTRAST];

package/src/tiers/computed/color.js

@@ -34,6 +34,14 @@ export function textThreshold(sizePx, weight) {
   return sizePx >= 24 || (sizePx >= 18.66 && Number(weight) >= 700) ? 3 : 4.5;
 }
 
+/**
+ * Is a focus change big enough to count as an indicator? Pixels that change by 3:1 or more have to cover at least half the
+ * control's perimeter: a ring or underline a person can't miss, even with anti-aliased edges and rounded corners.
+ */
+export function ringIsEnough(strongPixels, perimeter) {
+  return strongPixels >= perimeter / 2;
+}
+
 /** "4.52:1". The ratio is cut down, never rounded up, so 2.999 never reads as 3. */
 export function formatRatio(ratio) {
   return `${(Math.floor(ratio * 100) / 100).toFixed(2).replace(/\.?0+$/, "")}:1`;

package/src/tiers/computed/index.js

@@ -1,6 +1,6 @@
 import { installHelpers } from "../interactions/helpers.js";
 import { runCheck } from "../interactions/index.js";
-import { COMPUTED_CHECKS } from "./checks.js";
+import { computedChecksFor } from "./checks.js";
 import { installMeasure } from "./measure-kit.js";
 
 /**
@@ -14,7 +14,7 @@ import { installMeasure } from "./measure-kit.js";
 export async function runComputed(browser, url, archetype) {
   if (archetype === "chart") return { status: "not-applicable", reason: "The chart archetype has no trigger to measure." };
   const results = [];
-  for (const check of COMPUTED_CHECKS) results.push(await runCheck(browser, url, check, { kits: [installHelpers, installMeasure] }));
+  for (const check of computedChecksFor(archetype)) results.push(await runCheck(browser, url, check, { kits: [installHelpers, installMeasure] }));
   return { status: "ran", checks: results };
 }
 

package/src/tiers/computed/measure-kit.js

@@ -88,22 +88,36 @@ export function installMeasure() {
     return { inset: /\binset\b/.test(text), x: x ?? 0, y: y ?? 0, blur: blur ?? 0, spread: spread ?? 0, color: color ? rgba(color[0]) : null };
   };
 
+  const keys = new WeakMap();
+  let keyCounter = 0;
+
   window.__a11yMeasure = {
     rgba,
-    /** The text inside the trigger: each element that directly holds text, with its color, size, and backdrop. */
-    text() {
+    /**
+     * The text inside the trigger (or, with "page", anywhere on the page except the trigger): each piece of text with its
+     * color, size, and backdrop. Slotted text takes its style from the slot's parent in the flattened tree, and text that is
+     * visually hidden (a one-pixel screen reader copy) is left out. `key` lets a later call tell which text is new.
+     */
+    text(scope) {
+      const wholePage = scope === "page" || scope === "all";
       const el = trigger();
-      if (!el) return null;
+      if (!el && !wholePage) return null;
       const parts = [];
       const seen = new Set();
-      const consider = (node, label) => {
-        if (seen.has(node) || !visibleBox(node)) return;
-        seen.add(node);
+      const consider = (textNode, label, own) => {
+        const host = own ?? textNode.parentElement;
+        const node = own ?? textNode.assignedSlot ?? host;
+        if (!host || !node || seen.has(textNode) || !visibleBox(host)) return;
+        const box = host.getBoundingClientRect();
+        if (box.width <= 1 && box.height <= 1) return;
+        seen.add(textNode);
         const style = getComputedStyle(node);
         if (style.visibility === "hidden") return;
+        if (!keys.has(textNode)) keys.set(textNode, (keyCounter += 1));
         const behind = backdrop(node, true);
         const color = rgba(style.color);
         parts.push({
+          key: keys.get(textNode),
           text: label.replace(/\s+/g, " ").trim().slice(0, 40),
           color,
           size: parseFloat(style.fontSize),
@@ -112,11 +126,17 @@ export function installMeasure() {
           undetermined: behind.reason ?? (color ? null : "its color couldn't be read"),
         });
       };
-      const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
-      for (let node = walker.nextNode(); node && parts.length < 12; node = walker.nextNode()) {
-        if (node.nodeValue && node.nodeValue.trim() && node.parentElement) consider(node.parentElement, node.nodeValue);
+      const walk = (root) => {
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, wholePage ? { acceptNode: (n) => (n.parentElement?.closest(scope === "all" ? "script, style, noscript" : "script, style, noscript, [data-a11y-trigger]") ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT) } : undefined);
+        for (let node = walker.nextNode(); node && parts.length < (scope === "all" ? 300 : 30); node = walker.nextNode()) {
+          if (node.nodeValue && node.nodeValue.trim() && node.parentElement) consider(node, node.nodeValue);
+        }
+        if (wholePage) for (const host of root.querySelectorAll("*")) if (host.shadowRoot) walk(host.shadowRoot);
+      };
+      walk(wholePage ? document.body : el);
+      if (!wholePage && el.matches("input, textarea, select") && "value" in el && String(el.value).trim()) {
+        consider(el, String(el.value), el);
       }
-      if (el.matches("input, textarea, select") && "value" in el && String(el.value).trim()) consider(el, String(el.value));
       return parts;
     },
     /** What the control looks like from outside: label, input, or icon, and the colors that mark its edge. */