@krizaka/page-audit 0.7.0 → 0.8.1

package/README.md

@@ -17,23 +17,32 @@ 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.
+before anything is measured (verikora#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`, `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), `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.
+`hardColors`, `maps` (an empty map, folioviv#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), `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 — folioviv#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.7.0",
+  "version": "0.8.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",
@@ -65,7 +65,7 @@
     "eslint": "^9.39.0",
     "playwright-core": "^1.55.0",
     "vitest": "^4.1.11",
-    "@krizaka/config": "^0.19.0"
+    "@krizaka/config": "^0.21.0"
   },
   "engines": {
     "node": ">=22"

package/src/fixtures.mjs

@@ -1,4 +1,4 @@
-// Small pages that reproduce what the layout audit must catch (yomizaka#435) and one that is fine, for `check-page-audit.mjs`:
+// Small pages that reproduce what the layout audit must catch (verikora#435) and one that is fine, for `check-page-audit.mjs`:
 // the guard is proven on its own fixtures before it is trusted on the app.
 
 const page = (body, css = "") =>
@@ -33,7 +33,7 @@ export const FOLDED_SECTION = page(
 
 /** 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). */
+/** The signed-in frame asks 1000 px of a 700 px screen under a 60 px notice (folioviv#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>`,
 );
@@ -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. */
@@ -55,14 +63,14 @@ export const CHROME_BAD = `<!doctype html><html><body><main><p>Hello</p></main><
 
 /** 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>`,
+  `<table style="width:600px"><tbody><tr><td>sovkora-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>`,
 );
 
-/** A map that laid out at 0 px: `absolute inset-0` in a frame with no height of its own (akinaza#488). */
+/** A map that laid out at 0 px: `absolute inset-0` in a frame with no height of its own (folioviv#488). */
 export const MAP_COLLAPSED = page(
   `<section><div style="position:relative"><div class="maplibregl-map" style="position:absolute;inset:0"><canvas width="0" height="0"></canvas></div></div></section>`,
 );
@@ -77,7 +85,7 @@ 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 »). */
+/** Two controls on top of each other: a title button over a row's button (folioviv#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>`,
 );

package/src/index.d.ts

@@ -23,6 +23,8 @@ export interface ProblemChecks {
   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

@@ -153,6 +153,20 @@ function controlOverlapsOf() {
   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 = [];
@@ -193,7 +207,7 @@ function cutColumnsOf() {
   return [...new Set(cut)].slice(0, 3);
 }
 
-/** The top chrome never overlaps (yomizaka#449): the in-flow blocks above the page (`[data-top-chrome]`, e.g. the development-version notice) and a bar that is fixed or sticky at the top of the viewport. Two of them that share pixels hide one another. */
+/** The top chrome never overlaps (verikora#449): the in-flow blocks above the page (`[data-top-chrome]`, e.g. the development-version notice) and a bar that is fixed or sticky at the top of the viewport. Two of them that share pixels hide one another. */
 function topBoxOf(el) {
   return el.getBoundingClientRect().height === 0 && el.firstElementChild ? el.firstElementChild : el;
 }
@@ -265,7 +279,7 @@ function wrappedOf() {
     .map((el) => (el.textContent || "").trim().slice(0, 24));
 }
 
-/** 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). */
+/** The whole measure of a page. Decorative layers (aria-hidden), fixed elements and anything inside a scroller are left out of the layout probes (verikora#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(
@@ -293,7 +307,7 @@ function actionsOf() {
 }
 
 /**
- * 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
+ * The signed-in frame's own screen (folioviv#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) {
@@ -426,6 +440,7 @@ function measurePage() {
     cutColumns: cutColumnsOf(),
     chromeOverlaps: chromeOverlapsOf(doc).slice(0, 3),
     controlOverlaps: controlOverlapsOf().slice(0, 5),
+    smallTargets: smallTargetsOf().slice(0, 8),
     clips: clipsOf(),
     emptyHeadings: emptyHeadingsOf(),
     unlabelledFiles: unlabelledFilesOf(),
@@ -463,6 +478,7 @@ const PROBES = [
   spillOf,
   seenBox,
   controlOverlapsOf,
+  smallTargetsOf,
   overlapsOf,
   cutBy,
   cutColumnsOf,
@@ -524,6 +540,11 @@ const FLAGGED_CHECKS = [
         : [],
   ],
   ["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) =>
@@ -558,7 +579,7 @@ export function problemsOf(
 export const MIN_MAP_SIDE = 120;
 
 /**
- * An empty map (akinaza#488): a box under `min` px on a side, a GL map with no canvas, a Leaflet map with no loaded tile.
+ * An empty map (folioviv#488): a box under `min` px on a side, a GL map with no canvas, a Leaflet map with no loaded tile.
  * `maps` is `true` (the default minimum) or `{ min, required }`; with `required`, a page that was expected to draw a map and has none is a problem too.
  */
 function mapProblems(where, found, option) {

package/src/self-test.mjs

@@ -21,6 +21,8 @@ import {
   MAP_NO_CANVAS,
   SECTIONS_OVERLAP,
   SMALL_ACTION,
+  SMALL_TARGET,
+  TARGETS_FINE,
   TOKEN_IN_STRETCHED_ROW,
   TOKEN_WRAPPED,
 } from "./fixtures.mjs";
@@ -36,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 }],
@@ -70,12 +73,14 @@ const ALL = {
   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 }],
 ];
 

package/src/settle.mjs

@@ -1,4 +1,4 @@
-// One way for every browser audit to measure (yomizaka#354): never while a View Transition is swapping the page.
+// One way for every browser audit to measure (verikora#354): never while a View Transition is swapping the page.
 //
 // The flake: the page was read while a transition was running (« Viewport size changed », 0 of 2 h1). The cure is the
 // same everywhere, so it lives here and nowhere else: the context emulates reduced motion (the app honours it, the page