Skip to content

fix(a11y): restore RouteAnnouncer, add useRouteFocus and route titles - #1419

Merged
Baskarayelu merged 3 commits into
CredenceOrg:mainfrom
praizeD10:fix/client-side-navigation-a11y
Oct 22, 2026
Merged

Baskarayelu merged 3 commits into
CredenceOrg:mainfrom
praizeD10:fix/client-side-navigation-a11y

Conversation

@praizeD10

Copy link
Copy Markdown
  • Re-implement RouteAnnouncer against the full specification in RouteAnnouncer.test.tsx:
    • Import labels from src/config/navigation.ts
    • Render polite live region with role="status", aria-atomic="true", aria-relevant="additions text"
    • Export resolvePageLabel, resolveRouteLabel, clampLabel, buildAnnouncement, ANNOUNCE_DELAY_MS, ANNOUNCEMENT_DELAY_MS, MAX_LABEL_LENGTH, UNKNOWN_ROUTE_LABEL
    • Normalize slashes, handle dynamic segment fallbacks, and clear synchronously before delayed update for repeat announcements
  • Repair mechanical defects in src/components/RouteAnnouncer.test.tsx (missing imports, array initialEntries, typo to%Be)
  • Implement useRouteFocus hook and integrate into Layout:
    • Move focus to h1 (with tabIndex={-1}) after ANNOUNCE_DELAY_MS, falling back to #main-content
    • Ignore initial load and query-string-only changes (?tab=x)
    • Handle lazy routes that suspend via MutationObserver
  • Add useDocumentTitle to Home, Attestations, and SignIn so all routes have distinct titles (WCAG 2.4.2)
  • Add comprehensive test coverage in useRouteFocus.test.tsx and pageTitles.test.tsx

closes #1389

- Re-implement RouteAnnouncer against the full specification in RouteAnnouncer.test.tsx:
  - Import labels from src/config/navigation.ts
  - Render polite live region with role="status", aria-atomic="true", aria-relevant="additions text"
  - Export resolvePageLabel, resolveRouteLabel, clampLabel, buildAnnouncement, ANNOUNCE_DELAY_MS, ANNOUNCEMENT_DELAY_MS, MAX_LABEL_LENGTH, UNKNOWN_ROUTE_LABEL
  - Normalize slashes, handle dynamic segment fallbacks, and clear synchronously before delayed update for repeat announcements
- Repair mechanical defects in src/components/RouteAnnouncer.test.tsx (missing imports, array initialEntries, typo to%Be)
- Implement useRouteFocus hook and integrate into Layout:
  - Move focus to h1 (with tabIndex={-1}) after ANNOUNCE_DELAY_MS, falling back to #main-content
  - Ignore initial load and query-string-only changes (?tab=x)
  - Handle lazy routes that suspend via MutationObserver
- Add useDocumentTitle to Home, Attestations, and SignIn so all routes have distinct titles (WCAG 2.4.2)
- Add comprehensive test coverage in useRouteFocus.test.tsx and pageTitles.test.tsx
@drips-wave

drips-wave Bot commented Oct 19, 2026

Copy link
Copy Markdown

@praizeD10 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! 🚀

Learn more about application limits

@praizeD10

Copy link
Copy Markdown
Author

@Baskarayelu task completed please merge and assign points

@praizeD10

Copy link
Copy Markdown
Author

@Baskarayelu please merge

@Baskarayelu
Baskarayelu merged commit 0ca4402 into CredenceOrg:main Oct 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix(a11y): route changes are not reliably announced, focus stays on the old link, and several routes have no page title (WCAG 2.4.2, 2.4.3, 4.1.3)

2 participants