@krizaka/page-audit 0.7.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), `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.
+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.7.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.19.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. */

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 = [];
@@ -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) =>

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 }],
 ];