Photo-fit gate: axe on each photo screen and the viewer; credits for the two test photos

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Entire-Checkpoint: 01M4PSB5324DNP414ZWJKHW2MK

Author: Hotragn

apps/web/test/e2e/photo-fit.ts

@@ -14,7 +14,8 @@
 // the friend decrypts is byte-for-byte the photo the host saw on Send (the filter never touches
 // bytes); the main button is on screen without scrolling; the privacy tip is one line at
 // 375 px and stays closed after a reload; tapping the photo opens a full-screen dialog with a
-// 44 px close button, Escape closes it and focus goes back to the photo.
+// 44 px close button, Escape closes it and focus goes back to the photo. axe (WCAG 2 A and AA,
+// best practice) on each photo screen at 390 x 664, and on the open viewer.
 // Real built app, in-memory fake API (serve.ts), Chrome. No network beyond localhost.
 // Usage: npm run build && node apps/web/test/e2e/photo-fit.ts [before]
 //   `before` only names the screenshots *-before.png and skips the checks main can't pass.
@@ -46,6 +47,7 @@ const VIEWPORTS = [
   { width: 390, height: 844 },
 ];
 
+const AXE = fs.readFileSync(path.join(ROOT, "node_modules/axe-core/axe.min.js"), "utf8");
 const fails: string[] = [];
 const rows: string[] = [];
 const check = (name: string, ok: boolean, detail = "") => {
@@ -159,10 +161,24 @@ async function measure(
     if (photo.dark) check(`${tag}: the dark photo is brightened for display`, /brightness/.test(m.filter), m.filter);
     else check(`${tag}: a bright photo has no filter`, !m.filter || m.filter === "none", m.filter);
   }
+  if (!BEFORE && vp.height === 664) await audit(page, tag);
   if (vp.width === 390 && vp.height === 664 && photo.dark)
     await page.screenshot({ path: path.join(OUT, `${screen}-${BEFORE ? "before" : "after"}.png`) });
 }
 
+type Axe = {
+  run: (c: Document, o: object) => Promise<{ violations: { id: string; nodes: { target: string[] }[] }[] }>;
+};
+async function audit(page: Page, tag: string) {
+  await page.evaluate(AXE); // evaluate, not a script tag: the app's CSP blocks inline scripts
+  const found = await page.evaluate(async () => {
+    const a = (window as unknown as { axe: Axe }).axe;
+    const r = await a.run(document, { runOnly: ["wcag2a", "wcag2aa", "best-practice"] });
+    return r.violations.map((v) => `${v.id} (${v.nodes.length}): ${v.nodes[0]?.target.join(" ")}`);
+  });
+  check(`${tag}: axe 0 violations`, found.length === 0, found.join("; "));
+}
+
 async function viewer(page: Page, tag: string) {
   const trigger = page.locator(".pf, .print button.image").first();
   await trigger.click();
@@ -173,6 +189,7 @@ async function viewer(page: Page, tag: string) {
   );
   check(`${tag}: tapping the photo opens it full screen`, opened);
   if (!opened) return;
+  await audit(page, `${tag} viewer`);
   const box = await dlg.getByRole("button", { name: "Close" }).boundingBox();
   check(
     `${tag}: the close button is 44 px`,

docs/credits/photos.md

@@ -10,3 +10,12 @@ Scenic photos used in the app and on the website (backlog #6). Only CC0 or publi
 | pictured-rocks-autumn | Autumn Views at Pictured Rocks National Lakeshore, Michigan (1b64dfd9-8bf2-463d-8458-3ab74d3a7d8c).jpg | NPS staff | Public domain | https://commons.wikimedia.org/wiki/File:Autumn_Views_at_Pictured_Rocks_National_Lakeshore,_Michigan_(1b64dfd9-8bf2-463d-8458-3ab74d3a7d8c).jpg |
 | sleeping-bear-dunes | Sleeping Bear Dunes National Lakeshore SLBE0162.jpg | National Park Service Digital Image Archives | Public domain | https://commons.wikimedia.org/wiki/File:Sleeping_Bear_Dunes_National_Lakeshore_SLBE0162.jpg |
 | autumn-trail | Autumn trail (Unsplash).jpg | Taylor Swayze taylorgswayze | CC0 | https://commons.wikimedia.org/wiki/File:Autumn_trail_(Unsplash).jpg |
+
+## Test photos (photo-fit gate)
+
+Two derivatives of the photos above, made with sharp from `scripts/scenic-src/` for `apps/web/test/e2e/photo-fit.ts`. Nothing was downloaded. The repo has no real indoor photo, so the dark one is labelled "darkened real photo" in the test.
+
+| File | Made from | Change |
+| --- | --- | --- |
+| `apps/web/test/fixtures/photo-dark-autumn-trail.jpg` | autumn-trail (CC0) | 1024 px wide, light cut to 22% (mean luma about 0.10) |
+| `apps/web/test/fixtures/photo-tall-pictured-rocks.jpg` | pictured-rocks-cliffs (public domain) | 9:16 centre crop, 720 x 1280 |