@krizaka/page-audit 0.5.1 → 0.7.0

package/src/page-audit.mjs

@@ -10,8 +10,12 @@ const nameOf = (el) => {
   const id = el.dataset?.testid;
   return el.tagName.toLowerCase() + (id ? "[" + id + "]" : "") + "." + className(el, 2);
 };
-const scrolls = (el) => ["auto", "scroll"].includes(getComputedStyle(el).overflowY) || ["auto", "scroll"].includes(getComputedStyle(el).overflowX);
-const meets = (ra, rb) => Math.min(ra.right, rb.right) - Math.max(ra.left, rb.left) > 2 && Math.min(ra.bottom, rb.bottom) - Math.max(ra.top, rb.top) > 2;
+const scrolls = (el) =>
+  ["auto", "scroll"].includes(getComputedStyle(el).overflowY) ||
+  ["auto", "scroll"].includes(getComputedStyle(el).overflowX);
+const meets = (ra, rb) =>
+  Math.min(ra.right, rb.right) - Math.max(ra.left, rb.left) > 2 &&
+  Math.min(ra.bottom, rb.bottom) - Math.max(ra.top, rb.top) > 2;
 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. */
@@ -27,7 +31,12 @@ function wideOf(doc) {
   return [...document.querySelectorAll("body *")]
     .filter((el) => {
       const r = el.getBoundingClientRect();
-      return r.width > 0 && getComputedStyle(el).visibility !== "hidden" && (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(".")}`);
@@ -36,12 +45,21 @@ function wideOf(doc) {
 /** A button's accessible name: its text, aria-label, aria-labelledby, title — or a <label for> pointing at it (a checkbox, a switch). */
 function named(b) {
   const labelled = !!b.id && !!document.querySelector(`label[for="${CSS.escape(b.id)}"]`);
-  return !!((b.textContent || "").trim() || b.getAttribute("aria-label") || b.getAttribute("aria-labelledby") || b.title || labelled);
+  return !!(
+    (b.textContent || "").trim() ||
+    b.getAttribute("aria-label") ||
+    b.getAttribute("aria-labelledby") ||
+    b.title ||
+    labelled
+  );
 }
 
 function unnamedOf() {
   const unnamed = [...document.querySelectorAll("button")].filter((b) => !named(b));
-  return { unnamedButtons: unnamed.length, unnamedSamples: unnamed.slice(0, 2).map((b) => b.outerHTML.slice(0, 160).replace(/\s+/g, " ")) };
+  return {
+    unnamedButtons: unnamed.length,
+    unnamedSamples: unnamed.slice(0, 2).map((b) => b.outerHTML.slice(0, 160).replace(/\s+/g, " ")),
+  };
 }
 
 function headerActionOf(doc) {
@@ -68,7 +86,14 @@ function keptBetween(el, panel) {
 }
 
 function notDrawn(el, r) {
-  return r.width === 0 || r.height === 0 || getComputedStyle(el).position === "fixed" || !!el.closest(ARIA_HIDDEN) || !!el.closest("[data-radix-popper-content-wrapper]") || folded(el);
+  return (
+    r.width === 0 ||
+    r.height === 0 ||
+    getComputedStyle(el).position === "fixed" ||
+    !!el.closest(ARIA_HIDDEN) ||
+    !!el.closest("[data-radix-popper-content-wrapper]") ||
+    folded(el)
+  );
 }
 
 function runsOut(el, panel, box) {
@@ -92,14 +117,54 @@ function spillOf(panels) {
   return { overflowing, spill };
 }
 
+/** What is seen of a control: its box cut by every clipping or scrolling ancestor (a control scrolled out of its list is not on screen). */
+function seenBox(el) {
+  const r = el.getBoundingClientRect();
+  let box = { left: r.left, top: r.top, right: r.right, bottom: r.bottom };
+  for (let n = el.parentElement; n && n !== document.body; n = n.parentElement) {
+    const st = getComputedStyle(n);
+    if (st.overflowX === "visible" && st.overflowY === "visible") continue;
+    const c = n.getBoundingClientRect();
+    box = {
+      left: Math.max(box.left, st.overflowX === "visible" ? box.left : c.left),
+      right: Math.min(box.right, st.overflowX === "visible" ? box.right : c.right),
+      top: Math.max(box.top, st.overflowY === "visible" ? box.top : c.top),
+      bottom: Math.min(box.bottom, st.overflowY === "visible" ? box.bottom : c.bottom),
+    };
+  }
+  return box;
+}
+
+/** `controlOverlaps`: two interactive elements, neither inside the other, that share pixels on screen (a header over a row, a radio over its card's text): one of them cannot be clicked. */
+function controlOverlapsOf() {
+  const controls =
+    'button, a[href], input:not([type="hidden"]), select, textarea, summary, [role="button"], [role="radio"], [role="checkbox"], [role="switch"], [role="tab"], [role="menuitem"], [role="link"], [role="combobox"]';
+  const drawn = [...document.querySelectorAll(controls)]
+    .filter(
+      (el) => !clipped(el) && getComputedStyle(el).visibility !== "hidden" && getComputedStyle(el).display !== "none",
+    )
+    .map((el) => ({ el, box: seenBox(el) }))
+    .filter(({ box }) => box.right - box.left > 4 && box.bottom - box.top > 4);
+  const overlaps = [];
+  drawn.forEach((a, i) => {
+    for (const b of drawn.slice(i + 1))
+      if (apart(a.el, b.el) && meets(a.box, b.box)) overlaps.push(nameOf(a.el) + " over " + nameOf(b.el));
+  });
+  return overlaps;
+}
+
 /** `overlaps`: two sections that are not nested and cover each other, or what ran out of its panel and lands on another section (the card covering « Dernières vérifications »). */
 function overlapsOf(panels, spill) {
   const overlaps = [];
   for (const el of spill) {
-    for (const other of panels) if (apart(el, other) && meets(el.getBoundingClientRect(), other.getBoundingClientRect())) overlaps.push(`${nameOf(el)} over ${nameOf(other)}`);
+    for (const other of panels)
+      if (apart(el, other) && meets(el.getBoundingClientRect(), other.getBoundingClientRect()))
+        overlaps.push(`${nameOf(el)} over ${nameOf(other)}`);
   }
   panels.forEach((a, i) => {
-    for (const b of panels.slice(i + 1)) if (apart(a, b) && meets(a.getBoundingClientRect(), b.getBoundingClientRect())) overlaps.push(`${nameOf(a)} over ${nameOf(b)}`);
+    for (const b of panels.slice(i + 1))
+      if (apart(a, b) && meets(a.getBoundingClientRect(), b.getBoundingClientRect()))
+        overlaps.push(`${nameOf(a)} over ${nameOf(b)}`);
   });
   return overlaps;
 }
@@ -138,16 +203,27 @@ function isTopBar(el, width) {
   const pos = getComputedStyle(el).position;
   if (pos !== "fixed" && pos !== "sticky") return false;
   const r = topBoxOf(el).getBoundingClientRect();
-  return r.width > width * 0.5 && r.height > 8 && r.height < 200 && r.top < 160 && r.bottom > 0 && !el.closest("[data-top-chrome]");
+  return (
+    r.width > width * 0.5 &&
+    r.height > 8 &&
+    r.height < 200 &&
+    r.top < 160 &&
+    r.bottom > 0 &&
+    !el.closest("[data-top-chrome]")
+  );
 }
 
 function chromeOverlapsOf(doc) {
-  const chrome = [...document.querySelectorAll("[data-top-chrome]")].filter((el) => el.getBoundingClientRect().height > 0);
+  const chrome = [...document.querySelectorAll("[data-top-chrome]")].filter(
+    (el) => el.getBoundingClientRect().height > 0,
+  );
   const bars = [...document.querySelectorAll("body *")].filter((el) => isTopBar(el, doc.clientWidth)).map(topBoxOf);
   const stack = [...chrome, ...bars];
   const found = [];
   stack.forEach((a, i) => {
-    for (const b of stack.slice(i + 1)) if (apart(a, b) && meets(a.getBoundingClientRect(), b.getBoundingClientRect())) found.push(`${nameOf(a)} / ${nameOf(b)}`);
+    for (const b of stack.slice(i + 1))
+      if (apart(a, b) && meets(a.getBoundingClientRect(), b.getBoundingClientRect()))
+        found.push(`${nameOf(a)} / ${nameOf(b)}`);
   });
   return found;
 }
@@ -158,7 +234,14 @@ function clipsOf() {
     .filter((el) => {
       const r = el.getBoundingClientRect();
       const style = getComputedStyle(el);
-      return r.width > 4 && r.height > 4 && ["hidden", "clip"].includes(style.overflowX) && style.textOverflow !== "ellipsis" && el.scrollWidth > el.clientWidth + 1 && !clipped(el);
+      return (
+        r.width > 4 &&
+        r.height > 4 &&
+        ["hidden", "clip"].includes(style.overflowX) &&
+        style.textOverflow !== "ellipsis" &&
+        el.scrollWidth > el.clientWidth + 1 &&
+        !clipped(el)
+      );
     })
     .slice(0, 3)
     .map(nameOf);
@@ -185,12 +268,16 @@ function wrappedOf() {
 /** The whole measure of a page. Decorative layers (aria-hidden), fixed elements and anything inside a scroller are left out of the layout probes (yomizaka#435). */
 /** A heading with no text (and no image or labelled icon) says nothing to a screen reader. */
 function emptyHeadingsOf() {
-  return [...document.querySelectorAll("h1, h2, h3")].filter((h) => !(h.textContent || "").trim() && !h.querySelector("img, svg[aria-label]")).length;
+  return [...document.querySelectorAll("h1, h2, h3")].filter(
+    (h) => !(h.textContent || "").trim() && !h.querySelector("img, svg[aria-label]"),
+  ).length;
 }
 
 /** A file input that no label, `aria-label` or title names. */
 function unlabelledFilesOf() {
-  return [...document.querySelectorAll("input[type=file]")].filter((i) => !(i.getAttribute("aria-label") || i.getAttribute("aria-labelledby") || i.title || i.labels?.length)).length;
+  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). */
@@ -200,7 +287,9 @@ function emptyMainOf() {
 
 /** 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));
+  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));
 }
 
 /**
@@ -213,7 +302,12 @@ function frameOf(doc) {
   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)),
+    forced: Math.round(
+      Math.max(
+        Number.parseFloat(getComputedStyle(shell).minHeight) || 0,
+        rail ? rail.getBoundingClientRect().height : 0,
+      ),
+    ),
     viewport: doc.clientHeight,
   };
 }
@@ -221,15 +315,24 @@ function frameOf(doc) {
 /** 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)
+    .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") };
+  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. */
@@ -250,15 +353,27 @@ function emptyControlsOf() {
     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");
+    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;
+  return [...document.querySelectorAll("[style]")].filter(
+    (e) =>
+      /#[0-9a-f]{3,8}\b|rgba?\(/i.test(e.getAttribute("style") || "") && !/var\(/.test(e.getAttribute("style") || ""),
+  ).length;
 }
 
 /**
@@ -268,19 +383,36 @@ function hardColorsOf() {
  */
 function mapsOf() {
   return [...document.querySelectorAll(".maplibregl-map, .mapboxgl-map, .leaflet-container, [data-kz-map]")]
-    .filter((el) => el.getClientRects().length > 0 && !el.closest(ARIA_HIDDEN) && !folded(el) && !el.parentElement?.closest(".maplibregl-map, .mapboxgl-map, .leaflet-container, [data-kz-map]"))
+    .filter(
+      (el) =>
+        el.getClientRects().length > 0 &&
+        !el.closest(ARIA_HIDDEN) &&
+        !folded(el) &&
+        !el.parentElement?.closest(".maplibregl-map, .mapboxgl-map, .leaflet-container, [data-kz-map]"),
+    )
     .map((el) => {
       const box = el.getBoundingClientRect();
       const canvas = el.querySelector("canvas")?.getBoundingClientRect();
-      return { name: nameOf(el), width: Math.round(box.width), height: Math.round(box.height), canvas: !!canvas && canvas.width > 0 && canvas.height > 0, leaflet: el.classList.contains("leaflet-container"), tiles: el.querySelectorAll(".leaflet-tile-loaded").length };
+      return {
+        name: nameOf(el),
+        width: Math.round(box.width),
+        height: Math.round(box.height),
+        canvas: !!canvas && canvas.width > 0 && canvas.height > 0,
+        leaflet: el.classList.contains("leaflet-container"),
+        tiles: el.querySelectorAll(".leaflet-tile-loaded").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));
+  const panels = [...document.querySelectorAll("[data-panel], main section, main [role=region]")].filter(
+    (el) => !el.closest(ARIA_HIDDEN) && !folded(el),
+  );
   const { overflowing, spill } = spillOf(panels);
-  const chips = [...document.querySelectorAll('[data-testid="audience-picker"] a')].map((a) => Math.round(a.getBoundingClientRect().height));
+  const chips = [...document.querySelectorAll('[data-testid="audience-picker"] a')].map((a) =>
+    Math.round(a.getBoundingClientRect().height),
+  );
   return {
     h1: document.querySelectorAll("h1").length,
     scrollWidth: doc.scrollWidth,
@@ -293,6 +425,7 @@ function measurePage() {
     overlaps: overlapsOf(panels, spill).slice(0, 3),
     cutColumns: cutColumnsOf(),
     chromeOverlaps: chromeOverlapsOf(doc).slice(0, 3),
+    controlOverlaps: controlOverlapsOf().slice(0, 5),
     clips: clipsOf(),
     emptyHeadings: emptyHeadingsOf(),
     unlabelledFiles: unlabelledFilesOf(),
@@ -310,7 +443,46 @@ function 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, mapsOf, measurePage];
+const PROBES = [
+  tooTall,
+  wrappedOf,
+  className,
+  nameOf,
+  scrolls,
+  meets,
+  apart,
+  clipped,
+  wideOf,
+  named,
+  unnamedOf,
+  headerActionOf,
+  folded,
+  keptBetween,
+  notDrawn,
+  runsOut,
+  spillOf,
+  seenBox,
+  controlOverlapsOf,
+  overlapsOf,
+  cutBy,
+  cutColumnsOf,
+  topBoxOf,
+  isTopBar,
+  chromeOverlapsOf,
+  clipsOf,
+  emptyHeadingsOf,
+  unlabelledFilesOf,
+  emptyMainOf,
+  actionsOf,
+  frameOf,
+  boxesOf,
+  landmarksOf,
+  brokenPicturesOf,
+  emptyControlsOf,
+  hardColorsOf,
+  mapsOf,
+  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})()`;
@@ -323,22 +495,56 @@ export const auditPage = `(() => {\nconst ARIA_HIDDEN = ${JSON.stringify(ARIA_HI
 function accessibilityProblems(where, result, fileLabels) {
   const problems = [];
   if (result.emptyHeadings) problems.push(`${where}: ${result.emptyHeadings} empty heading(s)`);
-  if (fileLabels && result.unlabelledFiles) problems.push(`${where}: ${result.unlabelledFiles} file input(s) without a label`);
+  if (fileLabels && result.unlabelledFiles)
+    problems.push(`${where}: ${result.unlabelledFiles} file input(s) without a label`);
   return problems;
 }
 
-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, maps = false } = {}) {
+/**
+ * The checks switched on by a flag of `problemsOf` (a flag that is off produces nothing). A table keeps the function short: each
+ * entry reads the page's result and says what the flag asks for.
+ */
+const FLAGGED_CHECKS = [
+  ["emptyMain", (where, result) => (result.emptyMain ? [`${where}: empty <main>`] : [])],
+  ["frame", (where, result) => frameProblems(where, result.frame)],
+  ["minAction", (where, result, minAction) => actionProblems(where, result.actions ?? [], minAction)],
+  ["boxes", (where, result) => boxProblems(where, result.boxes ?? [])],
+  ["landmarks", (where, result, landmarks) => landmarkProblems(where, result.landmarks, landmarks)],
+  [
+    "pictures",
+    (where, result) =>
+      result.brokenPictures?.length ? [`${where}: broken picture ${result.brokenPictures.join(", ")}`] : [],
+  ],
+  ["emptyControls", (where, result) => (result.emptyControls ?? []).map((c) => `${where}: ${c}`)],
+  [
+    "hardColors",
+    (where, result) =>
+      result.hardColors
+        ? [`${where}: ${result.hardColors} element(s) with a hard-coded colour in an inline style`]
+        : [],
+  ],
+  ["maps", (where, result, maps) => mapProblems(where, result.maps ?? [], maps)],
+  [
+    "controlOverlaps",
+    (where, result) =>
+      result.controlOverlaps?.length
+        ? [`${where}: controls overlap, one cannot be clicked (${result.controlOverlaps.join(", ")})`]
+        : [],
+  ],
+];
+
+function flaggedProblems(where, result, flags) {
+  return FLAGGED_CHECKS.flatMap(([flag, check]) => (flags[flag] ? check(where, result, flags[flag]) : []));
+}
+
+export function problemsOf(
+  where,
+  result,
+  { errors = [], h1 = false, headerAction = false, fileLabels = false, status, ...flags } = {},
+) {
   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`] : []),
-    ...(maps ? mapProblems(where, result.maps ?? [], maps) : []),
+    ...flaggedProblems(where, result, flags),
     ...errorsOf(where, errors),
     ...layoutProblems(where, result),
     ...(h1 ? namingProblems(where, result) : []),
@@ -361,7 +567,8 @@ function mapProblems(where, found, option) {
   const out = [];
   for (const m of found) {
     if (m.width < min || m.height < min) out.push(`${where}: the map ${m.name} is ${m.width}x${m.height} px (empty)`);
-    else if (m.leaflet ? m.tiles === 0 : !m.canvas) out.push(`${where}: the map ${m.name} ${m.leaflet ? "has no loaded tile" : "has no canvas"}`);
+    else if (m.leaflet ? m.tiles === 0 : !m.canvas)
+      out.push(`${where}: the map ${m.name} ${m.leaflet ? "has no loaded tile" : "has no canvas"}`);
   }
   return out;
 }
@@ -373,15 +580,23 @@ function errorsOf(where, errors) {
 /** Overflow, elements past the edge, boxes that cover or cut one another, a token wrapped per character, the error state. */
 function layoutProblems(where, result) {
   const problems = [];
-  if (result.scrollWidth > result.clientWidth) problems.push(`${where}: scrollWidth ${result.scrollWidth} > ${result.clientWidth} (${result.wide.join(", ")})`);
+  if (result.scrollWidth > result.clientWidth)
+    problems.push(`${where}: scrollWidth ${result.scrollWidth} > ${result.clientWidth} (${result.wide.join(", ")})`);
   else if (result.wide.length) problems.push(`${where}: elements past the edge (${result.wide.join(", ")})`);
-  const lists = [[result.overflowing, "overflows its panel"], [result.overlaps, "covers a neighbouring section"], [result.cutColumns, "is cut off"]];
+  const lists = [
+    [result.overflowing, "overflows its panel"],
+    [result.overlaps, "covers a neighbouring section"],
+    [result.cutColumns, "is cut off"],
+  ];
   for (const [list, words] of lists) {
     if (list?.length) problems.push(`${where}: ${words} (${list.join(", ")})`);
   }
-  if (result.wrapped?.length) problems.push(`${where}: a token wraps one character per line (${result.wrapped.join(", ")}) — truncate it`);
-  if (result.segmentError) problems.push(`${where}: the page rendered its error state (segment-error), e.g. React #441`);
-  if (result.chromeOverlaps?.length) problems.push(`${where}: the top chrome chromeOverlaps (${result.chromeOverlaps.slice(0, 2).join(", ")})`);
+  if (result.wrapped?.length)
+    problems.push(`${where}: a token wraps one character per line (${result.wrapped.join(", ")}) — truncate it`);
+  if (result.segmentError)
+    problems.push(`${where}: the page rendered its error state (segment-error), e.g. React #441`);
+  if (result.chromeOverlaps?.length)
+    problems.push(`${where}: the top chrome chromeOverlaps (${result.chromeOverlaps.slice(0, 2).join(", ")})`);
   if (result.clips?.length) problems.push(`${where}: content cut inside its box (${result.clips.join(", ")})`);
   return problems;
 }
@@ -416,7 +631,9 @@ function statusProblems(where, status) {
 /** 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)`];
+  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. */
@@ -432,7 +649,8 @@ function boxProblems(where, boxes) {
 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)`);
+    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`);

package/src/run.mjs

@@ -9,7 +9,8 @@ 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. `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()));
+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();
@@ -55,7 +56,10 @@ const nameOfRoute = (r) => r.name ?? r.url;
  */
 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);
+  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);
@@ -66,8 +70,18 @@ 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`)) };
+  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`. */
@@ -75,7 +89,9 @@ 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`);
+      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 });
@@ -92,7 +108,10 @@ function statusOf(response, checks) {
 }
 
 /** One route at one width: load, settle, measure, screenshot. */
-async function measure(page, { base, spec, viewport, settleMs, prepare, checks, errors, where, shots, a11y, kind, theme }) {
+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.
   const response = await loadSettled(page, `${base}${spec.url}`);
@@ -131,7 +150,9 @@ async function auditPageRoutes(page, routes, o) {
   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}`)));
+      problems.push(
+        ...(await measureWithRetries(page, o, spec, viewport, `${nameOfRoute(spec)} @${viewport.width} ${o.theme}`)),
+      );
     }
   }
   return problems;
@@ -146,7 +167,11 @@ async function newPage(browser, o, extra = {}) {
 
 /** 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 } : {});
+  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 }) : [];
@@ -175,7 +200,23 @@ async function auditSession(browser, session, flagged, o) {
  * @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 = {}, ignoreConsole, attempts = 1, a11y, session, 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);
@@ -184,11 +225,25 @@ export async function auditRoutes({ base, routes, widths = WIDTHS, themes = THEM
   const problems = [];
   try {
     for (const theme of themes) {
-      const o = { base, widths, height, theme, themeKey, shots, settleMs, checks, ignoreConsole, attempts, prepare, a11y: state };
+      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)));
+      if (session && (session.routes || flagged.length))
+        problems.push(...(await auditSession(browser, session, flagged, o)));
     }
   } finally {
     await browser.close();