@krizaka/page-audit 0.6.0 → 0.8.0

package/README.md

@@ -25,15 +25,24 @@ Opt-in through `checks` (nothing changes for a repo that does not ask): `status`
 (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`, `maps` (an empty map, akinaza#488: a GL / Leaflet / `[data-kz-map]` box under 120 px on a side, a GL map with no canvas,
-a Leaflet map with no loaded tile; `maps: { required: true }` also fails a page that should draw one but has none). Console noise the app tolerates: `ignoreConsole: [/…/]` (`[]` counts every error); `attempts` retries a route.
+a Leaflet map with no loaded tile; `maps: { required: true }` also fails a page that should draw one but has none), `smallTargets` (a control under 44 px on a side — an inline link in a sentence is exempt), `controlOverlaps` (two interactive elements that share pixels on screen, one not inside the other — akinaza#214: the composer's title over a row). 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 }],
+  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" } },
+  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 },
 });
 ```
@@ -50,13 +59,16 @@ as the runner. It freezes what moves (clock, motion, caret, View Transition, loc
 import { test, expect } from "@playwright/test";
 import { defineJourneyTests } from "@krizaka/page-audit/visual";
 defineJourneyTests({
-  test, expect,
-  signIn: async (page) => { /* the seeded persona signs in through the form */ },
+  test,
+  expect,
+  signIn: async (page) => {
+    /* the seeded persona signs in through the form */
+  },
   journeys: [
     { name: "landing", path: "/fr" },
     { name: "home", path: "/fr/app", session: true, mask: ["[data-live]"] },
-    { name: "home", path: "/fr/app", session: true, firstPaint: true, viewports: ["phone"] },          // the HTML the server sent
-    { name: "home", path: "/fr/app", session: true, firstPaint: { hold: ["**/api/me"] } },             // hydrated, account query pending
+    { name: "home", path: "/fr/app", session: true, firstPaint: true, viewports: ["phone"] }, // the HTML the server sent
+    { name: "home", path: "/fr/app", session: true, firstPaint: { hold: ["**/api/me"] } }, // hydrated, account query pending
   ],
 });
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/page-audit",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "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",
@@ -65,7 +65,7 @@
     "eslint": "^9.39.0",
     "playwright-core": "^1.55.0",
     "vitest": "^4.1.11",
-    "@krizaka/config": "^0.18.0"
+    "@krizaka/config": "^0.20.0"
   },
   "engines": {
     "node": ">=22"

package/src/fixtures.mjs

@@ -43,6 +43,14 @@ export const FRAME_FITS = page(
 );
 /** 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 button 32 px tall next to a 44 px one, and a link inside a sentence (exempt). */
+export const SMALL_TARGET = page(
+  `<button style="display:block;height:32px;width:120px">Add</button><p>Read <a href="/">the guide</a> now</p>`,
+);
+/** Controls of 44 px and more, and an inline link. */
+export const TARGETS_FINE = page(
+  `<button style="display:block;height:44px;width:120px">Add</button><a href="/" style="display:block;height:48px;width:48px">x</a><p>Read <a href="/">the guide</a> now</p>`,
+);
 /** 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. */
@@ -76,3 +84,12 @@ export const MAP_NO_CANVAS = page(
 );
 /** A map that is not drawn (display none: a closed tab, a small screen): nothing to measure. */
 export const MAP_HIDDEN = page(`<section><div class="maplibregl-map" style="display:none"></div></section>`);
+
+/** Two controls on top of each other: a title button over a row's button (akinaza#214, the composer's « Style » over « Réservation »). */
+export const CONTROLS_OVERLAP = page(
+  `<button style="display:block;width:200px;height:40px">Réservation</button><button style="display:block;width:200px;height:40px;margin-top:-20px;position:relative">Style</button>`,
+);
+/** Controls that sit side by side, a control inside a label, a hidden checkbox and a control scrolled out of its list: none overlaps. */
+export const CONTROLS_FINE = page(
+  `<div style="display:flex;gap:8px"><button style="width:100px;height:40px">A</button><button style="width:100px;height:40px">B</button></div><label style="display:block"><input type="checkbox"> Remember</label><div style="height:60px;overflow:auto"><button style="display:block;width:100px;height:40px">1</button><button style="display:block;width:100px;height:40px">2</button><button style="display:block;width:100px;height:40px">3</button></div><button style="display:block;width:100px;height:40px;margin-top:8px">After</button>`,
+);

package/src/index.d.ts

@@ -21,6 +21,10 @@ export interface ProblemChecks {
   hardColors?: boolean;
   /** Empty maps (a GL / Leaflet / `[data-kz-map]` box under 120 px, no canvas, no loaded tile); `{ min, required }` to tune, `required` fails a page with no map. */
   maps?: boolean | { min?: number; required?: boolean };
+  /** Two interactive elements (buttons, links, inputs, radios…) that share pixels on screen, one not inside the other: one of them cannot be clicked. The box is cut by clipping and scrolling ancestors. */
+  controlOverlaps?: boolean;
+  /** A control (button, link outside a sentence, input, tab…) drawn under 44 px on a side: too small for a thumb (WCAG 2.5.5). */
+  smallTargets?: boolean;
 }
 export function problemsOf(where: string, result: Record<string, unknown>, checks?: ProblemChecks): string[];
 export function auditOptions<T extends object>(options?: T): T & { reducedMotion: "reduce" };

package/src/page-audit.mjs

@@ -117,6 +117,56 @@ 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;
+}
+
+/** `smallTargets`: the controls drawn on screen under 44 px on a side (WCAG 2.5.5, the thumb): an inline link in a sentence is exempt. */
+function smallTargetsOf() {
+  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"]';
+  return [...document.querySelectorAll(controls)]
+    .filter(
+      (el) => !clipped(el) && getComputedStyle(el).visibility !== "hidden" && getComputedStyle(el).display !== "none",
+    )
+    .filter((el) => !(el.matches("a") && getComputedStyle(el).display === "inline"))
+    .map((el) => ({ el, r: el.getBoundingClientRect() }))
+    .filter(({ r }) => r.width > 4 && r.height > 4 && (r.width < 44 || r.height < 44))
+    .map(({ el, r }) => nameOf(el) + " " + Math.round(r.width) + "x" + Math.round(r.height));
+}
+
 /** `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 = [];
@@ -389,6 +439,8 @@ function measurePage() {
     overlaps: overlapsOf(panels, spill).slice(0, 3),
     cutColumns: cutColumnsOf(),
     chromeOverlaps: chromeOverlapsOf(doc).slice(0, 3),
+    controlOverlaps: controlOverlapsOf().slice(0, 5),
+    smallTargets: smallTargetsOf().slice(0, 8),
     clips: clipsOf(),
     emptyHeadings: emptyHeadingsOf(),
     unlabelledFiles: unlabelledFilesOf(),
@@ -424,6 +476,9 @@ const PROBES = [
   notDrawn,
   runsOut,
   spillOf,
+  seenBox,
+  controlOverlapsOf,
+  smallTargetsOf,
   overlapsOf,
   cutBy,
   cutColumnsOf,
@@ -461,41 +516,56 @@ function accessibilityProblems(where, result, fileLabels) {
   return problems;
 }
 
+/**
+ * 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)],
+  [
+    "smallTargets",
+    (where, result) =>
+      result.smallTargets?.length ? [`${where}: touch target under 44 px (${result.smallTargets.join(", ")})`] : [],
+  ],
+  [
+    "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,
-    emptyMain = false,
-    frame = false,
-    minAction,
-    boxes = false,
-    landmarks,
-    pictures = false,
-    emptyControls = false,
-    hardColors = false,
-    maps = false,
-  } = {},
+  { 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) : []),

package/src/self-test.mjs

@@ -7,6 +7,8 @@ import {
   CHROME_BAD,
   CHROME_FINE,
   COLUMN_CUT,
+  CONTROLS_FINE,
+  CONTROLS_OVERLAP,
   EMPTY_MAIN,
   FINE,
   FOLDED_SECTION,
@@ -19,6 +21,8 @@ import {
   MAP_NO_CANVAS,
   SECTIONS_OVERLAP,
   SMALL_ACTION,
+  SMALL_TARGET,
+  TARGETS_FINE,
   TOKEN_IN_STRETCHED_ROW,
   TOKEN_WRAPPED,
 } from "./fixtures.mjs";
@@ -34,6 +38,7 @@ const EXPECT = [
   ["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 control under 44 px", SMALL_TARGET, /touch target under 44 px \(button\. 120x32\)/, { smallTargets: true }],
   ["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 }],
@@ -42,6 +47,12 @@ const EXPECT = [
   ["a map with no canvas", MAP_NO_CANVAS, /has no canvas/, { maps: true }],
   ["no map where one is required", FINE, /no map on the page/, { maps: { required: true } }],
   ["two page footers and no nav", CHROME_BAD, /2 page footers/, { landmarks: "public" }],
+  [
+    "two controls on top of each other",
+    CONTROLS_OVERLAP,
+    /controls overlap, one cannot be clicked/,
+    { controlOverlaps: true },
+  ],
   ["no nav landmark", CHROME_BAD, /no <nav> landmark/, { landmarks: "app" }],
 ];
 const FINES = [
@@ -61,11 +72,15 @@ const ALL = {
   hardColors: true,
   landmarks: "public",
   maps: true,
+  controlOverlaps: true,
+  smallTargets: true,
 };
 const FINES_STRICT = [
   ["a frame that fits its screen", FRAME_FITS, { frame: true, emptyMain: false }],
   ["the family chrome", CHROME_FINE, ALL],
   ["maps with a size and something drawn", MAP_FINE, { maps: true }],
+  ["controls side by side, in a label, in a scroller", CONTROLS_FINE, { controlOverlaps: true }],
+  ["controls of 44 px and an inline link", TARGETS_FINE, { smallTargets: true }],
   ["a map that is not drawn (display none)", MAP_HIDDEN, { maps: true }],
 ];