@krizaka/page-audit 0.2.0 → 0.3.1

package/README.md

@@ -18,3 +18,24 @@ const problems = await auditRoutes({ base, routes: ["/en", "/fr"], checks: { h1:
 
 `auditContext` / `loadSettled` / `resizeSettled` open a context with reduced motion and no View Transition, and wait for none to run
 before anything is measured (yomizaka#354). `prepare(page, route)` signs in or seeds; `launch` gives your own browser.
+
+## The dev-preview crawls, in one audit (0.3)
+
+Opt-in through `checks` (nothing changes for a repo that does not ask): `status` (HTTP 4xx/5xx or no response), `emptyMain`, `frame`
+(the signed-in frame, `[data-app-frame-slot]`, forces a scroll), `minAction` (a button-styled action under N px), `boxes` (a landmark
+wider than its box), `landmarks` (`"public"` one footer naming Krizaka and a nav, `"app"`, `"auth"`), `pictures`, `emptyControls`,
+`hardColors`. Console noise the app tolerates: `ignoreConsole: [/…/]` (`[]` counts every error); `attempts` retries a route.
+
+```js
+const routes = await routesFromSitemap(base, { first: ["/", "/docs"], limit: 14 }); // a crawl as the route source (null: nothing answers)
+await auditRoutes({
+  base, routes: [...routes, { url: "/login", chrome: "auth" }, { url: "/chat", session: true, chrome: "app" }],
+  widths: [{ width: 1440, height: 900 }, { width: 390, height: 844 }],
+  session: { storageState }, // or { signIn(context, { base, theme }) {…}, routes: async (page) => […] } for pages found once signed in
+  a11y: { app: "my-app", baseline: "a11y-baseline.json", widths: [390, 1440], session: { app: "my-app-app", baseline: "a11y-baseline.app.json" } },
+  checks: { status: true, emptyMain: true, minAction: 36, landmarks: "public", frame: true },
+});
+```
+
+`a11y` runs axe through `@krizaka/a11y-audit` (an optional peer) and ratchets with the repo's own baseline file; `--a11y-update` and
+`--a11y-init` work as there. The CLI takes `--sitemap`, `--status`, `--empty-main`, `--min-action`, `--a11y app:baseline.json`.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@krizaka/page-audit",
-  "version": "0.2.0",
-  "description": "The page audit of every Krizaka app, in one place: horizontal overflow, a card out of its panel, sections covering each other, a column cut off, top chrome overlaps, unnamed buttons, empty headings. Runs in a real browser (Playwright) over a route list, viewports and themes, with View Transitions neutralised and a self-test on its own fixtures.",
+  "version": "0.3.1",
+  "description": "The page audit of every Krizaka app, in one place: HTTP status, empty main, horizontal overflow, a card out of its panel, sections covering each other, a column cut off, top chrome overlaps, unnamed buttons, empty headings. Runs in a real browser (Playwright) over a route list, viewports and themes, with View Transitions neutralised and a self-test on its own fixtures.",
   "keywords": [
     "krizaka",
     "audit",
@@ -43,14 +43,21 @@
   ],
   "sideEffects": false,
   "peerDependencies": {
+    "@krizaka/a11y-audit": ">=0.2.0",
     "playwright-core": ">=1.40"
   },
+  "peerDependenciesMeta": {
+    "@krizaka/a11y-audit": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@krizaka/a11y-audit": "0.2.0",
     "@types/node": "^22.10.0",
     "eslint": "^9.39.0",
     "playwright-core": "^1.55.0",
     "vitest": "^4.1.11",
-    "@krizaka/config": "^0.13.0"
+    "@krizaka/config": "^0.14.0"
   },
   "engines": {
     "node": ">=22"

package/src/cli.mjs

@@ -1,7 +1,8 @@
 #!/usr/bin/env node
 // krizaka-page-audit --base http://localhost:3000 --routes /en,/fr [--widths 360,390,1440] [--themes dark,light]
-//                    [--theme-key kz-theme] [--h1] [--shots dir]     |     krizaka-page-audit --self-test
-import { auditRoutes, THEMES, WIDTHS } from "./run.mjs";
+//                    [--theme-key kz-theme] [--h1] [--shots dir]
+//                    [--sitemap [--limit 14]] [--status] [--empty-main] [--min-action 36] [--a11y app:baseline.json]     |     krizaka-page-audit --self-test
+import { auditRoutes, routesFromSitemap, THEMES, WIDTHS } from "./run.mjs";
 import { selfTest } from "./self-test.mjs";
 
 const arg = (name, fallback) => {
@@ -16,12 +17,19 @@ if (process.argv.includes("--self-test")) {
     console.error(`page-audit self-test failed:\n  ${failures.join("\n  ")}`);
     process.exit(1);
   }
-  console.log("page-audit self-test: 4 broken layouts seen, the fine ones clean");
+  console.log("page-audit self-test: every broken layout seen, the fine ones clean");
 } else {
-  const routes = list(arg("routes"), ["/"]);
+  const base = arg("base", "http://localhost:3000");
+  const has = (name) => process.argv.includes(`--${name}`);
+  const routes = has("sitemap") ? await routesFromSitemap(base, { first: list(arg("routes"), ["/"]), limit: Number(arg("limit", 14)) }) : list(arg("routes"), ["/"]);
+  if (!routes) {
+    console.error(`Nothing answers at ${base}/sitemap.xml`);
+    process.exit(2);
+  }
+  const [app, baseline] = (arg("a11y") ?? "").split(":");
   const widths = list(arg("widths"), WIDTHS).map(Number);
   const themes = list(arg("themes"), THEMES);
-  const problems = await auditRoutes({ base: arg("base", "http://localhost:3000"), routes, widths, themes, themeKey: arg("theme-key", "kz-theme"), shots: arg("shots"), checks: { h1: process.argv.includes("--h1") } });
+  const problems = await auditRoutes({ base, routes, widths, themes, themeKey: arg("theme-key", "kz-theme"), shots: arg("shots"), a11y: baseline ? { app, baseline } : undefined, checks: { h1: has("h1"), status: has("status"), emptyMain: has("empty-main"), minAction: arg("min-action") ? Number(arg("min-action")) : undefined } });
   if (problems.length) {
     console.error(`${problems.length} page problem(s):\n  ${problems.join("\n  ")}`);
     process.exit(1);

package/src/fixtures.mjs

@@ -27,3 +27,24 @@ export const HIDDEN_CONTENT = page(
 export const FOLDED_SECTION = page(
   `<div style="display:flex;flex-direction:column"><section data-testid="facts" style="height:80px">Faits</section><details><summary>Détails</summary><section data-testid="closing-note" style="padding:16px">Ce que nous avons vérifié</section></details><section data-testid="other" style="height:80px">Autres</section></div>`,
 );
+
+/** A page whose `<main>` draws nothing. */
+export const EMPTY_MAIN = page("");
+/** The signed-in frame asks 1000 px of a 700 px screen under a 60 px notice (akinaza#444). */
+export const FRAME_FORCES_SCROLL = page(`<div style="height:60px">notice</div><div data-app-frame-slot><div style="min-height:1000px">shell</div></div>`);
+/** The same frame, sized to what is left of the screen. */
+export const FRAME_FITS = page(`<div style="height:60px">notice</div><div data-app-frame-slot><div style="min-height:500px">shell</div></div>`);
+/** A button-styled action 24 px tall, under the 36 px tap target. */
+export const SMALL_ACTION = page(`<a class="kz-button" href="/" style="display:block;height:24px;width:120px">Go</a>`);
+/** A landmark whose content is wider than its box. */
+export const BOX_TOO_WIDE = page(`<aside style="width:200px"><div style="width:500px">wide</div></aside>`);
+/** Broken picture, a tile that draws nothing, an inline hard-coded colour. */
+export const BROKEN_PARTS = page(`<img src="data:image/png;base64,AAAA" width="40" height="40" alt=""><a href="/" style="display:block;width:60px;height:60px"></a><p style="color:#ff0000">x</p>`);
+/** Chrome that fits the family: one footer naming Krizaka, a nav. */
+export const CHROME_FINE = `<!doctype html><html><body><nav>n</nav><main><p>Hello</p></main><footer>A Krizaka product</footer></body></html>`;
+export const CHROME_BAD = `<!doctype html><html><body><main><p>Hello</p></main><footer>one</footer><footer>two</footer></body></html>`;
+
+/** A short token in a table row stretched by a tall neighbour: the cell is tall, its text is one line. */
+export const TOKEN_IN_STRETCHED_ROW = page(`<table style="width:600px"><tbody><tr><td>orazaka-media-pack</td><td>${"A long description. ".repeat(30)}</td></tr></tbody></table>`);
+/** An identifier in a narrow cell that breaks every few characters. */
+export const TOKEN_WRAPPED = page(`<table style="width:100px;table-layout:fixed"><tbody><tr><td style="word-break:break-all;font-size:20px">abcdefghijklmnopqrstuvwxyz0123456789</td></tr></tbody></table>`);

package/src/index.d.ts

@@ -3,7 +3,13 @@ export type Page = Record<string, unknown>;
 export type BrowserContext = Record<string, unknown>;
 export type Browser = { newContext(o?: object): Promise<BrowserContext>; close(): Promise<void> };
 export const auditPage: string;
-export interface ProblemChecks { errors?: string[]; h1?: boolean; headerAction?: boolean; fileLabels?: boolean }
+export type Chrome = "public" | "app" | "auth";
+export interface ProblemChecks {
+  errors?: string[]; h1?: boolean; headerAction?: boolean; fileLabels?: boolean;
+  /** HTTP status of the load (`null`: no response); a 4xx/5xx is a problem. */
+  status?: number | null;
+  emptyMain?: boolean; frame?: boolean; minAction?: number; boxes?: boolean; landmarks?: Chrome; pictures?: boolean; emptyControls?: boolean; hardColors?: boolean;
+}
 export function problemsOf(where: string, result: Record<string, unknown>, checks?: ProblemChecks): string[];
 export function auditOptions<T extends object>(options?: T): T & { reducedMotion: "reduce" };
 export function withoutViewTransitions(): void;
@@ -13,9 +19,18 @@ export function loadSettled(page: Page, url: string, options?: object): Promise<
 export function resizeSettled(page: Page, size: { width: number; height: number }): Promise<void>;
 export const WIDTHS: number[];
 export const THEMES: string[];
-export function isPageError(message: { type(): string; text(): string }): boolean;
+export function isPageError(message: { type(): string; text(): string }, ignore?: RegExp[]): boolean;
+export function routesFromSitemap(base: string, options?: { first?: string[]; limit?: number; fetcher?: typeof fetch }): Promise<string[] | null>;
+export interface RouteSpec { url: string; name?: string; chrome?: Chrome; session?: boolean }
+export interface A11yOptions { app: string; baseline: string; widths?: number[]; log?: (line: string) => void; session?: { app: string; baseline: string } }
+export interface SessionOptions {
+  storageState?: object | string;
+  signIn?: (context: BrowserContext, o: { base: string; theme: string; page: Page }) => Promise<void>;
+  routes?: (page: Page, o: { base: string; theme: string }) => Promise<Array<string | RouteSpec>>;
+}
 export interface AuditRoutesOptions {
-  base: string; routes: string[]; widths?: number[]; themes?: string[]; height?: number; themeKey?: string; shots?: string; settleMs?: number;
+  base: string; routes: Array<string | RouteSpec>; widths?: Array<number | { width: number; height?: number }>; themes?: string[]; height?: number; themeKey?: string; shots?: string; settleMs?: number;
+  ignoreConsole?: RegExp[]; attempts?: number; a11y?: A11yOptions; session?: SessionOptions;
   checks?: Omit<ProblemChecks, "errors">; prepare?: (page: Page, route: string) => Promise<void>; launch?: () => Promise<BrowserContext>;
 }
 export function auditRoutes(options: AuditRoutesOptions): Promise<string[]>;

package/src/index.mjs

@@ -1,4 +1,4 @@
 export { auditPage, problemsOf } from "./page-audit.mjs";
-export { auditRoutes, isPageError, THEMES,WIDTHS } from "./run.mjs";
+export { auditRoutes, isPageError, routesFromSitemap, THEMES, WIDTHS } from "./run.mjs";
 export { selfTest } from "./self-test.mjs";
 export { auditContext, auditOptions, loadSettled, resizeSettled,settled, withoutViewTransitions } from "./settle.mjs";

package/src/page-audit.mjs

@@ -17,7 +17,7 @@ const apart = (a, b) => !a.contains(b) && !b.contains(a);
 /** An element that pokes out only matters when nothing clips it: decorative layers (aria-hidden) and anything inside a clipping or scrolling ancestor are meant to extend. */
 function clipped(el) {
   for (let n = el; n && n !== document.body; n = n.parentElement) {
-    if (n.getAttribute("aria-hidden") === "true") return true;
+    if (n.getAttribute("aria-hidden") === "true" || n.hasAttribute("inert")) return true;
     if (n !== el && ["hidden", "clip", "auto", "scroll"].includes(getComputedStyle(n).overflowX)) return true;
   }
   return false;
@@ -27,7 +27,7 @@ function wideOf(doc) {
   return [...document.querySelectorAll("body *")]
     .filter((el) => {
       const r = el.getBoundingClientRect();
-      return r.width > 0 && (r.right > doc.clientWidth + 1 || r.left < -1) && !clipped(el);
+      return r.width > 0 && getComputedStyle(el).visibility !== "hidden" && (r.right > doc.clientWidth + 1 || r.left < -1) && !clipped(el);
     })
     .slice(0, 3)
     .map((el) => `${el.tagName.toLowerCase()}.${String(el.className).split(" ").slice(0, 3).join(".")}`);
@@ -164,14 +164,15 @@ function clipsOf() {
     .map(nameOf);
 }
 
-/** A long token (an id, an address) that wraps character by character: a cell taller than two lines for text without a space. */
+/** A long token (an id, an address) that wraps character by character: text without a space whose own lines (not the cell's, which a taller neighbour in the row stretches) are more than two and a half. */
 function tooTall(el) {
   const text = (el.textContent || "").trim();
   if (text.length < 12 || /\s/.test(text) || el.children.length > 1) return false;
   const cs = getComputedStyle(el);
   const lh = Number.parseFloat(cs.lineHeight) || Number.parseFloat(cs.fontSize) * 1.4;
-  const content = el.getBoundingClientRect().height - Number.parseFloat(cs.paddingTop) - Number.parseFloat(cs.paddingBottom);
-  return content > lh * 2.5;
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  return range.getBoundingClientRect().height > lh * 2.5;
 }
 
 function wrappedOf() {
@@ -192,6 +193,74 @@ function unlabelledFilesOf() {
   return [...document.querySelectorAll("input[type=file]")].filter((i) => !(i.getAttribute("aria-label") || i.getAttribute("aria-labelledby") || i.title || i.labels?.length)).length;
 }
 
+/** `<main>` with no text at all: the page answered but drew nothing (a route that fell through, a failed fetch). */
+function emptyMainOf() {
+  return document.querySelector("main")?.innerText.trim().length === 0;
+}
+
+/** Height of every action of the page's main (a button-styled link): the tap targets the responsive guard keeps over `minAction`. */
+function actionsOf() {
+  return [...document.querySelectorAll("main a[class*='kz-button'], main a[data-slot='button'], main .kz-button")].filter((a) => a.getBoundingClientRect().width > 0).map((a) => Math.round(a.getBoundingClientRect().height));
+}
+
+/**
+ * The signed-in frame's own screen (akinaza#444): its shell (`min-height`) and its sticky rail must fit in what is left of the viewport
+ * under the notice, or every page, an empty one included, scrolls by the notice's height. `null` when the page has no `[data-app-frame-slot]`.
+ */
+function frameOf(doc) {
+  const shell = document.querySelector("[data-app-frame-slot] > *");
+  if (!shell) return null;
+  const rail = [...shell.querySelectorAll("nav")].find((n) => getComputedStyle(n).position === "sticky");
+  return {
+    top: Math.round(shell.getBoundingClientRect().top + window.scrollY),
+    forced: Math.round(Math.max(Number.parseFloat(getComputedStyle(shell).minHeight) || 0, rail ? rail.getBoundingClientRect().height : 0)),
+    viewport: doc.clientHeight,
+  };
+}
+
+/** A landmark (`main`, `aside`, `header`, `nav`) whose content is wider than its own box, with nothing to scroll it. */
+function boxesOf() {
+  return [...document.querySelectorAll("main, aside, header, nav")]
+    .filter((box) => getComputedStyle(box).overflowX === "visible" && box.scrollWidth > box.clientWidth + 1 && box.clientWidth > 0)
+    .slice(0, 3)
+    .map((box) => `<${box.tagName.toLowerCase()}> ${box.scrollWidth}px in ${box.clientWidth}px`);
+}
+
+/** The family contract of the page chrome: the page's own footers (not those of an article or a dialog), whether the first names Krizaka, a navigation landmark. */
+function landmarksOf() {
+  const footers = [...document.querySelectorAll("footer")].filter((f) => !f.closest("main, article, section, dialog, [role=dialog]"));
+  return { footers: footers.length, footerNamesKrizaka: /krizaka/i.test(footers[0]?.textContent || ""), nav: !!document.querySelector("nav") };
+}
+
+/** A picture drawn at a real size that never loaded. */
+function brokenPicturesOf() {
+  return [...document.querySelectorAll("img")]
+    .filter((img) => {
+      const box = img.getBoundingClientRect();
+      return box.width > 8 && box.height > 8 && img.complete && img.naturalWidth === 0 && !!img.currentSrc;
+    })
+    .slice(0, 3)
+    .map((img) => img.currentSrc.slice(0, 80));
+}
+
+/** A control of the main that collapsed (under 4 px tall), or a tile that renders nothing (no text, label or image). */
+function emptyControlsOf() {
+  const found = [];
+  for (const el of document.querySelectorAll("main a[href], main button")) {
+    const box = el.getBoundingClientRect();
+    const style = getComputedStyle(el);
+    if (style.visibility === "hidden" || style.display === "none") continue;
+    if (box.width > 0 && box.height > 0 && box.height < 4) found.push(`collapsed control ${(el.getAttribute("aria-label") || el.textContent || "").trim().slice(0, 30)}`);
+    else if (box.width > 24 && box.height > 24 && !el.textContent?.trim() && !el.getAttribute("aria-label") && !el.getAttribute("aria-labelledby") && !el.querySelector("img, svg, video, picture, canvas")) found.push("empty tile");
+  }
+  return [...new Set(found)].slice(0, 3);
+}
+
+/** Elements whose inline style carries a colour that is not a token (`var(--kz-*)`). */
+function hardColorsOf() {
+  return [...document.querySelectorAll("[style]")].filter((e) => /#[0-9a-f]{3,8}\b|rgba?\(/i.test(e.getAttribute("style") || "") && !/var\(/.test(e.getAttribute("style") || "")).length;
+}
+
 function measurePage() {
   const doc = document.documentElement;
   const panels = [...document.querySelectorAll("[data-panel], main section, main [role=region]")].filter((el) => !el.closest(ARIA_HIDDEN) && !folded(el));
@@ -213,11 +282,19 @@ function measurePage() {
     emptyHeadings: emptyHeadingsOf(),
     unlabelledFiles: unlabelledFilesOf(),
     wrapped: wrappedOf(),
+    emptyMain: emptyMainOf(),
+    actions: actionsOf(),
+    frame: frameOf(doc),
+    boxes: boxesOf(),
+    landmarks: landmarksOf(),
+    brokenPictures: brokenPicturesOf(),
+    emptyControls: emptyControlsOf(),
+    hardColors: hardColorsOf(),
     segmentError: !!document.querySelector('[data-testid="segment-error"]'),
   };
 }
 
-const PROBES = [tooTall, wrappedOf, className, nameOf, scrolls, meets, apart, clipped, wideOf, named, unnamedOf, headerActionOf, folded, keptBetween, notDrawn, runsOut, spillOf, overlapsOf, cutBy, cutColumnsOf, topBoxOf, isTopBar, chromeOverlapsOf, clipsOf, emptyHeadingsOf, unlabelledFilesOf, measurePage];
+const PROBES = [tooTall, wrappedOf, className, nameOf, scrolls, meets, apart, clipped, wideOf, named, unnamedOf, headerActionOf, folded, keptBetween, notDrawn, runsOut, spillOf, overlapsOf, cutBy, cutColumnsOf, topBoxOf, isTopBar, chromeOverlapsOf, clipsOf, emptyHeadingsOf, unlabelledFilesOf, emptyMainOf, actionsOf, frameOf, boxesOf, landmarksOf, brokenPicturesOf, emptyControlsOf, hardColorsOf, measurePage];
 
 /** The expression Playwright runs in the page (`page.evaluate(auditPage)`): the probes, serialised together, then the measure. */
 export const auditPage = `(() => {\nconst ARIA_HIDDEN = ${JSON.stringify(ARIA_HIDDEN)};\n${PROBES.map((f) => `const ${f.name} = ${f.toString()};`).join("\n")}\nreturn measurePage();\n})()`;
@@ -234,8 +311,17 @@ function accessibilityProblems(where, result, fileLabels) {
   return problems;
 }
 
-export function problemsOf(where, result, { errors = [], h1 = false, headerAction = false, fileLabels = false } = {}) {
+export function problemsOf(where, result, { errors = [], h1 = false, headerAction = false, fileLabels = false, status, emptyMain = false, frame = false, minAction, boxes = false, landmarks, pictures = false, emptyControls = false, hardColors = false } = {}) {
   return [
+    ...statusProblems(where, status),
+    ...(emptyMain && result.emptyMain ? [`${where}: empty <main>`] : []),
+    ...(frame ? frameProblems(where, result.frame) : []),
+    ...(minAction ? actionProblems(where, result.actions ?? [], minAction) : []),
+    ...(boxes ? boxProblems(where, result.boxes ?? []) : []),
+    ...(landmarks ? landmarkProblems(where, result.landmarks, landmarks) : []),
+    ...(pictures && result.brokenPictures?.length ? [`${where}: broken picture ${result.brokenPictures.join(", ")}`] : []),
+    ...(emptyControls ? (result.emptyControls ?? []).map((c) => `${where}: ${c}`) : []),
+    ...(hardColors && result.hardColors ? [`${where}: ${result.hardColors} element(s) with a hard-coded colour in an inline style`] : []),
     ...errorsOf(where, errors),
     ...layoutProblems(where, result),
     ...(h1 ? namingProblems(where, result) : []),
@@ -285,3 +371,35 @@ function headerActionProblems(where, action) {
 function chipProblems(where, chips) {
   return chips.some((h) => h < 44) ? [`${where}: a chip is ${Math.min(...chips)} px tall (< 44)`] : [];
 }
+
+/** The HTTP status of the page's own load (`undefined`: not asked): a 4xx or 5xx, or no response at all. */
+function statusProblems(where, status) {
+  if (status === undefined) return [];
+  return status === null || status >= 400 ? [`${where}: HTTP ${status ?? "none"}`] : [];
+}
+
+/** The signed-in frame forces a scroll when what it asks of the screen (its shell, its rail) does not fit under what is above it. */
+function frameProblems(where, frame) {
+  if (!frame || frame.top + frame.forced <= frame.viewport + 1) return [];
+  return [`${where}: the frame forces a scroll (starts at ${frame.top} px and asks ${frame.forced} px of a ${frame.viewport} px screen)`];
+}
+
+/** A button-styled action under `min` px tall is hard to tap. */
+function actionProblems(where, actions, min) {
+  return actions.some((h) => h < min) ? [`${where}: an action is ${Math.min(...actions)} px tall (< ${min})`] : [];
+}
+
+function boxProblems(where, boxes) {
+  return boxes.map((b) => `${where}: never overflows — ${b} content wider than its box`);
+}
+
+/** `kind`: "public" (one page footer that names Krizaka, a nav), "app" (at most one footer, a nav), "auth" (at most one footer, no nav asked). */
+function landmarkProblems(where, found, kind) {
+  const problems = [];
+  if (kind === "public") {
+    if (found.footers !== 1) problems.push(`${where}: ${found.footers} page footers (one « A Krizaka product » footer expected)`);
+    else if (!found.footerNamesKrizaka) problems.push(`${where}: the footer does not name Krizaka`);
+  } else if (found.footers > 1) problems.push(`${where}: ${found.footers} page footers (at most one)`);
+  if (kind !== "auth" && !found.nav) problems.push(`${where}: no <nav> landmark`);
+  return problems;
+}

package/src/run.mjs

@@ -1,5 +1,5 @@
 // The audit over a route list: every route × viewport width × theme, in a real browser, the problems in words.
-import { mkdirSync } from "node:fs";
+import { existsSync, mkdirSync } from "node:fs";
 import { join } from "node:path";
 
 import { auditPage, problemsOf } from "./page-audit.mjs";
@@ -8,8 +8,8 @@ import { auditContext, loadSettled, resizeSettled } from "./settle.mjs";
 export const WIDTHS = [360, 390, 430, 768, 1024, 1440];
 export const THEMES = ["dark", "light"];
 
-/** A blocked third-party resource is not a page error; a script error and a hydration mismatch are. */
-export const isPageError = (message) => message.type() === "error" && !/Failed to load resource/.test(message.text());
+/** A blocked third-party resource is not a page error; a script error and a hydration mismatch are. `ignore`: the messages the app tolerates. */
+export const isPageError = (message, ignore = [/Failed to load resource/]) => message.type() === "error" && !ignore.some((re) => re.test(message.text()));
 
 async function chromiumOf(launch) {
   if (launch) return launch();
@@ -27,10 +27,10 @@ function rememberTheme([key, value]) {
 }
 
 /** The page's console errors and uncaught exceptions, read and cleared by `take()`. */
-function collectErrors(page) {
+function collectErrors(page, ignore) {
   let errors = [];
   page.on("console", (m) => {
-    if (isPageError(m)) errors.push(m.text().slice(0, 140));
+    if (isPageError(m, ignore)) errors.push(m.text().slice(0, 140));
   });
   page.on("pageerror", (e) => errors.push(String(e).slice(0, 140)));
   return {
@@ -42,55 +42,157 @@ function collectErrors(page) {
   };
 }
 
+const viewportOf = (w, height) => (typeof w === "number" ? { width: w, height } : { height, ...w });
+const specOf = (r) => (typeof r === "string" ? { url: r } : { ...r, url: r.url ?? r.route });
+const nameOfRoute = (r) => r.name ?? r.url;
+
+/**
+ * A route source that is a crawl: the paths of the site's own sitemap (a page added there is audited), the `first` ones always first,
+ * at most `limit`. Returns `null` when nothing answers at `${base}/sitemap.xml` (the caller says so and stops).
+ * @param {string} base
+ * @param {{ first?: string[], limit?: number, fetcher?: typeof fetch }} [o]
+ * @returns {Promise<string[] | null>}
+ */
+export async function routesFromSitemap(base, { first = ["/"], limit = 14, fetcher = fetch } = {}) {
+  const origin = base.replace(/\/$/, "");
+  const xml = await fetcher(`${origin}/sitemap.xml`).then((r) => (r.ok ? r.text() : null), () => null);
+  if (xml === null) return null;
+  const paths = [...xml.matchAll(/<loc>([^<]+)<\/loc>/g)].map((m) => new URL(m[1]).pathname || "/");
+  return [...new Set([...first, ...paths])].slice(0, limit);
+}
+
+/** The optional axe step: `@krizaka/a11y-audit` (a peer, loaded only when asked), one collector per kind of page, each ratcheted by the repo's own baseline file. */
+async function a11yOf(a11y) {
+  if (!a11y) return null;
+  const lib = await import("@krizaka/a11y-audit");
+  const kinds = { public: { collector: new lib.A11yCollector(a11y.app), baseline: a11y.baseline } };
+  if (a11y.session) kinds.session = { collector: new lib.A11yCollector(a11y.session.app), baseline: a11y.session.baseline, optional: true };
+  return { lib, kinds, widths: a11y.widths ?? [390, 1440], log: a11y.log ?? ((line) => process.stdout.write(`${line}\n`)) };
+}
+
+/** The ratchet's verdict, per kind. A baseline not recorded yet (`optional`) is counted, not enforced, until `--a11y-init`. */
+function a11yProblems(state) {
+  const problems = [];
+  for (const { collector, baseline, optional } of Object.values(state.kinds)) {
+    if (optional && !existsSync(baseline) && !process.argv.includes("--a11y-init")) {
+      state.log(`· a11y baseline missing: counted, not enforced (${collector.summary().join("; ") || "no violation"}); record it with --a11y-init`);
+      continue;
+    }
+    const guard = state.lib.finish(collector, { baseline });
+    for (const note of guard.notes) state.log(note);
+    problems.push(...guard.problems);
+  }
+  return problems;
+}
+
+/** The HTTP status of the load when asked for (`null`: no response), else `undefined`. */
+function statusOf(response, checks) {
+  if (!checks.status) return undefined;
+  return response ? response.status() : null;
+}
+
 /** One route at one width: load, settle, measure, screenshot. */
-async function measure(page, { base, route, width, height, settleMs, prepare, checks, errors, where, shots }) {
-  await resizeSettled(page, { width, height });
+async function measure(page, { base, spec, viewport, settleMs, prepare, checks, errors, where, shots, a11y, kind, theme }) {
+  await resizeSettled(page, viewport);
   // « load » and the faces, not « networkidle »: router prefetches can keep the page from ever going idle.
-  await loadSettled(page, `${base}${route}`);
-  if (prepare) await prepare(page, route);
+  const response = await loadSettled(page, `${base}${spec.url}`);
+  if (prepare) await prepare(page, spec.url);
   if (settleMs) await page.waitForTimeout(settleMs);
   const result = await page.evaluate(auditPage);
+  if (a11y?.widths.includes(viewport.width)) {
+    const { collector } = a11y.kinds[kind] ?? a11y.kinds.public;
+    collector.add({ route: spec.url, theme }, await a11y.lib.auditPage(page));
+  }
   if (shots) {
     mkdirSync(shots, { recursive: true });
     await page.screenshot({ path: join(shots, `${where.replace(/[/?=&@ ]/g, "_")}.png`) });
   }
-  return problemsOf(where, result, { ...checks, errors: errors.take() });
+  const status = statusOf(response, checks);
+  const landmarks = spec.chrome ?? checks.landmarks;
+  return problemsOf(where, result, { ...checks, landmarks, status, errors: errors.take() });
+}
+
+/** One route at one width, with `attempts` tries before it counts as « could not be audited ». */
+async function measureWithRetries(page, o, spec, viewport, where) {
+  let failure;
+  for (let attempt = 1; attempt <= o.attempts; attempt++) {
+    try {
+      return await measure(page, { ...o, spec, viewport, where });
+    } catch (error) {
+      failure = error;
+    }
+  }
+  return [`${where}: could not be audited — ${String(failure?.message).split("\n")[0]}`];
+}
+
+/** Audits the routes of one page (one context), each width. */
+async function auditPageRoutes(page, routes, o) {
+  const problems = [];
+  for (const spec of routes) {
+    for (const w of o.widths) {
+      const viewport = viewportOf(w, o.height);
+      problems.push(...(await measureWithRetries(page, o, spec, viewport, `${nameOfRoute(spec)} @${viewport.width} ${o.theme}`)));
+    }
+  }
+  return problems;
+}
+
+async function newPage(browser, o, extra = {}) {
+  const context = await auditContext(browser, { colorScheme: o.theme, ...extra });
+  if (o.themeKey) await context.addInitScript(rememberTheme, [o.themeKey, o.theme]);
+  const page = await context.newPage();
+  return { context, page, errors: collectErrors(page, o.ignoreConsole) };
+}
+
+/** The signed-in pages of one theme: a context with the session (a stored state, or `signIn` on the context), the routes the session names, then the flagged ones. */
+async function auditSession(browser, session, flagged, o) {
+  const { context, page, errors } = await newPage(browser, o, session.storageState ? { storageState: session.storageState } : {});
+  try {
+    if (session.signIn) await session.signIn(context, { base: o.base, theme: o.theme, page });
+    const own = session.routes ? await session.routes(page, { base: o.base, theme: o.theme }) : [];
+    return await auditPageRoutes(page, [...own, ...flagged].map(specOf), { ...o, errors, kind: "session" });
+  } finally {
+    await context.close();
+  }
 }
 
 /**
  * @param {object} o
  * @param {string} o.base  origin of the running app
- * @param {string[]} o.routes  paths to audit
- * @param {number[]} [o.widths]  viewport widths (default 360 to 1440)
+ * @param {Array<string | { url: string, name?: string, chrome?: "public" | "app" | "auth", session?: boolean }>} o.routes  paths to audit (a route flagged `session` is audited signed in; `chrome` replaces `checks.landmarks` for that route)
+ * @param {Array<number | { width: number, height?: number }>} [o.widths]  viewports (default widths 360 to 1440)
  * @param {string[]} [o.themes]  "dark" | "light" (default both): emulated colour scheme and, when `themeKey` is set, localStorage
  * @param {number} [o.height]  viewport height (default 900)
  * @param {string} [o.themeKey]  localStorage key the app persists its theme in (default "kz-theme")
  * @param {string} [o.shots]  directory for one screenshot per route × width × theme
  * @param {number} [o.settleMs]  pause after load, for late layout (default 300)
- * @param {object} [o.checks]  options of `problemsOf` (h1, headerAction, fileLabels)
+ * @param {object} [o.checks]  options of `problemsOf`: h1, headerAction, fileLabels, and the opt-in status, emptyMain, frame, minAction, boxes, landmarks, pictures, emptyControls, hardColors
+ * @param {RegExp[]} [o.ignoreConsole]  console errors the app tolerates (default: « Failed to load resource »; `[]` counts every error)
+ * @param {number} [o.attempts]  tries per route before it counts as not audited (default 1)
+ * @param {{ app: string, baseline: string, widths?: number[], log?: (line: string) => void, session?: { app: string, baseline: string } }} [o.a11y]  the axe step (`@krizaka/a11y-audit`, a peer) and the repo's ratchet file
+ * @param {{ storageState?: object | string, signIn?: Function, routes?: Function }} [o.session]  how the signed-in pages are reached
  * @param {(page: object, route: string) => Promise<void>} [o.prepare]  before each route is measured (sign in, seed)
  * @param {() => Promise<object>} [o.launch]  returns a Playwright browser (default: chromium of playwright-core)
  * @returns {Promise<string[]>} the problems, empty when the pages are fine
  */
-export async function auditRoutes({ base, routes, widths = WIDTHS, themes = THEMES, height = 900, themeKey = "kz-theme", shots, settleMs = 300, checks = {}, prepare, launch }) {
+export async function auditRoutes({ base, routes, widths = WIDTHS, themes = THEMES, height = 900, themeKey = "kz-theme", shots, settleMs = 300, checks = {}, ignoreConsole, attempts = 1, a11y, session, prepare, launch }) {
   const browser = await chromiumOf(launch);
+  const state = await a11yOf(a11y);
+  const specs = routes.map(specOf);
+  const plain = specs.filter((r) => !r.session);
+  const flagged = specs.filter((r) => r.session);
   const problems = [];
   try {
     for (const theme of themes) {
-      const context = await auditContext(browser, { colorScheme: theme });
-      if (themeKey) await context.addInitScript(rememberTheme, [themeKey, theme]);
-      const page = await context.newPage();
-      const errors = collectErrors(page);
-      for (const route of routes) {
-        for (const width of widths) {
-          const where = `${route} @${width} ${theme}`;
-          problems.push(...(await measure(page, { base, route, width, height, settleMs, prepare, checks, errors, where, shots })));
-        }
-      }
+      const o = { base, widths, height, theme, themeKey, shots, settleMs, checks, ignoreConsole, attempts, prepare, a11y: state };
+      const { context, page, errors } = await newPage(browser, o);
+      problems.push(...(await auditPageRoutes(page, plain, { ...o, errors, kind: "public" })));
       await context.close();
+      if (session && (session.routes || flagged.length)) problems.push(...(await auditSession(browser, session, flagged, o)));
     }
   } finally {
     await browser.close();
   }
+  if (state) problems.push(...a11yProblems(state));
   return problems;
 }

package/src/self-test.mjs

@@ -1,6 +1,6 @@
 // The audit proven on its own fixtures, in a real browser: each broken fixture must be reported, the fine ones must not.
 // A guard that stopped seeing is itself a red build.
-import { CARD_OVER_NEXT, COLUMN_CUT, FINE, FOLDED_SECTION, HIDDEN_CONTENT, SECTIONS_OVERLAP } from "./fixtures.mjs";
+import { BOX_TOO_WIDE, BROKEN_PARTS, CARD_OVER_NEXT, CHROME_BAD, CHROME_FINE, COLUMN_CUT, EMPTY_MAIN, FINE, FOLDED_SECTION, FRAME_FITS, FRAME_FORCES_SCROLL, HIDDEN_CONTENT, SECTIONS_OVERLAP, SMALL_ACTION, TOKEN_IN_STRETCHED_ROW, TOKEN_WRAPPED } from "./fixtures.mjs";
 import { auditPage, problemsOf } from "./page-audit.mjs";
 import { auditContext } from "./settle.mjs";
 
@@ -9,12 +9,40 @@ const EXPECT = [
   ["a card over the next section", CARD_OVER_NEXT, /covers a neighbouring section/],
   ["two sections on top of each other", SECTIONS_OVERLAP, /covers a neighbouring section/],
   ["a column cut by a clipping wrapper", COLUMN_CUT, /is cut off/],
+  ["an identifier that breaks every few characters", TOKEN_WRAPPED, /wraps one character per line/],
+  ["an empty <main>", EMPTY_MAIN, /empty <main>/, { emptyMain: true }],
+  ["a frame that forces a scroll", FRAME_FORCES_SCROLL, /the frame forces a scroll/, { frame: true }],
+  ["an action under the tap target", SMALL_ACTION, /an action is 24 px tall \(< 36\)/, { minAction: 36 }],
+  ["a landmark wider than its box", BOX_TOO_WIDE, /content wider than its box/, { boxes: true }],
+  ["a broken picture", BROKEN_PARTS, /broken picture/, { pictures: true }],
+  ["a tile that draws nothing", BROKEN_PARTS, /empty tile/, { emptyControls: true }],
+  ["a hard-coded inline colour", BROKEN_PARTS, /hard-coded colour/, { hardColors: true }],
+  ["two page footers and no nav", CHROME_BAD, /2 page footers/, { landmarks: "public" }],
+  ["no nav landmark", CHROME_BAD, /no <nav> landmark/, { landmarks: "app" }],
 ];
 const FINES = [
   ["a fine layout", FINE],
   ["content that is not drawn (a visually hidden table, a folded details)", HIDDEN_CONTENT],
   ["a section folded in a details", FOLDED_SECTION],
+  ["a short token in a row a taller neighbour stretches", TOKEN_IN_STRETCHED_ROW],
 ];
+/** Fixtures that must stay clean even with every opt-in check on. */
+const ALL = { emptyMain: true, frame: true, minAction: 36, boxes: true, pictures: true, emptyControls: true, hardColors: true, landmarks: "public" };
+const FINES_STRICT = [
+  ["a frame that fits its screen", FRAME_FITS, { frame: true, emptyMain: false }],
+  ["the family chrome", CHROME_FINE, ALL],
+];
+
+async function problemsOn(page, html, checks) {
+  await page.setContent(html);
+  return problemsOf("fixture", await page.evaluate(auditPage), checks);
+}
+
+/** The failure for a fixture that must be clean and is not (none, when it is). */
+async function reported(page, name, html, checks) {
+  const fine = await problemsOn(page, html, checks);
+  return fine.length ? [`the audit reports ${String(name)}: ${fine.join(" | ")}`] : [];
+}
 
 /** @returns {Promise<string[]>} the failures (empty when the audit sees what it must and nothing else) */
 export async function selfTest({ launch } = {}) {
@@ -22,16 +50,13 @@ export async function selfTest({ launch } = {}) {
   const failures = [];
   try {
     const page = await (await auditContext(browser, { viewport: { width: 1280, height: 800 } })).newPage();
-    for (const [name, html, pattern] of EXPECT) {
-      await page.setContent(html);
-      const problems = problemsOf("fixture", await page.evaluate(auditPage));
-      if (!problems.some((p) => pattern.test(p))) failures.push(`the audit does not see ${name}: ${problems.join(" | ") || "no problem reported"}`);
-    }
-    for (const [name, html] of FINES) {
-      await page.setContent(html);
-      const fine = problemsOf("fixture", await page.evaluate(auditPage));
-      if (fine.length) failures.push(`the audit reports ${name}: ${fine.join(" | ")}`);
+    for (const [name, html, pattern, checks] of EXPECT) {
+      const problems = await problemsOn(page, html, checks);
+      if (!problems.some((p) => pattern.test(p))) failures.push(`the audit does not see ${String(name)}: ${problems.join(" | ") || "no problem reported"}`);
     }
+    for (const [name, html] of FINES) failures.push(...(await reported(page, name, html)));
+    await page.setViewportSize({ width: 1280, height: 700 });
+    for (const [name, html, checks] of FINES_STRICT) failures.push(...(await reported(page, name, html, checks)));
   } finally {
     await browser.close();
   }