feat(ci): add automated accessibility checks - #787
Open
Ugooweb wants to merge 1 commit into
Open
Conversation
|
@Ugooweb Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
Contributor
|
Kindly fix failed CI |
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
2 participants
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.
Closes #766
This PR introduces automated accessibility testing and linting to the frontend. Previously, there were no automated axe or pa11y tests, which increased the risk of shipping inaccessible UX—especially within critical flows like QR code generation and payments.
This PR establishes the foundation for a11y testing by adding the necessary tooling, writing our first automated audit, and updating contributor guidelines to prevent future accessibility regressions.
Key Changes
ESLint Configuration: Added and configured eslint-plugin-jsx-a11y to catch missing ARIA attributes, improper roles, and other accessibility violations during the linting phase (npm run lint).
Axe-Core Integration: Integrated axe-core and vitest-axe into the testing suite to run DOM accessibility audits on React components.
Initial Component Audit: Created an initial axe-core test for the QRPreview component (QRPreview.a11y.test.tsx) to ensure critical QR flows remain accessible.
Test Infrastructure Setup:
Added vitest.setup.ts to extend the test environment with toHaveNoViolations matchers.
Updated package.json to properly execute the test suite using vitest run during CI checks.
Documentation: Added an Accessibility Guidelines section to CONTRIBUTING.md to establish expectations for contributors regarding ARIA attributes, color contrast, and local a11y testing.