): string {
const cells = IMPACTS.map((i) => `| ${i} | ${counts[i]} |
|---|
`).join("");
return ``;
}
/** A colour value with a swatch; the swatch is drawn only for a plain hex colour, so stored data cannot inject CSS. */
function colour(value: string): string {
const swatch = /^#[0-9a-f]{6}$/i.test(value) ? ` ` : "";
return `${swatch}${escapeHtml(value)}`;
}
function issueHtml(issue: Issue, status?: IssueStatus): string {
const t = issue.text;
const tags = [
`${escapeHtml(issue.impact)}`,
`${issue.level === "best-practice" ? "best practice" : `WCAG ${escapeHtml(issue.level)}`}`,
status ? `${status}` : "",
].join("");
const criteria = issue.criteria.map((c) => `${link(c.url, `${c.sc} ${c.name} (${c.level})`)}`).join("");
const c = issue.contrast;
const contrast = c
? `Contrast: ${escapeHtml(String(c.ratio))}:1, needs ${escapeHtml(String(c.required))}:1. ` +
`Text ${colour(c.foreground)} on ${colour(c.background)}.` +
(c.suggestion ? ` A foreground that passes: ${colour(c.suggestion)}.` : "") +
`
`
: "";
const example = t.example
? `Before:
${escapeHtml(t.example.before)}
` +
`After:
${escapeHtml(t.example.after)}
`
: "";
return (
`${escapeHtml(t.title)}
${tags}
` +
`Element: ${escapeHtml(issue.selector)}
` +
`${escapeHtml(issue.snippet)}
` +
`What is wrong: ${escapeHtml(t.whatIsWrong)}
` +
`Who is affected: ${escapeHtml(t.whoIsAffected)}
` +
contrast +
`How to fix:
${t.fixSteps.map((s) => `- ${escapeHtml(s)}
`).join("")}
` +
example +
(criteria ? `` : "") +
`Rule ${link(issue.helpUrl, issue.ruleId)}
`
);
}
function issuesHtml(issues: readonly Issue[], comparison: Comparison | undefined): string {
const unchanged = new Set(comparison?.unchanged.map((i) => i.key));
const body = issues
.map((i) => issueHtml(i, comparison ? (unchanged.has(i.key) ? "unchanged" : "new") : undefined))
.join("");
const fixed =
comparison && comparison.fixed.length > 0
? `Fixed since the previous run (${comparison.fixed.length})
` +
comparison.fixed.map((i) => issueHtml(i, "fixed")).join("")
: "";
return (issues.length === 0 ? "No issues found by the automated checks.
" : body) + fixed;
}
function page(title: string, body: string): string {
return (
`` +
`` +
`` +
`${escapeHtml(title)}${body}\n`
);
}
function settingsLine(r: PageResult | SiteScan): string {
return `WCAG 2.2 level ${escapeHtml(r.settings.level)}${r.settings.bestPractice ? " and best-practice rules" : ""}`;
}
/**
* A self-contained printable report: inline CSS, no scripts, every text escaped. With a comparison, each issue is
* marked new or unchanged and fixed issues are listed per page.
*/
export function toHtmlReport(r: PageResult | SiteScan, comparison?: Comparison | ScanComparison): string {
const note = `${escapeHtml(AUTOMATED_LIMIT_NOTE)}
`;
if (!isSiteScan(r)) {
const c = comparison && !("byPage" in comparison) ? comparison : undefined;
const untested =
r.untestedFrames.length > 0
? `Frames not tested: ${r.untestedFrames.map((f) => `${escapeHtml(f)}`).join(", ")}
`
: "";
const headings = r.outline.headings
.map((h) => `h${escapeHtml(String(h.level))}${h.skipped ? " (level skipped)" : ""}: ${escapeHtml(h.text)}`)
.join("");
const outline =
r.outline.problems.length + r.outline.headings.length > 0
? `Structure
` +
(r.outline.problems.length > 0 ? `${r.outline.problems.map((p) => `- ${escapeHtml(p)}
`).join("")}
` : "") +
(headings ? `Headings
` : "")
: "";
return page(
`${PRODUCT.name} report: ${r.title || r.url}`,
`${escapeHtml(PRODUCT.name)} accessibility report
` +
`${link(r.url, r.title || r.url)}
Checked ${escapeHtml(r.checkedAt)} against ${settingsLine(r)}
` +
note +
countsTable(r.counts) +
untested +
outline +
`Issues (${r.issues.length})
` +
issuesHtml(r.issues, c),
);
}
const c = comparison && "byPage" in comparison ? comparison : undefined;
const counts = countByImpact(r.pages.flatMap((p) => p.issues));
const totals = c
? `Since the previous scan: ${c.totals.new} new, ${c.totals.unchanged} unchanged, ${c.totals.fixed} fixed.
`
: "";
const pages = r.pages
.map(
(p) =>
`${link(p.url, p.title || p.url)}
` +
(p.error !== undefined
? `This page could not be checked: ${escapeHtml(p.error)}
`
: issuesHtml(p.issues, c?.byPage[p.url])),
)
.join("");
return page(
`${PRODUCT.name} site report: ${r.origin}`,
`${escapeHtml(PRODUCT.name)} site accessibility report
` +
`${escapeHtml(r.origin)}: ${r.pages.length} pages${r.stopped ? " (scan stopped early)" : ""}
` +
`Started ${escapeHtml(r.startedAt)}${r.finishedAt ? `, finished ${escapeHtml(r.finishedAt)}` : ""}, ` +
`against ${settingsLine(r)}
` +
note +
countsTable(counts) +
totals +
pages,
);
}
// ---------- SARIF ----------
const SARIF_LEVEL: Record = {
critical: "error",
serious: "error",
moderate: "warning",
minor: "note",
};
/** SARIF 2.1.0 log with one run; rules are listed once, results point to the file and the element selector. */
export function toSarif(files: readonly { uri: string; issues: readonly Issue[] }[]): string {
const rules: object[] = [];
const ruleIndex = new Map();
const results: object[] = [];
for (const file of files) {
for (const issue of file.issues) {
let index = ruleIndex.get(issue.ruleId);
if (index === undefined) {
index = rules.length;
ruleIndex.set(issue.ruleId, index);
const steps = issue.text.fixSteps.map((s, n) => `${n + 1}. ${s}`).join("\n");
rules.push({
id: issue.ruleId,
shortDescription: { text: issue.text.title },
fullDescription: { text: issue.text.whatIsWrong },
helpUri: issue.helpUrl,
help: { text: steps, markdown: steps },
properties: {
tags: ["accessibility", issue.level, ...issue.criteria.map((c) => `WCAG ${c.sc}`)],
},
});
}
results.push({
ruleId: issue.ruleId,
ruleIndex: index,
level: SARIF_LEVEL[issue.impact],
message: { text: `${issue.text.title}. ${issue.text.whatIsWrong}` },
locations: [
{
physicalLocation: { artifactLocation: { uri: file.uri } },
logicalLocations: [{ fullyQualifiedName: issue.selector, kind: "element" }],
},
],
partialFingerprints: { "waysillKey/v1": issue.key },
properties: { impact: issue.impact, criteria: issue.criteria.map((c) => `${c.sc} ${c.name} (${c.level})`).join("; ") },
});
}
}
const log = {
$schema: "https://json.schemastore.org/sarif-2.1.0.json",
version: "2.1.0",
runs: [{ tool: { driver: { name: PRODUCT.name, informationUri: PRODUCT.urls.home, rules } }, results }],
};
return `${JSON.stringify(log, null, 2)}\n`;
}