feature: accessibilty improvements#48
Merged
arielbvergara merged 8 commits intomasterfrom Mar 19, 2026
Merged
Conversation
- Add `inert` attribute effect in Header to disable background content
(main + footer) while the mobile drawer is open, preventing keyboard
focus from escaping the dialog (WCAG SC 2.1.2)
- Add `hamburgerButtonRef` to the hamburger button and pass it to
MobileMenu as `triggerRef` for focus restoration on close
- Add `type="button"` to the hamburger button
- In MobileMenu, accept `triggerRef` prop and add `closeButtonRef`
on the close button; move focus to close button on open and restore
focus to the trigger on close (WCAG SC 2.4.3)
- Fix `aria-label` on drawer: was `t('nav.home')` ("Home"), now uses
new `nav.mobileMenuLabel` key ("Navigation menu") (WCAG SC 4.1.2)
- Add `id="mobile-menu"` to drawer so `aria-controls="mobile-menu"`
on the hamburger resolves correctly
- Add `useRef` import to MobileMenu
- Add `nav.mobileMenuLabel` translation key to en, nl, and de message files
refs: refactor/header-elements-improvements
Add aria-current="page" to active navigation items so screen readers can identify the current page. The isActive and isServicesActive booleans were already computed; they just needed to be wired to the aria-current attribute. Applied to desktop nav links and services dropdown button in Header, and to mobile nav links and services toggle button in MobileMenu. (WCAG SC 1.3.1, SC 4.1.2) refs: refactor/header-elements-improvements
…inkage
- Add aria-label={SITE_CONFIG.name} to the logo <Link> so screen readers
announce the site name on mobile where the visible text is hidden
(WCAG SC 2.4.4, SC 4.1.2)
- Add aria-controls="locale-desktop-menu" to the locale switcher button
and id="locale-desktop-menu" to the locale menu div, mirroring the
existing correct pattern on the services dropdown (WCAG SC 4.1.2)
refs: refactor/header-elements-improvements
- Fix aria-current="true" → aria-current="page" on the active language switcher link; "page" is the correct token for current-page navigation (WCAG SC 4.1.2) - Wrap the Navigation, Legal, and Language columns in <nav> elements with aria-labelledby pointing to their respective <h3> headings, so AT users can navigate between footer landmark regions (WCAG SC 2.4.1) refs: refactor/header-elements-improvements
ContactForm:
- Add aria-live="polite" aria-atomic="true" sr-only div that populates
with successTitle text when submitted, so screen readers announce the
result without requiring focus movement (WCAG SC 4.1.3)
- Add ref to success <h3> and call .focus() via useEffect when submitted
becomes true, so keyboard-only users also reach the confirmation
- Add aria-hidden="true" to decorative CheckCircle icon in success state
- Add aria-busy={isLoading} to submit button to signal in-progress state
(WCAG SC 1.3.1)
- Add useRef and useEffect imports
AppointmentForm:
- Same live region and focus management pattern for the success state
- Add aria-hidden="true" to decorative CheckCircle in success state
- Add aria-busy={isSubmitting} to submit button
- Add useRef to imports
refs: refactor/header-elements-improvements
Replace the hardcoded English aria-label="5 stars" on the star rating
container with t('trust.starsLabel') so the accessible name is in the
language of the page content for all three supported locales.
Add trust.starsLabel translation key to en, nl, and de message files.
(WCAG SC 3.1.2)
refs: refactor/header-elements-improvements
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves frontend accessibility for navigation and form submission flows by adding better focus management, ARIA attributes, and localized screen-reader labels.
Changes:
- Added localized labels for the mobile menu dialog and testimonial star rating across
en/de/nltranslations. - Improved focus handling and screen-reader announcements for successful form submissions (Contact + Appointment forms).
- Enhanced navigation semantics/ARIA:
aria-current,aria-controls,aria-busy, and footer landmark labeling; addedinerthandling while the mobile menu is open.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
frontend/messages/nl.json |
Adds nav.mobileMenuLabel and trust.starsLabel translations (NL). |
frontend/messages/en.json |
Adds nav.mobileMenuLabel and trust.starsLabel translations (EN). |
frontend/messages/de.json |
Adds nav.mobileMenuLabel and trust.starsLabel translations (DE). |
frontend/components/ui/ContactForm.tsx |
Adds live-region announcement and focus move to success heading; sets aria-busy on submit button. |
frontend/components/ui/AppointmentForm.tsx |
Adds focus move to success heading; adds live region in success state; sets aria-busy on submit button. |
frontend/components/sections/landing/TrustSignals.tsx |
Localizes the star-rating aria-label. |
frontend/components/layout/MobileMenu.tsx |
Adds dialog id/label, focus management, and aria-current for active items. |
frontend/components/layout/Header.tsx |
Adds inert background handling when mobile menu is open; improves ARIA wiring and focus restoration integration. |
frontend/components/layout/Footer.tsx |
Improves footer navigation landmarks via nav + aria-labelledby; fixes aria-current usage. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
The focus-restoration effect previously called triggerRef.focus() on the initial render when isOpen was already false, stealing focus from the page. Add a didOpenRef sentinel that is set to true only when the menu has been opened at least once; focus is restored to the trigger only on the open → closed transition, not on mount. refs: refactor/header-elements-improvements
…ment Localize three hardcoded English aria-labels so screen readers announce them in the current page locale: - nav.closeMenu: "Close menu" / "Menu sluiten" / "Menü schließen" - nav.openMenu: "Open menu" / "Menu openen" / "Menü öffnen" - nav.selectLanguage: "Select language" / "Taal selecteren" / "Sprache auswählen" Apply nav.closeMenu to the MobileMenu close button, nav.openMenu to the hamburger button, and nav.selectLanguage to the locale switcher button. Add the three keys to en.json, nl.json, and de.json. Also fix the comment on the AppointmentForm live region from "Persistent" to "Inline" since the region is rendered inside the success-return branch rather than being present throughout the component lifecycle. refs: refactor/header-elements-improvements
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.
No description provided.