eaa-kit 0.3.0 → 0.5.0

package/dist/{crawl-Oxt2Gaqo.js → crawl-BUWPgaGW.js}

@@ -1,6 +1,20 @@
-import { i as stripBom } from "./collect-BkAQ0viT.js";
+import { a as stripBom } from "./collect-Cu1q9NTB.js";
 /** Requests in flight at once. Politeness, not throughput. */
 const REQUEST_CONCURRENCY = 4;
+/**
+* Largest response body this will read, in bytes.
+*
+* A crawl reads whatever the server sends, and nothing obliges a server to send
+* something reasonable — a misconfigured export endpoint, a log streamed as
+* text/html, or a host that simply does not stop. `response.text()` buffers all
+* of it before anyone can object, so the ceiling has to be applied while the
+* body is still arriving.
+*
+* Matches the on-disk page limit: the two paths audit the same kind of
+* document, and a page that would be declined off disk should not be accepted
+* because it arrived over HTTP instead.
+*/
+const MAX_BODY_BYTES = 33554432;
 var CrawlError = class extends Error {
 	name = "CrawlError";
 };
@@ -79,7 +93,7 @@ function urlsFromSitemap(xml, origin) {
 	return urls;
 }
 /** One request, with a timeout, returning HTML or a reason it is not a page. */
-async function fetchPage(url, impl, timeoutMs, origin) {
+async function fetchPage(url, impl, timeoutMs, origin, maxBodyBytes) {
 	const controller = new AbortController();
 	const timer = setTimeout(() => controller.abort(), timeoutMs);
 	try {
@@ -106,11 +120,16 @@ async function fetchPage(url, impl, timeoutMs, origin) {
 			ok: false,
 			reason: `not HTML (${type.split(";")[0] || "no content-type"})`
 		};
+		const body = await readCapped(response, maxBodyBytes);
+		if (body === void 0) return {
+			ok: false,
+			reason: `larger than the ${maxBodyBytes} byte limit for one page`
+		};
 		return {
 			ok: true,
 			value: {
 				url: finalUrl,
-				html: await response.text()
+				html: body
 			}
 		};
 	} catch (cause) {
@@ -123,6 +142,51 @@ async function fetchPage(url, impl, timeoutMs, origin) {
 		clearTimeout(timer);
 	}
 }
+/**
+* A response body, up to a limit, or undefined when it runs past it.
+*
+* Streamed rather than buffered, because `response.text()` has already read
+* everything by the time it could be checked, and a content-length header is
+* both optional and unverified — a chunked response carries no length at all,
+* and one that carries a length is not obliged to tell the truth. Counting the
+* bytes as they arrive is the only check that holds either way, and the body is
+* cancelled the moment it goes over so nothing keeps arriving.
+*/
+async function readCapped(response, limit) {
+	const body = response.body;
+	if (!body) {
+		const text = await response.text();
+		return text.length > limit ? void 0 : text;
+	}
+	const reader = body.getReader();
+	const chunks = [];
+	let total = 0;
+	try {
+		while (true) {
+			const { done, value } = await reader.read();
+			if (done) break;
+			if (value === void 0) continue;
+			total += value.byteLength;
+			if (total > limit) {
+				await reader.cancel();
+				return;
+			}
+			chunks.push(value);
+		}
+	} finally {
+		reader.releaseLock();
+	}
+	return new TextDecoder().decode(concat(chunks, total));
+}
+function concat(chunks, total) {
+	const joined = new Uint8Array(total);
+	let at = 0;
+	for (const chunk of chunks) {
+		joined.set(chunk, at);
+		at += chunk.byteLength;
+	}
+	return joined;
+}
 /** Paths robots.txt disallows for us. Only the wildcard group is read. */
 function disallowedPaths(robots) {
 	const lines = robots.split(/\r?\n/).map((line) => line.replace(/#.*$/, "").trim());
@@ -149,12 +213,21 @@ function disallowedPaths(robots) {
 * that is not a page. A site that does not publish one is the ordinary case,
 * not a failure, so it comes back empty either way.
 */
-async function fetchSiteFile(entry, impl, name) {
+async function fetchSiteFile(entry, impl, name, timeoutMs, maxBodyBytes) {
+	const controller = new AbortController();
+	const timer = setTimeout(() => controller.abort(), timeoutMs);
 	try {
-		const response = await impl(new URL(name, entry).href, { redirect: "follow" });
-		return response.ok ? await response.text() : void 0;
+		const response = await impl(new URL(name, entry).href, {
+			redirect: "follow",
+			signal: controller.signal
+		});
+		if (!response.ok) return void 0;
+		if (new URL(response.url || new URL(name, entry).href).origin !== entry.origin) return void 0;
+		return await readCapped(response, maxBodyBytes);
 	} catch {
 		return;
+	} finally {
+		clearTimeout(timer);
 	}
 }
 /**
@@ -169,8 +242,9 @@ async function crawlSite(entry, options = {}) {
 	const maxPages = options.maxPages ?? 200;
 	const maxDepth = options.maxDepth ?? 3;
 	const timeoutMs = options.timeoutMs ?? 15e3;
+	const maxBodyBytes = options.maxBodyBytes ?? MAX_BODY_BYTES;
 	const failures = [];
-	const robots = options.ignoreRobots ? void 0 : await fetchSiteFile(entry, impl, "/robots.txt");
+	const robots = options.ignoreRobots ? void 0 : await fetchSiteFile(entry, impl, "/robots.txt", timeoutMs, maxBodyBytes);
 	const blocked = robots === void 0 ? [] : disallowedPaths(robots);
 	const allowed = (url) => !blocked.some((path) => url.pathname.startsWith(path));
 	let discovery = "links";
@@ -184,7 +258,7 @@ async function crawlSite(entry, options = {}) {
 			depth
 		});
 	};
-	const sitemap = await fetchSiteFile(entry, impl, "/sitemap.xml");
+	const sitemap = await fetchSiteFile(entry, impl, options.sitemap ?? "/sitemap.xml", timeoutMs, maxBodyBytes);
 	const listed = sitemap === void 0 ? [] : urlsFromSitemap(sitemap, entry);
 	if (listed.length > 0) {
 		discovery = "sitemap";
@@ -196,7 +270,7 @@ async function crawlSite(entry, options = {}) {
 		const batch = queue.splice(0, Math.min(REQUEST_CONCURRENCY, maxPages - pages.length));
 		const results = await Promise.all(batch.map(async (item) => ({
 			item,
-			result: await fetchPage(item.url, impl, timeoutMs, entry.origin)
+			result: await fetchPage(item.url, impl, timeoutMs, entry.origin, maxBodyBytes)
 		})));
 		for (const { item, result } of results) {
 			if (!result.ok) {

package/dist/eleventy/index.d.ts

@@ -0,0 +1,28 @@
+import { n as IntegrationOptions, t as BuildAuditError } from "../run-CtcEUhbe.js";
+//#region src/eleventy/index.d.ts
+/** What `eleventy.after` is given. Only two of its fields are read. */
+interface EleventyAfterEvent {
+  dir: {
+    input: string;
+    output: string;
+  };
+  /** `build`, `watch` or `serve`. Only a one-shot build is audited. */
+  runMode?: string;
+  /** `fs`, `json`, `ndjson` or `text`. Only `fs` writes files to audit. */
+  outputMode?: string;
+}
+/** The part of Eleventy's config object this plugin touches. */
+interface EleventyConfigLike {
+  on(event: 'eleventy.after', handler: (event: EleventyAfterEvent) => Promise<void>): void;
+}
+type EaaKitEleventyOptions = IntegrationOptions;
+/**
+ * Usable both as a bare plugin and as a configured one.
+ *
+ * `addPlugin(eaaKit)` and `addPlugin(eaaKit, { failOn: 'moderate' })` are both
+ * how Eleventy plugins are written, and a plugin that only supported the second
+ * would be the one people got wrong.
+ */
+declare function eaaKit(eleventyConfig: EleventyConfigLike, options?: EaaKitEleventyOptions): void;
+//#endregion
+export { BuildAuditError, EaaKitEleventyOptions, EleventyAfterEvent, EleventyConfigLike, eaaKit as default };

package/dist/eleventy/index.js

@@ -0,0 +1,19 @@
+import { n as auditBuild, r as stderrLogger, t as BuildAuditError } from "../run-C2nKFcb-.js";
+import path from "node:path";
+//#region src/eleventy/index.ts
+/**
+* Usable both as a bare plugin and as a configured one.
+*
+* `addPlugin(eaaKit)` and `addPlugin(eaaKit, { failOn: 'moderate' })` are both
+* how Eleventy plugins are written, and a plugin that only supported the second
+* would be the one people got wrong.
+*/
+function eaaKit(eleventyConfig, options = {}) {
+	eleventyConfig.on("eleventy.after", async (event) => {
+		if (event.runMode !== void 0 && event.runMode !== "build") return;
+		if (event.outputMode !== void 0 && event.outputMode !== "fs") return;
+		await auditBuild(path.resolve(event.dir.output), options, stderrLogger());
+	});
+}
+//#endregion
+export { BuildAuditError, eaaKit as default };

package/dist/fingerprint-BjYV_0F7.js

@@ -0,0 +1,67 @@
+import { createHash } from "node:crypto";
+//#region src/audit/fingerprint.ts
+/**
+* A stable identity for one violating element.
+*
+* Derived from the rule, the selector and the element's own opening tag, and
+* deliberately not from the file it was found in. Two consumers need this and
+* they need it to agree: SARIF, so that moving a page does not close one code
+* scanning alert and open an identical one, and the baseline, so that an
+* accepted violation stays accepted when the surrounding page changes.
+*
+* Sixteen hex characters. This identifies a defect for humans and tooling, not
+* a secret, and a full digest in every entry would make a baseline file for a
+* large site unreadable.
+*/
+function elementFingerprint(ruleId, selector, html) {
+	return createHash("sha256").update(`${ruleId}\n${selector}\n${openingTag(html)}`).digest("hex").slice(0, 16);
+}
+/**
+* The element's own tag, without anything nested inside it.
+*
+* axe-core hands back the failing element's outerHTML, which for a leaf like
+* `<img>` is the element and for a container is the element and every
+* descendant it has. Hashing all of that made the identity of a container
+* depend on its contents — and the container that matters here is `<html>`,
+* which every document-level rule fails against: `html-has-lang`,
+* `document-title`, `landmark-one-main`, `page-has-heading-one`.
+*
+* Their outerHTML is the whole page. So adding one paragraph anywhere changed
+* the fingerprint of every document-level violation on that page, and all three
+* consumers believed it:
+*
+* - the baseline stopped suppressing barriers it had accepted, and the build
+*   went red on a page whose only change was a typo fix;
+* - `diff` reported the same untouched barrier as both new and **fixed**, which
+*   is the one thing it exists to refuse to do;
+* - SARIF churned its partialFingerprints, so code scanning closed an alert and
+*   opened an identical one on every edit.
+*
+* The identity of an element is its own tag and attributes. Where two elements
+* share those, axe-core's selector already tells them apart — it qualifies
+* ambiguous matches with `:nth-child(…)` — so nothing that was distinguishable
+* before stops being distinguishable now.
+*
+* Anything that is not an element — the empty string a rule with no attached
+* node carries — is returned unchanged, so those keep the identity they had.
+*/
+function openingTag(html) {
+	const trimmed = html.trim();
+	if (!trimmed.startsWith("<")) return trimmed;
+	let quote;
+	for (let i = 1; i < trimmed.length; i += 1) {
+		const char = trimmed[i];
+		if (quote !== void 0) {
+			if (char === quote) quote = void 0;
+			continue;
+		}
+		if (char === "\"" || char === "'") {
+			quote = char;
+			continue;
+		}
+		if (char === ">") return trimmed.slice(0, i + 1);
+	}
+	return trimmed;
+}
+//#endregion
+export { elementFingerprint as t };

package/dist/{frameworks-BYa3tULg.js → frameworks-B4ClIJgE.js}

@@ -156,6 +156,77 @@ const FRAMEWORKS = [
 		outputs: ["_site"],
 		serves: false
 	},
+	{
+		id: "wordpress",
+		name: "WordPress",
+		packages: [],
+		files: [
+			"wp-config.php",
+			"wp-config-sample.php",
+			"wp-load.php"
+		],
+		outputs: [],
+		serves: true,
+		serveCommand: "wp-env start, ddev start, or whichever local stack this site uses"
+	},
+	{
+		id: "typo3",
+		name: "TYPO3",
+		packages: [],
+		files: [
+			"typo3conf",
+			"public/typo3conf",
+			"typo3"
+		],
+		outputs: [],
+		serves: true,
+		serveCommand: "ddev start, or your usual local stack"
+	},
+	{
+		id: "craft",
+		name: "Craft CMS",
+		packages: [],
+		files: ["craft"],
+		outputs: [],
+		serves: true,
+		serveCommand: "ddev start, or php craft serve"
+	},
+	{
+		id: "laravel",
+		name: "Laravel",
+		packages: [],
+		files: ["artisan"],
+		outputs: [],
+		serves: true,
+		serveCommand: "php artisan serve"
+	},
+	{
+		id: "symfony",
+		name: "Symfony",
+		packages: [],
+		files: ["bin/console", "symfony.lock"],
+		outputs: [],
+		serves: true,
+		serveCommand: "symfony serve, or php -S localhost:8000 -t public"
+	},
+	{
+		id: "rails",
+		name: "Ruby on Rails",
+		packages: [],
+		files: ["bin/rails", "config.ru"],
+		outputs: [],
+		serves: true,
+		serveCommand: "bin/rails server"
+	},
+	{
+		id: "django",
+		name: "Django",
+		packages: [],
+		files: ["manage.py"],
+		outputs: [],
+		serves: true,
+		serveCommand: "python manage.py runserver"
+	},
 	{
 		id: "vite",
 		name: "Vite",

package/dist/{frameworks-DaDqrJOw.js → frameworks-etFg_O8K.js}

@@ -1,2 +1,2 @@
-import { i as detectFramework, t as FALLBACK_OUTPUTS } from "./frameworks-BYa3tULg.js";
+import { i as detectFramework, t as FALLBACK_OUTPUTS } from "./frameworks-B4ClIJgE.js";
 export { FALLBACK_OUTPUTS, detectFramework };

package/dist/{html-DKiI_3gs.js → html-C4vktg0A.js}

@@ -1,8 +1,10 @@
-import { a as impactRank, i as impactLabel, r as countAtOrAbove } from "./impact-YdoOtFqm.js";
-import { a as standardsReference, i as escapeText, n as count, r as escapeAttribute, t as collapse } from "./text-BFmNtMsV.js";
+import { a as impactRank, i as impactLabel, r as countAtOrAbove } from "./impact-DZt2oBCP.js";
+import { i as escapeText, n as count, o as standardsReference, r as escapeAttribute, t as collapse } from "./text-CKKpzkYM.js";
 import { t as TOOL_VERSION } from "./version-B3v4rNoG.js";
-import { a as groupIssues, i as coverageParts, n as understandingUrl, o as isShared, r as blindRules, t as manualCheckFor } from "./manual-Vz-oX1I_.js";
-import { n as buildSummary } from "./json-Cnv9nd6U.js";
+import { a as isShared, i as groupIssues, n as blindRules, o as discoveryLabel, r as coverageParts, s as missedParts, t as remediationFor } from "./remediation-CMBIrnpN.js";
+import { r as componentPath } from "./component-C3GL1Mnu.js";
+import { i as understandingUrl, r as manualCheckFor, t as buildCoverage } from "./coverage-B_Y6l-Ra.js";
+import { n as buildSummary } from "./json-DROX33kh.js";
 import axe from "axe-core";
 //#region src/audit/report/html.ts
 /**
@@ -56,9 +58,11 @@ ${verdict(audits, failing, options)}
 ${scoreboard(audits)}
 ${issues(audits, options)}
 ${runDetails(audits, engine, generatedAt, options)}
+${notMeasured(options)}
 ${summary(audits, failing, options)}
 ${pages(audits)}
 ${notEvaluated(audits)}
+${coverageSection(audits)}
 ${footer()}
 </main>
 </body>
@@ -79,6 +83,8 @@ function verdict(audits, failing, options) {
 	if (failing > 0) return banner("fail", "Violations found", `${count(failing, "violation")} at or above ${escapeText(options.failOn)}.`);
 	const below = totalViolations(audits) - failing;
 	if (below > 0) return banner("pass", "No violations at the threshold", `${count(below, "violation")} below ${escapeText(options.failOn)}, which do not fail the run.`);
+	const completeness = options.completeness;
+	if (completeness && !completeness.complete) return banner("partial", "No violations found, but the whole site was not measured", `${escapeText(missedParts(completeness).join(", "))}. This report describes ${count(completeness.audited, "page")}, not the site.`);
 	return banner("pass", "No violations found", "Automated testing found nothing to report.");
 }
 function banner(kind, heading, detail) {
@@ -94,8 +100,36 @@ function runDetails(audits, engine, generatedAt, options) {
 		["eaa-kit", `${TOOL_VERSION} · axe-core ${axe.version}`]
 	];
 	if (options.baseUrl) rows.splice(1, 0, ["Base URL", options.baseUrl]);
+	if (options.completeness) rows.splice(2, 0, ["Pages found via", discoveryLabel(options.completeness.discovery)]);
 	return `<h2>The run</h2>\n<dl class="run">\n${rows.map(([term, value]) => `  <div><dt>${escapeText(term)}</dt><dd>${escapeText(value)}</dd></div>`).join("\n")}\n</dl>`;
 }
+/** Pages named individually before the rest are counted. */
+const MAX_UNREACHABLE = 20;
+/**
+* The pages this run never reached, named rather than counted away.
+*
+* Named, because a count is not actionable: forty URLs that failed are a broken
+* link check, a server that fell over halfway, or a section behind a login, and
+* which of the three it was is only visible from the addresses. The reasons come
+* straight from the crawler, so a reader can tell a 404 from a timeout.
+*/
+function notMeasured(options) {
+	const completeness = options.completeness;
+	if (completeness === void 0 || completeness.complete) return "";
+	const parts = ["<h2>What this run did not measure</h2>", `<p>This report covers ${count(completeness.audited, "page")}. It is not a description of
+  the whole site, and a clean result here does not extend to anything listed below.</p>`];
+	if (completeness.truncated) parts.push(`<p class="note">The run stopped at its page limit, so pages beyond ${count(completeness.collected, "page")}
+  were never fetched. Raise <code>--max-pages</code> to go further.</p>`);
+	if (completeness.errored > 0) parts.push(`<p class="note">${count(completeness.errored, "page")} could not be audited after being
+  fetched, and ${completeness.errored === 1 ? "is" : "are"} not counted anywhere in this report.</p>`);
+	if (completeness.unreachable.length > 0) {
+		const shown = completeness.unreachable.slice(0, MAX_UNREACHABLE).map((item) => `  <li><code>${escapeText(item.location)}</code> — ${escapeText(item.reason)}</li>`).join("\n");
+		const rest = completeness.unreachable.length - MAX_UNREACHABLE;
+		parts.push(`<p>${count(completeness.unreachable.length, "page")} could not be reached:</p>`, `<ul class="unreachable">\n${shown}\n</ul>`);
+		if (rest > 0) parts.push(`<p class="note">…and ${count(rest, "more page")}.</p>`);
+	}
+	return parts.join("\n");
+}
 /**
 * The counts, taken from the JSON report's own tally rather than recomputed.
 *
@@ -193,6 +227,60 @@ ${manualBlock(ruleId, finding)}
   </li>`).join("\n")}
 </ul>`;
 }
+/**
+* How much of the standard this run could reach.
+*
+* Always included, and placed last, where a reader who has been through the
+* findings arrives at the limits of what produced them. The counts are shown as
+* four separate figures and never as a ratio: `no automated rule` is the
+* majority of WCAG, and a percentage would present a limit of automated testing
+* as a property of this site.
+*/
+function coverageSection(audits) {
+	const coverage = buildCoverage(audits);
+	const rows = coverage.criteria.map((criterion) => {
+		const url = understandingUrl(criterion.number);
+		const name = escapeText(`${criterion.number} ${criterion.title}`);
+		const linked = url === void 0 ? name : `<a href="${escapeAttribute(url)}">${name}</a>`;
+		return `  <tr class="${escapeAttribute(criterion.status)}">
+    <td>${linked}</td>
+    <td>${escapeText(criterion.level)}</td>
+    <td>${statusText(criterion)}</td>
+  </tr>`;
+	}).join("\n");
+	return `<h2>Coverage of WCAG 2.2 AA</h2>
+<p>Of the ${coverage.total} success criteria at Levels A and AA,
+  <strong>${coverage.noAutomatedRule}</strong> cannot be checked by any automated engine and
+  need a person. This run reached a verdict on <strong>${coverage.evaluated}</strong>.</p>
+<ul class="counts">
+  <li><strong>${coverage.evaluated}</strong> evaluated here</li>
+  <li><strong>${coverage.notEvaluated}</strong> not evaluated by this engine${coverage.browserWouldAnswer > 0 ? ` — a run with a real browser would answer ${coverage.browserWouldAnswer} of them` : ""}</li>
+  <li><strong>${coverage.nothingToCheck}</strong> had rules that ran and found nothing on this site to check</li>
+  <li><strong>${coverage.noAutomatedRule}</strong> have no automated rule at all</li>
+</ul>
+<p class="note">
+  These four are counted separately and never added together or divided into a score. Most
+  of WCAG cannot be automated, and a percentage here would present that limit of automated
+  testing as though it were a measurement of this site.
+</p>
+<div class="scroll">
+<table class="coverage">
+<thead><tr><th>Success criterion</th><th>Level</th><th>This run</th></tr></thead>
+<tbody>
+${rows}
+</tbody>
+</table>
+</div>`;
+}
+function statusText(criterion) {
+	const browser = criterion.browserWouldAnswer ? " <em>(a real browser would answer this)</em>" : "";
+	switch (criterion.status) {
+		case "evaluated": return `Evaluated${browser}`;
+		case "not-evaluated": return `This engine could not evaluate it${browser}`;
+		case "nothing-to-check": return "Rules ran and found nothing on this site to check";
+		case "no-automated-rule": return "No automated rule exists; a person must check it";
+	}
+}
 function footer() {
 	return `<hr>
 <footer>
@@ -242,6 +330,7 @@ li + li { margin-top: 0.5rem; }
 .verdict.pass { background: #eef7ee; border-color: #216e39; }
 .verdict.fail { background: #fdeeee; border-color: #a01b1b; }
 .verdict.broken { background: #fdf4e3; border-color: #8a5a00; }
+.verdict.partial { background: #fdf4e3; border-color: #8a5a00; }
 .badge { display: inline-block; padding: 0 0.45rem; border-radius: 3px; font-size: 0.8rem;
   font-weight: 600; border: 1px solid; }
 .badge.critical { background: #fdeeee; border-color: #a01b1b; color: #7a1414; }
@@ -261,6 +350,17 @@ p.rule { margin-bottom: 0.25rem; }
 p.standards, p.coverage, .reason, li.more, p.accepted-heading, ul.accepted { color: #4a4a4a; font-size: 0.9rem; }
 p.coverage { margin-top: 0.5rem; }
 ul.nodes { list-style: none; padding-left: 0; }
+ul.unreachable { padding-left: 1.25rem; }
+.remediation { border-left: 3px solid #c9c9c9; padding: 0.1rem 0 0.1rem 0.75rem; margin: 0.5rem 0; }
+.remediation .why { margin: 0.3rem 0; opacity: 0.85; }
+.remediation .fix { margin: 0.3rem 0; }
+pre.suggested { background: #eef7ee; border-left: 3px solid #216e39; padding: 0.5rem; overflow-x: auto; }
+.scroll { overflow-x: auto; }
+table.coverage { border-collapse: collapse; width: 100%; font-size: 0.95em; }
+table.coverage th, table.coverage td { text-align: left; padding: 0.3rem 0.6rem; border-bottom: 1px solid #e3e3e3; vertical-align: top; }
+table.coverage tr.evaluated td:last-child { color: #216e39; }
+table.coverage em { font-style: normal; opacity: 0.75; }
+ul.unreachable li { margin-bottom: 0.2rem; overflow-wrap: anywhere; }
 code.selector { color: #4a4a4a; }
 p.clean { color: #216e39; }
 p.note { font-size: 0.95rem; }
@@ -306,6 +406,11 @@ ul.page-list { margin: 0.35rem 0 0; padding-left: 1.25rem; }
   .verdict.pass { background: #10240f; border-color: #7ee2a8; }
   .verdict.fail { background: #2b1111; border-color: #ff9d9d; }
   .verdict.broken { background: #2b2310; border-color: #ffd28a; }
+  .verdict.partial { background: #2b2310; border-color: #ffd28a; }
+  table.coverage th, table.coverage td { border-bottom-color: #333; }
+  table.coverage tr.evaluated td:last-child { color: #7ee2a8; }
+  .remediation { border-left-color: #555; }
+  pre.suggested { background: #10240f; border-left-color: #7ee2a8; }
   .tile.critical { background: #2b1111; border-color: #ff9d9d; color: #ffc9c9; }
   .tile.serious { background: #2b1d11; border-color: #ffb98a; color: #ffd7bd; }
   .tile.moderate { background: #2b2610; border-color: #f0d264; color: #f5e3a4; }
@@ -377,17 +482,37 @@ function issueSection(issue, options) {
 	return `<li class="issue">
 <h3><span class="badge ${impact}">${impact}</span> <code>${escapeText(issue.ruleId)}</code> ${criteria}</h3>
 <p class="help">${escapeText(issue.help)}</p>
+${remediationBlock(issue.ruleId, issue.elements[0]?.html, options)}
 ${issue.elements.slice(0, MAX_NODES).map((element) => issueElement(element, options)).join("\n")}
 ${issue.elements.length > MAX_NODES ? `<p class="more">…and ${count(issue.elements.length - MAX_NODES, "more element")}</p>` : ""}
 </li>`;
 }
+/**
+* What to do about the rule, beside the finding rather than behind a link.
+*
+* The corrected line is built from the element that actually failed. A textbook
+* snippet is a second thing to translate before anybody can use it, and this
+* document is read by people who did not run the audit and may not write the
+* code either — the closer it gets to the line as it should have been, the less
+* of that translation is left to them.
+*/
+function remediationBlock(ruleId, html, options) {
+	const remediation = remediationFor(ruleId, options.framework);
+	if (remediation === void 0) return "";
+	const example = html === void 0 ? void 0 : remediation.example?.(html);
+	return `<div class="remediation">
+<p class="why">${escapeText(remediation.why)}</p>
+<p class="fix"><strong>Fix.</strong> ${escapeText(remediation.fix)}</p>
+${example === void 0 ? "" : `<pre class="suggested"><code>${escapeText(collapse(example, MAX_SNIPPET))}</code></pre>`}
+</div>`;
+}
 function issueElement(element, options) {
 	const sources = [...new Set(element.pages.map((page) => options.sourceFor?.(page)).filter((source) => source !== void 0))];
 	const list = element.pages.map((page) => `<li>${escapeText(page)}</li>`).join("");
 	const component = options.componentFor?.(element.html);
 	return `<div class="element">
 <pre><code>${escapeText(collapse(element.html, MAX_SNIPPET))}</code></pre>
-${component === void 0 ? "" : `<p class="written-in">Written in <code>${escapeText(component)}</code></p>`}
+${component === void 0 ? "" : `<p class="written-in">Written in <code>${escapeText(componentPath(component))}</code></p>`}
 ${element.selector === "" ? "" : `<p class="selector"><code>${escapeText(element.selector)}</code></p>`}
 <p class="reach">Found on ${count(element.pages.length, "page")}.${isShared(element) ? " <strong>Identical on each — likely one shared component.</strong>" : ""}</p>
 ${sources.length > 0 ? `<p class="sources">Source: ${sources.map((source) => `<code>${escapeText(source)}</code>`).join(", ")}</p>` : ""}

package/dist/{impact-YdoOtFqm.js → impact-DZt2oBCP.js}

@@ -43,4 +43,4 @@ function countAtOrAbove(audits, threshold) {
 	return total;
 }
 //#endregion
-export { impactRank as a, impactLabel as i, IMPACT_LEVELS as n, isImpactLevel as o, countAtOrAbove as r, DEFAULT_FAIL_ON as t };
+export { impactRank as a, impactLabel as i, IMPACT_LEVELS as n, isImpactLevel as o, countAtOrAbove as r, meetsThreshold as s, DEFAULT_FAIL_ON as t };