Rgaa requirements #183
Rgaa requirements #183
Conversation
FranceBe
commented
Aug 8, 2025
FranceBe
commented
- Fix many accessibility issues to meet RGAA's requirements
- Add jest-axe to enforce accessibility testing
There was a problem hiding this comment.
Pull Request Overview
This PR implements comprehensive accessibility improvements to meet RGAA (French General Accessibility Guidelines) requirements. The changes focus on making interactive elements accessible, adding proper ARIA attributes, and implementing automated accessibility testing.
- Converts non-accessible div elements to proper button/radio group structures with full keyboard navigation
- Adds ARIA labels, landmarks, and semantic HTML structure throughout the payment widget
- Integrates jest-axe for automated accessibility testing and adds comprehensive test coverage
Reviewed Changes
Copilot reviewed 46 out of 47 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/setupTests.ts | Adds jest-axe integration for accessibility testing |
| src/main.css | Adds sr-only utility class for screen reader accessibility |
| src/intl/messages/*.json | Adds accessibility-focused translation keys for ARIA labels |
| src/components/SkipLinks/ | New component providing skip navigation for modal sections |
| src/components/Modal/ | Enhances modal with proper ARIA labels and focus indicators |
| src/assets/ | Adds ARIA labels and role attributes to all SVG icons |
| src/Widgets/PaymentPlans/ | Major refactor to use accessible button/radiogroup structure |
| src/Widgets/EligibilityModal/ | Adds semantic sections, skip links, and proper heading structure |
| package.json | Adds jest-axe dependency for accessibility testing |
src/components/SkipLinks/index.tsx
Outdated
|
|
||
| const SkipLinks: FC<Props> = ({ skipLinks, className }) => ( | ||
| <div className={cx(s.skipLinks, className)} role="navigation" aria-label="Navigation rapide"> | ||
| <ul className={s.skipLinksList}> |
There was a problem hiding this comment.
The aria-label is hardcoded in French. This should use FormattedMessage for internationalization consistency with the rest of the application.
| <ul className={s.skipLinksList}> | |
| <FormattedMessage id="skipLinks.navigationLabel" defaultMessage="Quick navigation"> | |
| {ariaLabel => ( | |
| <div className={cx(s.skipLinks, className)} role="navigation" aria-label={ariaLabel}> | |
| <ul className={s.skipLinksList}> |
Copilot uses AI. Check for mistakes.
src/assets/Cross.tsx
Outdated
| @@ -15,6 +17,8 @@ function CrossIcon({ | |||
| viewBox="0 0 16 16" | |||
| fill="none" | |||
| xmlns="http://www.w3.org/2000/svg" | |||
| aria-label={ariaLabel || 'Fermer'} | |||
There was a problem hiding this comment.
The fallback aria-label is hardcoded in French. This should use internationalization to support multiple languages consistently.
Copilot uses AI. Check for mistakes.
