Background
Color contrast and other accessibility violations are not currently caught by CI. A WCAG AA contrast failure on the community page filter pills was only surfaced by a Copilot code review, not by any automated check.
Goal
Wire @axe-core/react into the existing vitest/jsdom test suite so that WCAG AA violations (contrast, missing labels, invalid ARIA, etc.) fail CI automatically.
Suggested approach
- Install
@axe-core/react (or jest-axe, which also works with vitest)
- Add a smoke-test that renders key interactive components (
CommunityTable, homepage, etc.) and asserts toHaveNoViolations() with ruleset wcag2aa
- Enforce in the existing
Test workflow — no new workflow needed
Acceptance criteria
- At least
CommunityTable and any other components with custom styling are covered
- Violations at WCAG AA level fail the
Unit tests CI check
- README or a comment in the test file documents how to run locally and how to suppress known false positives if needed
References
Background
Color contrast and other accessibility violations are not currently caught by CI. A WCAG AA contrast failure on the community page filter pills was only surfaced by a Copilot code review, not by any automated check.
Goal
Wire
@axe-core/reactinto the existing vitest/jsdom test suite so that WCAG AA violations (contrast, missing labels, invalid ARIA, etc.) fail CI automatically.Suggested approach
@axe-core/react(orjest-axe, which also works with vitest)CommunityTable, homepage, etc.) and assertstoHaveNoViolations()with rulesetwcag2aaTestworkflow — no new workflow neededAcceptance criteria
CommunityTableand any other components with custom styling are coveredUnit testsCI checkReferences