Repository navigation
Added
tools/reach-test.mjs — a reachability gate.
render-test.mjs, the golden exports, and axe-audit.mjs all verify rendering; none verify reachability. Twice a feature shipped complete in CSS, schema, docs, and goldens while remaining unreachable in the UI, passing every gate: kraft/studio were missing from THEME_PRESETS in v1.2.0, and narrative-card/embedded-media were filtered out of the sidebar TOC.
This script asserts on the controls themselves, in a real browser:
| Assertion | Catches |
|---|---|
Every theme.schema.json preset enum value has a [data-theme] block in ifbase.css |
A documented preset that silently renders as default |
| Every preset enum value appears in the runtime theme menu | The v1.2.0 kraft/studio bug |
| The theme menu offers no preset the schema disallows | A picker entry a spec cannot legally request |
| Every question — display-only types included — has a TOC entry | The narrative-card/embedded-media bug |
| No TOC entry falls back to a raw question id | A developer identifier leaking into the nav |
| Display-only types excluded from each section's answered/total count | Progress counts inflated by unanswerable steps |
Global actions inside .topbar and on-screen at 1440 px and 375 px |
A regression back to the sidebar footer that hid below 1100 px |
Verified by mutation. Each of the six defect shapes above was reintroduced and confirmed to fail the gate, then reverted. ifbase.js/ifbase.css are unchanged by this release, confirming every mutant was fully reverted.
Visibility means within the viewport and topmost at its own centre, not merely a non-zero box — a control above the fold or behind an overlay counts as unreachable. An early draft used a width > 0 check and happily passed a control sitting at top = -2px.
Usage
node tools/reach-test.mjs [<spec.json>] [--verbose] # or: npm run reach
Defaults to examples/question-type-catalog.json, which exercises every question type. Run it alongside axe-audit.mjs after adding a theme preset or question type: the axe audit checks contrast, the reachability gate checks the thing can actually be chosen.
Documentation
references/theming.md— a new preset needs all three oftheme.schema.json,ifbase.css, andTHEME_PRESETS.- SKILL.md tools table and README tooling paragraph updated.
🤖 Generated with Claude Code