Skip to content

Accessibility: keyboard navigation and ARIA labels on countdown #3

@heyhidas

Description

@heyhidas

Accessibility improvements

The countdown intercept page (src/pages/Intercept.tsx) currently has no ARIA attributes on the timer or progress ring, and the buttons after the countdown aren't keyboard-navigable in a logical order on some browsers.

What needs to be done:

  1. Add aria-live="polite" and aria-label to the countdown number so screen readers announce it
  2. Add role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax to the SVG ring
  3. Ensure the two action buttons (Continue / Close) receive focus in the correct order when the countdown ends
  4. Test with VoiceOver (iOS) or TalkBack (Android)

Relevant file: src/pages/Intercept.tsx lines 89–104

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions