@krizaka/page-audit 0.3.0 → 0.4.0

package/README.md

@@ -24,7 +24,8 @@ before anything is measured (yomizaka#354). `prepare(page, route)` signs in or s
 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`. Console noise the app tolerates: `ignoreConsole: [/…/]` (`[]` counts every error); `attempts` retries a route.
+`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.
 
 ```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.3.0",
+  "version": "0.4.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",

package/src/fixtures.mjs

@@ -43,3 +43,17 @@ export const BROKEN_PARTS = page(`<img src="data:image/png;base64,AAAA" width="4
 /** Chrome that fits the family: one footer naming Krizaka, a nav. */
 export const CHROME_FINE = `<!doctype html><html><body><nav>n</nav><main><p>Hello</p></main><footer>A Krizaka product</footer></body></html>`;
 export const CHROME_BAD = `<!doctype html><html><body><main><p>Hello</p></main><footer>one</footer><footer>two</footer></body></html>`;
+
+/** 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>`);
+/** 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). */
+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>`);
+/** A map box with a size and a canvas, and a Leaflet one with a loaded tile. */
+export const MAP_FINE = page(`<section><div class="maplibregl-map" style="height:300px;width:600px"><canvas style="width:600px;height:300px" width="600" height="300"></canvas></div><div class="leaflet-container" style="height:300px;width:600px"><img class="leaflet-tile-loaded" alt="" width="256" height="256"></div></section>`);
+/** A GL map box of a good size where nothing was drawn (no canvas). */
+export const MAP_NO_CANVAS = page(`<section><div class="maplibregl-map" style="height:300px;width:600px"></div></section>`);
+/** 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>`);

package/src/index.d.ts

@@ -9,6 +9,8 @@ export interface ProblemChecks {
   /** HTTP status of the load (`null`: no response); a 4xx/5xx is a problem. */
   status?: number | null;
   emptyMain?: boolean; frame?: boolean; minAction?: number; boxes?: boolean; landmarks?: Chrome; pictures?: boolean; emptyControls?: boolean; 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 };
 }
 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

@@ -164,14 +164,15 @@ function clipsOf() {
     .map(nameOf);
 }
 
-/** A long token (an id, an address) that wraps character by character: a cell taller than two lines for text without a space. */
+/** A long token (an id, an address) that wraps character by character: text without a space whose own lines (not the cell's, which a taller neighbour in the row stretches) are more than two and a half. */
 function tooTall(el) {
   const text = (el.textContent || "").trim();
   if (text.length < 12 || /\s/.test(text) || el.children.length > 1) return false;
   const cs = getComputedStyle(el);
   const lh = Number.parseFloat(cs.lineHeight) || Number.parseFloat(cs.fontSize) * 1.4;
-  const content = el.getBoundingClientRect().height - Number.parseFloat(cs.paddingTop) - Number.parseFloat(cs.paddingBottom);
-  return content > lh * 2.5;
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  return range.getBoundingClientRect().height > lh * 2.5;
 }
 
 function wrappedOf() {
@@ -260,6 +261,21 @@ 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;
 }
 
+/**
+ * The live maps of the page (maplibre / mapbox GL, Leaflet, or anything marked `[data-kz-map]`): a map is a box with a size and something drawn in it.
+ * One that lays out at 0 px (an `absolute inset-0` map in a frame with no height of its own) overflows nothing, so no other probe sees it.
+ * GL maps are told by their canvas; Leaflet by its loaded tiles. A map with no client rect (`display: none`, a closed tab) is not drawn, so not measured.
+ */
+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]"))
+    .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 };
+    });
+}
+
 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));
@@ -289,11 +305,12 @@ function measurePage() {
     brokenPictures: brokenPicturesOf(),
     emptyControls: emptyControlsOf(),
     hardColors: hardColorsOf(),
+    maps: mapsOf(),
     segmentError: !!document.querySelector('[data-testid="segment-error"]'),
   };
 }
 
-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, 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];
 
 /** 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})()`;
@@ -310,7 +327,7 @@ function accessibilityProblems(where, result, fileLabels) {
   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 } = {}) {
+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 } = {}) {
   return [
     ...statusProblems(where, status),
     ...(emptyMain && result.emptyMain ? [`${where}: empty <main>`] : []),
@@ -321,6 +338,7 @@ export function problemsOf(where, result, { errors = [], h1 = false, headerActio
     ...(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) : []),
     ...errorsOf(where, errors),
     ...layoutProblems(where, result),
     ...(h1 ? namingProblems(where, result) : []),
@@ -330,6 +348,24 @@ export function problemsOf(where, result, { errors = [], h1 = false, headerActio
   ];
 }
 
+/** The smallest side (px) of a map worth the name. */
+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.
+ * `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) {
+  const { min = MIN_MAP_SIDE, required = false } = option === true ? {} : option;
+  if (!found.length) return required ? [`${where}: no map on the page`] : [];
+  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"}`);
+  }
+  return out;
+}
+
 function errorsOf(where, errors) {
   return errors.length ? [`${where}: console error — ${errors[0]}`] : [];
 }

package/src/self-test.mjs

@@ -1,6 +1,6 @@
 // The audit proven on its own fixtures, in a real browser: each broken fixture must be reported, the fine ones must not.
 // A guard that stopped seeing is itself a red build.
-import { BOX_TOO_WIDE, BROKEN_PARTS, CARD_OVER_NEXT, CHROME_BAD, CHROME_FINE, COLUMN_CUT, EMPTY_MAIN, FINE, FOLDED_SECTION, FRAME_FITS, FRAME_FORCES_SCROLL, HIDDEN_CONTENT, SECTIONS_OVERLAP, SMALL_ACTION } from "./fixtures.mjs";
+import { BOX_TOO_WIDE, BROKEN_PARTS, CARD_OVER_NEXT, CHROME_BAD, CHROME_FINE, COLUMN_CUT, EMPTY_MAIN, FINE, FOLDED_SECTION, FRAME_FITS, FRAME_FORCES_SCROLL, HIDDEN_CONTENT, MAP_COLLAPSED, MAP_FINE, MAP_HIDDEN, MAP_NO_CANVAS, SECTIONS_OVERLAP, SMALL_ACTION, TOKEN_IN_STRETCHED_ROW, TOKEN_WRAPPED } from "./fixtures.mjs";
 import { auditPage, problemsOf } from "./page-audit.mjs";
 import { auditContext } from "./settle.mjs";
 
@@ -9,6 +9,7 @@ const EXPECT = [
   ["a card over the next section", CARD_OVER_NEXT, /covers a neighbouring section/],
   ["two sections on top of each other", SECTIONS_OVERLAP, /covers a neighbouring section/],
   ["a column cut by a clipping wrapper", COLUMN_CUT, /is cut off/],
+  ["an identifier that breaks every few characters", TOKEN_WRAPPED, /wraps one character per line/],
   ["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 }],
@@ -16,6 +17,9 @@ const EXPECT = [
   ["a broken picture", BROKEN_PARTS, /broken picture/, { pictures: true }],
   ["a tile that draws nothing", BROKEN_PARTS, /empty tile/, { emptyControls: true }],
   ["a hard-coded inline colour", BROKEN_PARTS, /hard-coded colour/, { hardColors: true }],
+  ["a map that laid out at 0 px", MAP_COLLAPSED, /the map .* is \d+x0 px \(empty\)/, { maps: true }],
+  ["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" }],
   ["no nav landmark", CHROME_BAD, /no <nav> landmark/, { landmarks: "app" }],
 ];
@@ -23,12 +27,15 @@ const FINES = [
   ["a fine layout", FINE],
   ["content that is not drawn (a visually hidden table, a folded details)", HIDDEN_CONTENT],
   ["a section folded in a details", FOLDED_SECTION],
+  ["a short token in a row a taller neighbour stretches", TOKEN_IN_STRETCHED_ROW],
 ];
 /** Fixtures that must stay clean even with every opt-in check on. */
-const ALL = { emptyMain: true, frame: true, minAction: 36, boxes: true, pictures: true, emptyControls: true, hardColors: true, landmarks: "public" };
+const ALL = { emptyMain: true, frame: true, minAction: 36, boxes: true, pictures: true, emptyControls: true, hardColors: true, landmarks: "public", maps: 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 }],
+  ["a map that is not drawn (display none)", MAP_HIDDEN, { maps: true }],
 ];
 
 async function problemsOn(page, html, checks) {