automatica11y 0.3.2 → 0.4.0

package/src/plan/mapping.js

@@ -14,6 +14,7 @@ const BASE_NAMES = {
   "form-field": ["input", "textfield", "textinput", "field", "checkbox"],
   accordion: ["accordion", "collapsible", "disclosure"],
   tooltip: ["tooltip", "popover"],
+  "live-region": ["alert", "status", "toast", "snackbar", "notification", "liveregion"],
   chart: ["chart", "linechart", "barchart"],
 };
 
@@ -24,21 +25,23 @@ export const TEMPLATED = new Set(["button", "link"]);
 const words = (name) => name.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[-_]/g, " ");
 
 /** How well a name fits an archetype. 0 means it doesn't. */
-function score(archetype, name) {
+export function score(archetype, name) {
   if (!ARCHETYPE_PATTERNS[archetype].test(words(name))) return 0;
   const compact = name.replace(/[-_\s]/g, "").toLowerCase();
   const last = words(name).toLowerCase().split(" ").pop();
   const bases = BASE_NAMES[archetype];
-  if (bases.includes(compact)) return 4;
-  if (bases.includes(last)) return 3;
-  if (bases.some((base) => compact.startsWith(base))) return 2;
+  // Names listed first are closer to the archetype itself, so `tooltip` beats `popover` when both are there.
+  if (bases.includes(compact)) return 4 - bases.indexOf(compact) * 0.1;
+  if (bases.includes(last)) return 3 - bases.indexOf(last) * 0.1;
+  const starts = bases.findIndex((base) => compact.startsWith(base));
+  if (starts !== -1) return 2 - starts * 0.1;
   return 1;
 }
 
 /**
- * Guess which exports (React) or tags (web components) stand for each archetype.
+ * Guess which exports (React or Vue) or tags (web components) stand for each archetype.
  * The result is a starting point. A person or the skill checks it before trusting it.
- * @param {{ flavor: "react" | "wc", exports?: Array<{ name: string, type: string, parts: string[] }>, tags?: string[] }} input
+ * @param {{ flavor: "react" | "vue" | "wc", exports?: Array<{ name: string, type: string, parts: string[] }>, tags?: string[] }} input
  * @returns {Record<string, any>}
  */
 export function candidateMapping({ flavor, exports = [], tags = [] }) {
@@ -58,7 +61,8 @@ export function candidateMapping({ flavor, exports = [], tags = [] }) {
     const info = exports.find((e) => e.name === best);
     const parts = info?.parts ?? [];
     // Flat compound libraries (DialogRoot, DialogTrigger, DialogContent) have sibling exports that share a prefix.
-    const siblings = flavor === "react" ? names.filter((n) => n !== best && n.startsWith(best) && n.length > best.length) : [];
+    // A button or link usually sits beside ButtonBase, ButtonGroup, and the like, which aren't its parts, so only real parts (Button.Root) count there.
+    const siblings = flavor !== "wc" && !TEMPLATED.has(archetype) ? names.filter((n) => n !== best && n.startsWith(best) && n.length > best.length) : [];
     const compound = parts.length > 0 || siblings.length >= 2;
     const templated = TEMPLATED.has(archetype) && !compound;
     mapping[archetype] = {

package/src/plan/resolve-npm.js

@@ -1,8 +1,9 @@
 import { execFile } from "node:child_process";
+import { ADAPTERS } from "../frameworks/index.js";
+import { checkExports, notExportedMessage } from "./subpath.js";
 
-const FIELDS = ["name", "version", "peerDependencies", "dependencies", "keywords", "customElements", "deprecated"];
+const FIELDS = ["name", "version", "peerDependencies", "dependencies", "keywords", "customElements", "deprecated", "exports"];
 const OTHER_FRAMEWORKS = {
-  vue: "Vue",
   "@angular/core": "Angular",
   svelte: "Svelte",
   "solid-js": "Solid",
@@ -44,19 +45,19 @@ export function npmView(spec, { timeoutMs = 60_000 } = {}) {
 }
 
 /**
- * Guess how a package renders from its metadata alone. React wins when both signals appear.
+ * Guess how a package renders from its metadata alone. React wins when both signals appear, then a custom elements manifest, then Vue.
  * `npm` means the metadata can't say, so the run decides after it installs and loads the package.
  * @param {any} meta
- * @returns {{ kind: "npm-react" | "npm-wc" | "npm-unsupported" | "npm", framework: string | null, reason: string }}
+ * @returns {{ kind: "npm-react" | "npm-vue" | "npm-wc" | "npm-unsupported" | "npm", framework: string | null, reason: string }}
  */
 export function detectFlavor(meta) {
   const peers = meta.peerDependencies ?? {};
   const deps = meta.dependencies ?? {};
-  if ("react" in peers || "react-dom" in peers || "react" in deps) {
-    const how = "react" in peers || "react-dom" in peers ? "peer dependency" : "dependency";
-    return { kind: "npm-react", framework: "React", reason: `The package lists react as a ${how}.` };
-  }
+  const react = /** @type {any} */ (ADAPTERS.react.detect(meta));
+  if (react) return react;
   if (meta.customElements) return { kind: "npm-wc", framework: "Web components", reason: "The package has a customElements manifest." };
+  const vue = /** @type {any} */ (ADAPTERS.vue.detect(meta));
+  if (vue) return vue;
   for (const [name, label] of Object.entries(OTHER_FRAMEWORKS)) {
     if (name in peers) return { kind: "npm-unsupported", framework: label, reason: `The package needs ${label}.` };
   }
@@ -73,9 +74,14 @@ export function detectFlavor(meta) {
  */
 export async function resolveNpmTarget(target, view) {
   if (target.status !== "ok" || target.kind !== "npm" || !target.resolved) return target;
-  const { name, requested } = target.resolved;
+  const { name, requested, subpath } = target.resolved;
   try {
     const meta = await view(`${name}@${requested ?? "latest"}`);
+    // The registry lists a package's exports, so a wrong sub-path is caught here, before anything is installed.
+    if (subpath) {
+      const result = checkExports(meta.exports, subpath);
+      if (result.checked && !result.ok) throw new Error(notExportedMessage({ name, version: meta.version ?? null, subpath, exact: result.exact, patterns: result.patterns }));
+    }
     const flavor = detectFlavor(meta);
     return {
       ...target,

package/src/plan/subpath.js

@@ -0,0 +1,133 @@
+/**
+ * Sub-paths of an npm package: `@scope/pkg/button/v2` imports `button/v2` from `@scope/pkg`.
+ * A package says what it lets people import in its `exports` field. A package without one lets people import any file in it.
+ */
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+
+/**
+ * Split a sub-path into clean segments, or say what's wrong with it. Rejects empty parts, `.` and `..`, and backslashes,
+ * so a sub-path can't point outside the package. A trailing slash is dropped.
+ * @param {string} text
+ * @returns {{ ok: true, subpath: string } | { ok: false, reason: string }}
+ */
+export function cleanSubpath(text) {
+  const trimmed = text.replace(/\/+$/, "");
+  if (!trimmed) return { ok: false, reason: "the sub-path is empty" };
+  if (trimmed.includes("\\")) return { ok: false, reason: "a sub-path uses forward slashes" };
+  const segments = trimmed.split("/");
+  if (segments.some((segment) => segment === "" || segment === "." || segment === "..")) return { ok: false, reason: 'a sub-path can\'t contain empty parts, "." or ".."' };
+  return { ok: true, subpath: segments.join("/") };
+}
+
+/**
+ * The export keys that name a sub-path (`./button`), and the patterns (`./es/*`), from an `exports` field.
+ * A string, an array, or an object with no `./` keys only exports the package root.
+ */
+function exportKeys(exportsField) {
+  if (!exportsField || typeof exportsField !== "object" || Array.isArray(exportsField)) return { exact: [], patterns: [], hasMap: false };
+  const keys = Object.keys(exportsField).filter((key) => key === "." || key.startsWith("./"));
+  if (keys.length === 0) return { exact: [], patterns: [], hasMap: false };
+  const usable = keys.filter((key) => exportsField[key] !== null);
+  return { exact: usable.filter((key) => !key.includes("*") && key !== "." && key !== "./package.json"), patterns: usable.filter((key) => key.includes("*")), hasMap: true };
+}
+
+/** Does a pattern key like `./es/*` or `./features/*.js` match a sub-path? */
+function matchesPattern(pattern, subpath) {
+  const [before, after] = pattern.slice(2).split("*");
+  return subpath.length >= before.length + after.length && subpath.startsWith(before) && subpath.endsWith(after);
+}
+
+/**
+ * Does the package's `exports` field let a sub-path be imported? Returns the sub-paths to suggest when it doesn't.
+ * `package.json` is always allowed. A package with no exports map isn't judged here, because its files are the answer.
+ * @param {unknown} exportsField
+ * @param {string} subpath
+ * @returns {{ checked: boolean, ok: boolean, exact: string[], patterns: string[] }}
+ */
+export function checkExports(exportsField, subpath) {
+  const { exact, patterns, hasMap } = exportKeys(exportsField);
+  if (!hasMap) {
+    // A string or array exports field means only the root is exported. No field means nothing here can say.
+    return { checked: exportsField !== undefined && exportsField !== null, ok: false, exact: [], patterns: [] };
+  }
+  const key = `./${subpath}`;
+  const ok = key === "./package.json" || exact.includes(key) || patterns.some((pattern) => matchesPattern(pattern, subpath));
+  return { checked: true, ok, exact, patterns };
+}
+
+/**
+ * What's wrong with a sub-path of an installed package, or null when it can be imported.
+ * @param {string} workDir The folder the package was installed into.
+ * @param {string} name
+ * @param {string} subpath
+ * @param {string | null} version
+ * @returns {string | null}
+ */
+export function subpathProblem(workDir, name, subpath, version) {
+  const packageDir = join(workDir, "node_modules", name);
+  let manifest;
+  try {
+    manifest = JSON.parse(readFileSync(join(packageDir, "package.json"), "utf8"));
+  } catch {
+    return `${name} was installed, but its package.json couldn't be read to check the sub-path "${subpath}".`;
+  }
+  const result = checkExports(manifest.exports, subpath);
+  if (result.checked) return result.ok ? null : notExportedMessage({ name, version, subpath, exact: result.exact, patterns: result.patterns });
+  return fileExists(packageDir, subpath) ? null : `"${name}/${subpath}" isn't a file in ${name}${version ? `@${version}` : ""}, and the package has no exports map that lists what it offers.`;
+}
+
+/** The extensions a file can be imported without writing, for a package with no exports map. */
+const EXTENSIONS = ["", ".js", ".mjs", ".cjs", ".json", "/index.js", "/index.mjs", "/index.cjs"];
+
+/** Is there a file for this sub-path in an installed package that has no exports map? */
+export function fileExists(packageDir, subpath) {
+  return EXTENSIONS.some((extension) => existsSync(join(packageDir, `${subpath}${extension}`)));
+}
+
+/** How many single-character edits turn one word into another. */
+function distance(a, b) {
+  let previous = Array.from({ length: b.length + 1 }, (_, i) => i);
+  for (let i = 1; i <= a.length; i += 1) {
+    const row = [i];
+    for (let j = 1; j <= b.length; j += 1) row.push(Math.min(previous[j] + 1, row[j - 1] + 1, previous[j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1)));
+    previous = row;
+  }
+  return previous[b.length];
+}
+
+/** The exports closest to what was asked for: a shared start, a shared last part, or a typo of it. */
+function closest(subpath, exact) {
+  const wanted = subpath.toLowerCase().split("/");
+  const last = wanted[wanted.length - 1];
+  return exact
+    .map((key) => {
+      const parts = key.slice(2).toLowerCase().split("/");
+      const shared = parts.findIndex((part, i) => part !== wanted[i]);
+      const lead = shared === -1 ? parts.length : shared;
+      const tail = parts[parts.length - 1];
+      const rank = lead * 2 + (tail.includes(last) || last.includes(tail) ? 1 : 0) + (distance(last, tail) <= 2 ? 2 : 0);
+      return { key, rank };
+    })
+    .filter((entry) => entry.rank > 0)
+    .sort((a, b) => b.rank - a.rank || a.key.length - b.key.length)
+    .slice(0, 3)
+    .map((entry) => entry.key);
+}
+
+/**
+ * The message for a sub-path a package doesn't offer, with the closest matches first.
+ * @param {{ name: string, version: string | null, subpath: string, exact: string[], patterns: string[] }} input
+ */
+export function notExportedMessage({ name, version, subpath, exact, patterns }) {
+  const spec = (key) => `${name}${key === "." ? "" : key.slice(1)}`;
+  const close = closest(subpath, exact);
+  const shown = exact.slice(0, 12).map(spec);
+  const more = exact.length > shown.length ? `, and ${exact.length - shown.length} more` : "";
+  const parts = [`"${name}/${subpath}" isn't something ${name}${version ? `@${version}` : ""} exports.`];
+  if (close.length) parts.push(`Did you mean ${close.map(spec).join(" or ")}?`);
+  if (exact.length) parts.push(`It exports ${shown.join(", ")}${more}.`);
+  if (patterns.length) parts.push(`It also exports files by pattern: ${patterns.slice(0, 4).map(spec).join(", ")}.`);
+  if (!exact.length && !patterns.length) parts.push("It exports only its main entry.");
+  return parts.join(" ");
+}

package/src/report/comparison.js

@@ -3,11 +3,13 @@ import { num, plural } from "../text.js";
 import {
   ENGINE_NAMES,
   FINDINGS_NOTE,
+  GENERATED_NOTE,
   TIER_NAMES,
   cell,
   code,
   configLabel,
   finish,
+  hasGenerated,
   notTestableLines,
   reportFooter,
   reportHeader,
@@ -15,7 +17,7 @@ import {
   targetSection,
 } from "./parts.js";
 
-const TIER_ORDER = ["rules", "interactions", "vsr"];
+const TIER_ORDER = ["rules", "interactions", "computed", "conditions", "vsr"];
 
 /** The archetype rows: component archetypes in a fixed order, then whole pages, then Storybook stories. */
 function archetypeKeys(results) {
@@ -67,7 +69,9 @@ function coverageTable(plan, results, tier, keys) {
       // Name the configuration only when there's more than one to tell apart, or the row stands for several stories.
       const withTier = rows.filter((r) => r.configs?.some((c) => c.tiers[tier]));
       const labels = withTier.length > 1 || withTier[0]?.always ? withTier.map((r) => r.label).filter((l) => l && l !== "-") : [];
-      return labels.length ? `${status} (${labels.join("; ")})` : status;
+      const generated = target.archetypes?.[key]?.fixture?.source === "generated" && String(status).startsWith("ran");
+      const base = labels.length ? `${status} (${labels.join("; ")})` : status;
+      return generated ? `${base} (generated fixture)` : base;
     });
     lines.push(`| ${key} | ${cells.join(" | ")} |`);
   }
@@ -104,6 +108,16 @@ function interactionsCell(configs) {
   return parts.filter(Boolean).join("; ");
 }
 
+function measuredCell(configs, tier) {
+  const checks = configs.flatMap((c) => c.tiers[tier]?.checks ?? []);
+  if (checks.length === 0) return configs.map((c) => c.tiers[tier]?.status).find(Boolean) ?? "-";
+  const failed = checks.filter((c) => c.result === "fail").map((c) => code(c.name));
+  const unknown = checks.filter((c) => c.result === "undetermined").length;
+  const errors = checks.filter((c) => c.result === "error").length;
+  const parts = [failed.length ? `failed: ${failed.slice(0, 3).join(", ")}${failed.length > 3 ? `, and ${num(failed.length - 3)} more` : ""}` : "no failures", unknown ? `${num(unknown)} undetermined` : null, errors ? plural(errors, "error") : null];
+  return parts.filter(Boolean).join("; ");
+}
+
 function vsrCell(configs) {
   const walks = configs.map((c) => c.tiers.vsr).filter((v) => v?.status === "ran");
   if (walks.length === 0) return configs.map((c) => c.tiers.vsr?.status).find(Boolean) ?? "-";
@@ -113,17 +127,17 @@ function vsrCell(configs) {
 }
 
 function findingsTable(plan, results, key) {
-  const head = ["Target", "Configuration", ENGINE_NAMES.axe, ENGINE_NAMES.ibm, "Interactions", "Virtual screen reader (simulated)"];
+  const head = ["Target", "Configuration", ENGINE_NAMES.axe, ENGINE_NAMES.ibm, "Interactions", "Computed checks", "Conditions", "Virtual screen reader (simulated)"];
   const lines = [`| ${head.join(" | ")} |`, `| ${head.map(() => "---").join(" | ")} |`];
   for (const target of results.targets) {
     const planTarget = plan.targets.find((t) => t.id === target.id);
     for (const row of rowsFor(planTarget, target, key)) {
       if (row.note) {
-        lines.push(`| ${cell(target.id)} | ${cell(row.label)} | ${cell(row.note)} | | | |`);
+        lines.push(`| ${cell(target.id)} | ${cell(row.label)} | ${cell(row.note)} | | | | | |`);
         continue;
       }
       const c = row.configs;
-      lines.push(`| ${cell(target.id)} | ${cell(row.label)} | ${cell(ruleCell(c, "axe"))} | ${cell(ruleCell(c, "ibm"))} | ${cell(interactionsCell(c))} | ${cell(vsrCell(c))} |`);
+      lines.push(`| ${cell(target.id)} | ${cell(row.label)} | ${cell(ruleCell(c, "axe"))} | ${cell(ruleCell(c, "ibm"))} | ${cell(interactionsCell(c))} | ${cell(measuredCell(c, "computed"))} | ${cell(measuredCell(c, "conditions"))} | ${cell(vsrCell(c))} |`);
     }
   }
   return lines;
@@ -170,6 +184,7 @@ export function renderComparison({ plan, results }) {
     lines.push(`### ${TIER_NAMES[tier]}${tier === "vsr" ? " (simulated)" : ""}.`, "", ...coverageTable(plan, results, tier, keys), "");
   }
   lines.push(...notTestableLines(results));
+  if (hasGenerated(results)) lines.push(GENERATED_NOTE, "");
 
   lines.push("## Findings.", "", FINDINGS_NOTE, "", ...(o.tiers.includes("rules") ? impactTables(results, o.engines) : []));
   for (const key of keys) {
@@ -177,7 +192,7 @@ export function renderComparison({ plan, results }) {
   }
 
   lines.push("## Details by target.", "", "Every finding, with its elements, rule help, and logs, for each target in turn.", "");
-  for (const target of results.targets) lines.push(targetSection(plan.targets.find((t) => t.id === target.id), target));
+  for (const target of results.targets) lines.push(targetSection(plan.targets.find((t) => t.id === target.id), target, { generatedNote: false }));
   lines.push(...reportFooter(results));
   return finish(lines);
 }

package/src/report/parts.js

@@ -1,3 +1,5 @@
+import { adapterFor } from "../frameworks/index.js";
+import { criterion, criterionName, wcagAttribution } from "../wcag/index.js";
 import { cap, num, plural } from "../text.js";
 
 /** Markdown helpers. */
@@ -8,7 +10,7 @@ export const sentence = (text) => String(text).replace(/\.+$/, "");
 /** Escape angle brackets so rule text like <input> doesn't turn into HTML. */
 export const esc = (text) => String(text ?? "").replace(/</g, "\\<");
 export const ENGINE_NAMES = { axe: "axe-core", ibm: "IBM Equal Access" };
-export const TIER_NAMES = { rules: "Rules", interactions: "Interactions", vsr: "Virtual screen reader" };
+export const TIER_NAMES = { rules: "Rules", interactions: "Interactions", computed: "Computed checks", conditions: "Conditions", vsr: "Virtual screen reader" };
 
 export function toolLines(tools) {
   return Object.entries(tools)
@@ -27,6 +29,11 @@ export function engineCell(summary, engine) {
 export function tierCell(target, tier) {
   const counts = target.summary?.interactions;
   const vsr = target.summary?.vsr;
+  const measured = target.summary?.[tier];
+  if ((tier === "computed" || tier === "conditions") && measured) {
+    const parts = [measured.fail && `${num(measured.fail)} failed`, measured.undetermined && `${num(measured.undetermined)} undetermined`, measured.error && plural(measured.error, "error"), measured.pass && `${num(measured.pass)} passed`, measured.notApplicable && `${num(measured.notApplicable)} not applicable`].filter(Boolean);
+    return `ran, ${parts.join(", ")}`;
+  }
   if (tier === "vsr" && vsr) return `ran (simulated), ${vsr.flagged ? `${num(vsr.flagged)} flagged` : "none flagged"}`;
   if (tier === "interactions" && counts) {
     const parts = [counts.fail && plural(counts.fail, "failed", "failed"), counts.error && plural(counts.error, "error"), counts.pass && `${num(counts.pass)} passed`, counts.notApplicable && `${num(counts.notApplicable)} not applicable`].filter(Boolean);
@@ -58,7 +65,7 @@ export function findingBlock(finding, { showImpact, showToolkit }) {
     showImpact && finding.impact ? `impact: ${finding.impact}` : null,
     showToolkit && finding.toolkitLevel != null ? `IBM Toolkit level ${finding.toolkitLevel}` : null,
     finding.kind ? `kind: ${finding.kind}` : null,
-    finding.wcag.length ? `WCAG ${finding.wcag.join(", ")}` : null,
+    finding.wcag.length ? `WCAG ${finding.wcag.map(criterionName).join(", ")}` : null,
     plural(finding.nodeCount, "element"),
   ].filter(Boolean);
   const lines = [`- ${code(finding.ruleId)} (${meta.join("; ")}). ${esc(finding.help)} [Rule help](${finding.helpUrl})`];
@@ -200,7 +207,31 @@ export function interactionsSection(result, nested) {
   const lines = [`${nested ? "#####" : "####"} Interactions.`, "", "Each check ran on a fresh page, using only the trigger and root hooks and ARIA roles. A check that couldn't finish is an error, which counts as a gap and never as a pass.", ""];
   lines.push("| Check | Result | WCAG | Detail |", "| --- | --- | --- | --- |");
   for (const check of result.checks) {
-    lines.push(`| ${code(check.name)} | ${check.result} | ${cell((check.criteria ?? []).join(", ") || "-")} | ${cell(check.detail)}${check.method ? cell(` (method: ${check.method})`) : ""} |`);
+    lines.push(`| ${code(check.name)} | ${check.result} | ${cell(criteriaCell(check.criteria))} | ${cell(check.detail)}${check.method ? cell(` (method: ${check.method})`) : ""} |`);
+  }
+  return lines.join("\n");
+}
+
+/** Criterion numbers as links to the W3C text, with the W3C's name for each. Unknown numbers stay plain. */
+export function criteriaCell(list) {
+  if (!list || list.length === 0) return "-";
+  return list.map((num) => {
+    const c = criterion(num);
+    return c ? `[${c.num} ${c.handle}](${c.url})` : num;
+  }).join(", ");
+}
+
+const MEASURED_INTRO = {
+  computed: ["Computed checks", "automatica11y's own measurements from resolved styles in the browser, with the numbers WCAG gives. They're reported on their own and never added to the axe-core or IBM Equal Access counts. A check that can't reduce the page to colors (a gradient, an image, transparency) is undetermined, which counts as a gap and never as a pass."],
+  conditions: ["Conditions", "automatica11y's own checks of how the page holds up under a user's settings (reduced motion, dark mode, more or less contrast, reduced transparency, forced colors) and environment (a 320 pixel window, wider text spacing). Each check opens fresh copies of the page. They're reported on their own and never added to the axe-core or IBM Equal Access counts. A check that can't tell is undetermined, which counts as a gap and never as a pass. \"Not applicable\" means the page doesn't use the feature, which isn't a failure."],
+};
+
+export function measuredSection(tier, result, nested) {
+  const [title, intro] = MEASURED_INTRO[tier];
+  const lines = [`${nested ? "#####" : "####"} ${title}.`, "", intro, ""];
+  lines.push("| Check | Result | WCAG | Detail |", "| --- | --- | --- | --- |");
+  for (const check of result.checks) {
+    lines.push(`| ${code(check.name)} | ${check.result} | ${cell(criteriaCell(check.criteria))} | ${cell(check.detail)}${check.method ? cell(` (method: ${check.method})`) : ""} |`);
   }
   return lines.join("\n");
 }
@@ -211,17 +242,33 @@ export function configLabel(config) {
   return parts.length ? ` (${parts.join(", ")})` : "";
 }
 
+/** What the Fixture column says about where a fixture came from. */
+function fixtureLabel(archetype) {
+  const f = archetype.fixture;
+  if (!f || f.source === "none") return "-";
+  return f.source === "generated" ? `generated (${f.recipe})` : f.source;
+}
+
 export function archetypeTable(target) {
   const rows = Object.entries(target.archetypes).map(([name, archetype]) => {
-    if (archetype.status === "gap") return `| ${name} | gap | - | ${cell(sentence(archetype.reason ?? "No fixture."))} |`;
+    if (archetype.status === "gap") return `| ${name} | gap | ${fixtureLabel(archetype)} | - | ${cell(sentence(archetype.reason ?? "No fixture."))} |`;
     const states = [...new Set(archetype.configs.map((c) => c.state).filter(Boolean))].join(", ") || "-";
     const libs = [...new Set(archetype.configs.map((c) => c.libA11y).filter((l) => l && l !== "n/a"))];
-    return `| ${name} | ran | ${states} | ${libs.length ? `library accessibility ${libs.join(" and ")}` : ""} |`;
+    const notes = [libs.length ? `library accessibility ${libs.join(" and ")}` : "", archetype.fixture?.source === "generated" ? `${sentence(archetype.fixture.summary ?? "")}, from ${(archetype.fixture.used ?? []).join(", ")}. Source: ${archetype.fixture.file}` : ""].filter(Boolean);
+    return `| ${name} | ran | ${fixtureLabel(archetype)} | ${states} | ${cell(notes.join(". "))} |`;
   });
-  return ["| Archetype | Status | States | Note |", "| --- | --- | --- | --- |", ...rows];
+  return ["| Archetype | Status | Fixture | States | Note |", "| --- | --- | --- | --- | --- |", ...rows];
 }
 
-export function targetSection(planTarget, target) {
+/** True when any archetype in the results ran from a fixture the tool generated. */
+export function hasGenerated(results) {
+  return results.targets.some((t) => Object.values(t.archetypes ?? {}).some((a) => a.fixture?.source === "generated"));
+}
+
+/** What "generated" means, for any report that has one. */
+export const GENERATED_NOTE = "**Generated fixtures.** Where no fixture was written, the tool built one from the parts the package exports (or from what a custom element says about itself) and ran it only after it checked that the trigger and root behaved. A generated fixture is a guess about how the library is meant to be assembled, so a failure may come from how it was wired and not from the library. Treat generated results as lower evidence than an authored fixture. The source of each is in the `generated` folder beside this report. Copy one to `fixtures/<target id>/<archetype>.jsx` (`.js` for web components) and edit it to make it an authored fixture.";
+
+export function targetSection(planTarget, target, { generatedNote = true } = {}) {
   if (target.status === "ran" && target.storybook) return storybookSection(planTarget, target);
   const lines = [`### ${planTarget.label}.`, ""];
   lines.push(`Target ${code(planTarget.input)}, ${planTarget.kind ?? "unclassified"}${planTarget.evidenceLevel ? `, ${planTarget.evidenceLevel} evidence` : ""}.`, "");
@@ -231,13 +278,14 @@ export function targetSection(planTarget, target) {
   }
   if (target.npm) {
     const n = target.npm;
-    lines.push(`Installed ${code(`${n.name}@${n.version}`)} on its own, as ${n.flavor === "react" ? `React${n.react ? ` (react ${n.react})` : ""}` : `web components (${n.tags.length ? n.tags.slice(0, 6).join(", ") : "no tags found"})`}.`, "");
+    lines.push(`Installed ${code(`${n.name}@${n.version}`)} on its own${n.subpath ? ` and tested its ${code(`${n.name}/${n.subpath}`)} entry` : ""}, as ${adapterFor(n.flavor).describe(n)}.`, "");
   }
   for (const warning of target.warnings) lines.push(`Warning: ${warning}`, "");
   if (target.status === "failed") {
     lines.push(`This target failed: ${sentence(target.reason)}. A failed target is a gap in coverage. It isn't a pass.`, "");
   }
   if (target.npm) lines.push("**Archetypes.** A gap means the archetype wasn't tested, so it counts against coverage and never as a pass.", "", ...archetypeTable(target), "");
+  if (generatedNote && target.npm && hasGenerated({ targets: [target] })) lines.push(GENERATED_NOTE, "");
   /** @type {Set<string>} */
   const skipped = new Set();
   for (const [name, archetype] of Object.entries(target.archetypes)) {
@@ -250,6 +298,8 @@ export function targetSection(planTarget, target) {
           lines.push(vsrSection(result, name !== "page"), "");
         } else if (tier === "interactions" && result.status === "ran") {
           lines.push(interactionsSection(result, name !== "page"), "");
+        } else if ((tier === "computed" || tier === "conditions") && result.status === "ran") {
+          lines.push(measuredSection(tier, result, name !== "page"), "");
         } else if (result.status !== "ran") {
           skipped.add(`${TIER_NAMES[tier] ?? tier}: ${sentence(result.reason ?? result.status)}.`);
         }
@@ -326,6 +376,8 @@ export function reportFooter(results) {
     "",
     "Contrast results depend on how the browser rendered the page, so the browser version is recorded above.",
     "",
+    `**WCAG data.** ${wcagAttribution()}`,
+    "",
   );
   return lines;
 }