Commit 0c06161
committed
test: add Playwright accessibility testing POC for Badge and Status Light
Implements automated accessibility testing using two complementary approaches:
1. ARIA Snapshot Testing
- Captures and validates accessibility tree structure
- Detects unintended changes to component semantics
- Serves as living documentation of expected a11y structure
2. aXe Rule Validation
- Automated WCAG 2.0/2.1 Level A/AA compliance checking
- Excludes best-practice rules (focused on component testing)
- Validates color contrast, ARIA attributes, and more
Test Coverage (14/14 passing, ~6s runtime):
- Badge: default, icons, semantic variants, color contrast
- Status Light: sizes (s/m/l), disabled state, color contrast
Key Implementation Details:
- Integrated with existing Storybook stories (no duplication)
- Element visibility waits (reliable, fast)
- WCAG-only scanning (appropriate for isolated components)
- HTML report generation for debugging
Files Added:
- first-gen/playwright.config.ts - Playwright configuration
- first-gen/test/playwright-a11y/aria-snapshots.spec.ts - ARIA tests
- first-gen/test/playwright-a11y/axe-validation.spec.ts - aXe tests
- first-gen/test/playwright-a11y/README.md - Documentation
- RFC_A11Y_TESTING.md - Comprehensive RFC with scaling plan
- README.A11Y.md - Quick start guide
Usage:
yarn test:a11y # Run all accessibility tests
yarn test:a11y:ui # Open Playwright UI for debugging
yarn test:a11y:1st # Run only 1st gen
yarn test:a11y:2nd # Run only 2nd gen1 parent 502ffc8 commit 0c06161
File tree
18 files changed
+1029
-1
lines changed- first-gen
- packages
- badge/test
- badge.a11y.spec.ts-snapshots
- status-light/test
- status-light.a11y.spec.ts-snapshots
- test
- second-gen/packages/swc/components
- badge/test
- badge.a11y.spec.ts-snapshots
- status-light/test
- status-light.a11y.spec.ts-snapshots
18 files changed
+1029
-1
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
137 | 137 | | |
138 | 138 | | |
139 | 139 | | |
| 140 | + | |
| 141 | + | |
| 142 | + | |
| 143 | + | |
| 144 | + | |
| 145 | + | |
| 146 | + | |
| 147 | + | |
140 | 148 | | |
141 | 149 | | |
142 | 150 | | |
| |||
0 commit comments