feat(frontend): automated accessibility testing with jest-axe (closes #132)#195
Open
Moonwalker-rgb wants to merge 1 commit into
Open
feat(frontend): automated accessibility testing with jest-axe (closes #132)#195Moonwalker-rgb wants to merge 1 commit into
Moonwalker-rgb wants to merge 1 commit into
Conversation
…hainForgee#132) Introduces jest-axe as a first-class test dependency and wires it into the unit-test runner via a shared @jest-environment jsdom suite, so any new a11y regression surfaces in CI rather than in production. Adds: - jest-axe + axe-core devDeps, jest-axe ambient types - jest.setup.a11y.ts registering toHaveNoViolations as a matcher - jest.config.ts setupFilesAfterEnv wiring - a11yTestUtils + a11y-mocks helper modules - a11y.test.tsx covering ErrorInline (banner + card), ActivityCenter, Navbar, ErrorBoundary, EvidenceArtifactViewer - frontend-ci.yml running type-check, lint, jest on app/frontend/** - lighthouserc.json + LIGHTHOUSE_CI.md (manual opt-in audit config, not gating CI per issue scope) Fixes uncovered violations: - icon-only close/remove buttons get aria-label + aria-hidden=true on the inner SVG (ErrorInline, ActivityCenter) - notification-count badge gains sr-only text in ActivityCenter - EvidenceArtifactViewer filename heading promoted from <h3> to <h2> to satisfy heading-order axe rule against pages that provide <h1>
Contributor
Author
|
cc @Lansa-18 @maramina — recent frontend contributors. Specifically asking for review on (1) the jest-axe setup wiring in |
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
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.
What
Closes #132 — adds automated accessibility testing for the frontend using
jest-axe, so axe-core violations surface in CI rather than at the aid recipient's keyboard.Changes
Testing infrastructure
jest-axe@^10andaxe-core@^4.12added as devDepsjest.setup.a11y.tsregisterstoHaveNoViolationsglobally viasetupFilesAfterEnvjest-axe.d.ts(ambient types) so stricttsc --noEmitstays cleana11yTestUtils.tsx(renderAndCheckA11yhelper returning a structured report) anda11y-mocks.tsx(shared mocks for next/link, next-intl, next/navigation, @stellar/freighter-api, and project hooks)a11y.test.tsx—@jest-environment jsdomsuite coveringErrorInline(banner + card),ActivityCenter,Navbar,ErrorBoundary,EvidenceArtifactViewer. 6 tests passing, 0 critical violations.Component fixes (the axe violations the suite uncovered)
ErrorInlineandActivityCenternow carryaria-labeland the inner SVGaria-hidden="true" focusable="false"ActivityCenteris decorative (aria-hidden) with a newsr-onlytext node for screen readersEvidenceArtifactViewerfilename heading promoted from<h3>to<h2>to satisfyheading-orderagainst pages that provide an<h1>CI
.github/workflows/frontend-ci.ymlrunspnpm type-check,pnpm lint, andpnpm jest --cion every PR touchingapp/frontend/**, using the officialpnpm/action-setupand the pnpm store cache.Lighthouse CI (documented, not gated)
app/frontend/lighthouserc.jsonassertscategories:accessibility≥ 0.9app/frontend/LIGHTHOUSE_CI.mdexplains why Lighthouse isn't part of the CI workflow yet — jest-axe already catches the same class of violations faster and with zero infrastructure overhead; Lighthouse is opt-in viapnpm dlx @lhci/cli autorunor a future scheduled workflow.Tests
tsc --noEmitpassesNotes
axeContextprop onrenderAndCheckA11yaccepts an axeRunOptionsobject (orundefined). Use it to scope a scan to a single element when adding page-level tests.<main>landmark wrap their fixture there to satisfylandmark-one-mainandpage-has-heading-one.EvidenceArtifactViewerheading change is a deliberate conformance trade-off — if the component is later embedded under a page that already uses an<h2>, swap it for atitleHeadingLevelprop or anaria-levelheading role.