P11: docs accessibility smoke test + visual regression CI gate - #31
Merged
Merged
Conversation
… surface Converges the metadata/evidence layer built up in earlier Phase 4 work into a single component reference surface across all 52 component pages: header promotes install command/package path into the primary manifest panel with Installation/API/Recent changes jump anchors (Radio's split group/item API gets its own #api-group anchor); previewer keeps Preview/Source simultaneously visible under 01/02 labels instead of hiding either behind tabs; API reference gains a row-count header, numbering, and type code pills; recent changes becomes a 3-entry compact release strip. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Docs component-page accessibility smoke test (axe-core WCAG 2 A/AA scan + explicit keyboard assertions on installation tabs and copy controls) surfaced two real contrast/keyboard gaps: - Button `destructive` variant (error-50 on white) failed 4.5:1 text contrast in both themes. packages/ui and registry synced to error-70 bg/error-80 hover/error-60 focus ring. - The mobile code-block scroll region had no tab stop, so keyboard users couldn't reach it to scroll horizontally. Added tabindex="0" + inset focus-visible ring to the shared ComponentPageCodeBlock; installation's inactive package-manager tab and code line numbers moved off the general --docs-muted token onto dedicated --docs-code-muted/-fg so they read correctly against the fixed dark code surface. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Adds visual-regression.spec.ts covering home/Button-component/CLI-overview in light and dark at a fixed 1440x900 desktop viewport, backed by 6 approved baseline PNGs. Runs as its own `visual-chromium` Playwright project (testMatch/testIgnore keep it from double-running inside the existing desktop/mobile structural projects); locks theme, waits for route landmark/network-idle/document.fonts.ready, and disables animation/ caret/smooth-scroll before each screenshot. 3% diff-ratio + 0.3 color threshold tolerates cross-OS font anti-aliasing without masking real layout/token/component regressions. Baseline paths omit the host OS so local and CI runs share one approved PNG set. ci.yml gets a new `Docs E2E + visual regression` job (clean checkout, installs Chromium, runs the full `pnpm test:e2e:docs` suite, uploads the Playwright report/diff images on failure). DOCS_VISUAL_SYSTEM.md documents the automation boundary and the `--update-snapshots` update flow; ROADMAP.md moves accessibility + visual regression from outstanding quality infrastructure to Recently shipped. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
DEVLOG.md gets the two P11 entries (a11y smoke test, visual regression) matching the preceding two commits; TODOLIST.md drops the two P11 bullets they resolve (only "CLI real e2e" is left under P11) and removes the completed P29 Phase 4 section entirely (its content already lives in DEVLOG.md across the P29/Phase 4 entries and this session's PR #30). Also fleshes out P19 (blocks): splits blocks into "shell" (persistent app chrome like layout/dashboard-shell, wraps ng-content/router-outlet) vs "page" (full route content), maps 9 candidate pages to the component combinations they'd need, and picks a 3-block starting set (dashboard-shell, auth/login, data/table-page) chosen to each validate a different piece of the CLI mechanism rather than for coverage. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
3 tasks done
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes out P11's remaining docs-quality items (only "CLI real e2e" is left after this).
fix(ui) — a11y smoke test + fixes it found:
component-page-accessibility.spec.ts: axe-core WCAG 2 A/AA scan + explicit keyboard assertions (tab order,:focus-visible, ArrowLeft/Right on installation tabs) across desktop/mobile × light/darkdestructivevariant contrast (error-50→error-70/80/60), mobile code-block scroll region had no tab stop (tabindex="0"+ inset focus ring), installation/code-block muted text on--docs-mutedinstead of a dedicated--docs-code-muted/-fgtest(docs) — visual regression baseline + CI gate:
visual-regression.spec.ts+ 6 approved baselines (home/Button/CLI-overview × light/dark, 1440x900), isolated as its ownvisual-chromiumPlaywright projectci.ymljob:Docs E2E + visual regression, installs Chromium, runs the fullpnpm test:e2e:docs, uploads Playwright report on failureDOCS_VISUAL_SYSTEM.mddocuments the automation boundary +--update-snapshotsflow;ROADMAP.mdmoves both items to Recently shippeddocs — bookkeeping:
DEVLOG.md: two new entries narrating the aboveTODOLIST.md: drops the two resolved P11 bullets, removes the completed P29 Phase 4 section (already in DEVLOG + PR feat(docs): P29 Phase 4 — component docs scan efficiency and evidence surface #30), and fleshes out P19 (blocks) with a shell-vs-page split, 9 candidate pages mapped to component combinations, and a 3-block starting setTest plan
tsc --noEmit(docs app)npx playwright test --list: 46 tests across 8 files, visual-chromium's 6 not duplicated in desktop/mobile.github/workflows/ci.ymlvalid YAML🤖 Generated with Claude Code