@krizaka/page-audit 0.6.0 → 0.7.0

package/README.md

@@ -25,7 +25,7 @@ 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), `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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/page-audit",
-  "version": "0.6.0",
+  "version": "0.7.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.19.0"
   },
   "engines": {
     "node": ">=22"

package/src/fixtures.mjs

@@ -76,3 +76,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,8 @@ 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;
 }
 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,42 @@ 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 = [];
@@ -389,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(),
@@ -424,6 +461,8 @@ const PROBES = [
   notDrawn,
   runsOut,
   spillOf,
+  seenBox,
+  controlOverlapsOf,
   overlapsOf,
   cutBy,
   cutColumnsOf,
@@ -461,41 +500,51 @@ 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)],
+  [
+    "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,
@@ -42,6 +44,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 +69,13 @@ const ALL = {
   hardColors: true,
   landmarks: "public",
   maps: true,
+  controlOverlaps: 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 }],
   ["a map that is not drawn (display none)", MAP_HIDDEN, { maps: true }],
 ];