Skip to content

chore(accessibility): Fix RGAA requirements#184

Merged
MarcAntoineGautier merged 4 commits intomasterfrom
chore/rgaa-fix-focus-indicators
Aug 18, 2025
Merged

chore(accessibility): Fix RGAA requirements#184
MarcAntoineGautier merged 4 commits intomasterfrom
chore/rgaa-fix-focus-indicators

Conversation

@MarcAntoineGautier
Copy link
Copy Markdown
Contributor

@MarcAntoineGautier MarcAntoineGautier commented Aug 18, 2025

This pull request introduces significant accessibility improvements and minor visual refinements to the EligibilityModal and related payment plan components. The changes focus on enhancing keyboard navigation, providing better screen reader support, and ensuring compliance with accessibility standards (such as RGAA). Additionally, several CSS adjustments improve responsiveness and consistency in font sizing.

Accessibility improvements:

  • Added ARIA attributes, region roles, and proper heading structure to main sections (EligibilityPlansButtons, Info, Schedule) for improved screen reader navigation and semantics. Also introduced skip links for quick access to key sections. (src/Widgets/EligibilityModal/index.tsx [1] [2] [3]; src/Widgets/EligibilityModal/components/EligibilityPlansButtons/index.tsx [4] [5] [6]; src/Widgets/EligibilityModal/components/Info/index.tsx [7]; src/Widgets/EligibilityModal/components/Schedule/index.tsx [8]
  • Improved focus outlines and keyboard accessibility for interactive elements, including payment plan buttons and modal controls. (src/Widgets/EligibilityModal/components/EligibilityPlansButtons/EligibilityPlansButtons.module.css [1]; src/Widgets/PaymentPlans/PaymentPlans.module.css [2] [3]
  • Added comprehensive accessibility tests using jest-axe to ensure no violations and proper keyboard navigation. (src/Widgets/EligibilityModal/__tests__/Accessibility.test.tsx [1]; package.json [2] [3]

Visual and style updates:

  • Updated font sizes in several CSS modules to use rem units for better scaling and zoom support. (src/Widgets/EligibilityModal/EligibilityModal.module.css [1]; src/Widgets/EligibilityModal/components/EligibilityPlansButtons/EligibilityPlansButtons.module.css [2]; src/Widgets/EligibilityModal/components/Info/Info.module.css [3]; src/Widgets/EligibilityModal/components/Title/Title.module.css [4]; src/Widgets/PaymentPlans/PaymentPlans.module.css [5] [6]
  • Improved button styling and interaction states for payment plan selection, including hover and disabled states. (src/Widgets/PaymentPlans/PaymentPlans.module.css src/Widgets/PaymentPlans/PaymentPlans.module.cssR57-R90)

Other minor changes:

These changes collectively make the modal experience more accessible and visually consistent for all users.

FranceBe and others added 3 commits August 7, 2025 17:01
* chore(rgaa): replace div role button with real button

* chore(rgaa): fix code to match rgaa requirements

* chore(rgaa): add jest-axe to test accessibility

* chore(crowdin): update translations from crowdin

* chore(doc): remove md file to use notion page instead

* chore(en): fix hard coded french message to ensure full intl compatibility -wip

* fix test

---------

Co-authored-by: Marc-Antoine Gautier <marc-antoine.gautier@getalma.eu>
@MarcAntoineGautier MarcAntoineGautier changed the title Fix RGAA requirements chore(accessibility): Fix RGAA requirements Aug 18, 2025
@sonarqubecloud
Copy link
Copy Markdown

Copy link
Copy Markdown
Member

@sylvainboc sylvainboc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM after manual testing

@MarcAntoineGautier MarcAntoineGautier merged commit d193079 into master Aug 18, 2025
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants