Interface review: accessibility, contrast, scanner report and motion

[PunGrumpy]

Cross-discipline interface review of the scanner, then the fixes it turned up. Every finding below was confirmed at runtime with Playwright rather than inferred from source, and the before/after numbers are measured.

What changed

Accessibility. Sorting and row expansion in the pages table were mouse-only — zero focusable controls. Header sorts are now real buttons carrying aria-sort, rows get a disclosure button with aria-expanded, and the scan reports through role="progressbar" plus a status region. The header and footer sat inside <main>, which removed the banner and contentinfo landmarks; there was no skip link. MotionConfig was never mounted, so JS animations ignored prefers-reduced-motion entirely.

Contrast. In light mode the status hues were too light to pass as text on their own tints — the fair badge measured 2.02:1, now 4.54:1. --score-good aliased --primary, so the four-band ramp ran green → black → amber → red; it gets its own hue at 118°, picked to maximise OKLab ΔE against its neighbours.

Scanner report. The report opened with five donut gauges reading 71, 71, 72, 72 and 71 — 300 vertical pixels of near-identical arcs, which are not comparable at a glance anyway. The overall score keeps a ring, the categories become bars, and both count up. Grouping moved from nested card borders to space and headings. The distribution chart duplicated its own legend beneath itself, so recharts is replaced by a CSS part-to-whole bar.

Motion. Nine durations, five easing curves and two duplicated spring configs, with entry delays that accumulated rather than staggered — the last block on the homepage did not settle until ~2.15s.

Measured

	before	after
Fair badge contrast (light)	2.02:1	4.54:1
Report height	1424px	878px
Longest issue row	788px (37 wrapped lines)	98px
Last block settles	~2150ms	~340ms
Durations in use	9	3
Easing curves	5	1
Keyboard-reachable sort controls	0	6

line-clamp-2 had been silently cancelled by an adjacent block class, which is how one row reached 788px. Expanding the full issue list is now bounded by a scroll frame instead of running the column thousands of pixels past the table, and the summary column sticks so a long table does not strand it above dead space.

The motion curve was picked for perceptibility, not taste. Traced in the browser, pairing a 6px travel with a drawer curve moved opacity from 0 to 0.74 in 25ms across three visible pixels — content simply popped in. easeOutCubic reaches ~58% at a quarter of the duration, so the movement stays legible.

Reviewing

The five commits are independent and each typechecks on its own; apps/web/app/globals.css is deliberately split across three of them because it carries three unrelated concerns. Reading them in order is easier than reading the squashed diff.

Two commits carry more than one concern, called out in their own messages: cd59937 includes the nav <button>-inside-<a> fix and the silently-failing URL validation, because both sat on the lines being retimed; 4b953b2 combines redesign, motion and a11y for scan/**.

Not done

• A bold Martian Mono face still is not shipped, so font-mono font-bold remains browser-synthesized. Only the weight: "400" metadata was corrected.
• One accepted lint warning at scan-progress.tsx:78 — a native <progress> cannot host the animated fill, so the ARIA pattern stays.
• Capitalization outside the scanner report is still mixed ("Copy HTML" vs "Get in touch").

Verification

turbo typecheck 3/3, ultracite check clean. Checked in light and dark at 320 / 375 / 1440 and at 200% zoom: no horizontal overflow, no text under 12px, no unnamed focusable controls. Reduced motion collapses every transition to 1e-05s.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
og-tester	Ready	Preview, Comment	Jul 29, 2026 2:35pm

[github-actions]

React Doctor found no new issues. 🎉

_{Reviewed by React Doctor for commit 2a490ed.}