Skip to content

Commit 1e47ff4

Browse files
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 gen
1 parent 502ffc8 commit 1e47ff4

18 files changed

+1023
-1
lines changed

.gitignore

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,14 @@ chromatic-build-*.xml
137137
chromatic-diagnostics*.json
138138
chromatic.config.json
139139

140+
# Playwright test reports (generated)
141+
first-gen/test/playwright-a11y/report/
142+
second-gen/test/playwright-a11y/report/
143+
144+
# Playwright test results (generated)
145+
playwright-report/
146+
test-results/
147+
140148
# yarn
141149
.pnp.*
142150
.yarn/*

0 commit comments

Comments
 (0)