[retro 2026-10-12] UI instrument and CSS gaps: pseudo-content assertions, display:contents rows, nonexistent Atlas classes, focus ring on landing #276

Info for research (no PR requested)

Four small UI-verification gaps from the same overnight run, each cost a failed run or a re-recorded take. Proposed homes in brackets.

1. CSS ::before/::after text is invisible to innerText checks (testing-shape.md false-green register). A journey for empty-state sentences authored in CSS failed 3 of 17 steps on the first run; the feature was fine. Fix was a pseudoText check in the journey runner (reads getComputedStyle(el,'::after').content). [register row plus ship the check in journey-runner.js]
2. display:contents on Data Grid 2 rows: testing-shape.md covers offsetParent === null, but not that an outline, background or scroll-into-view aimed at the row paints nothing. A demo highlight needed three takes; the fix is to target the cells. [learned-css-that-never-applied.md, as a fourth way a correct rule paints nothing; the demo skill's highlight overlay]
3. Atlas spacing classes: only none / bare / medium / large / layout exist for outer-left. spacing-outer-left-small was used on a page, passed check and mxbuild, and did nothing. design-spacing.md maps S to the bare class but never says '-small' is invalid. [one line in design-spacing.md; idea for a lint rule: class name matches spacing-(outer|inner)-* but is not in the vendored design-properties]
4. Focus ring on first control at landing: Mendix script-focuses the first nav item and Chromium treats it as :focus-visible, so a plain :focus-visible rule paints a ring for every role on every landing. The step-by-step fix (keyboard-only flag in theme JS) is already known privately; the shared toolkit has nothing, and the first task of the night still shipped the plain rule. The functional journey passed; only a final-review screenshot showed it. [learned-css-that-never-applied.md plus a UI review checklist line: screenshot a cold landing and look for a ring on the first control]

🤖 Generated with Claude Code