Skip to content

feat(v2): make audio history player keyboard-accessible - #185

Open
RahulHarihar wants to merge 1 commit into
karansinghgit:mainfrom
RahulHarihar:feat/audio-player-keyboard-controls
Open

RahulHarihar wants to merge 1 commit into
karansinghgit:mainfrom
RahulHarihar:feat/audio-player-keyboard-controls

Conversation

@RahulHarihar

Copy link
Copy Markdown

Summary

Fixes #184

In desktop/src/components/AudioPlayer.tsx, the waveform seeker declared role="slider" with ARIA min/max/now attributes, but lacked focusability and keyboard event handlers.

This PR completes the W3C APG Slider keyboard contract for the audio player:

  • Focusability: Added tabIndex={peaks ? 0 : -1} with a subtle focus indicator (focus-visible:ring-2 focus-visible:ring-accent/50), consistent with the existing disabled={!peaks} guard on the Play button.
  • Keyboard seeking: Added onKeyDown handler:
    • ← / →: seek backward / forward by 5 seconds
    • Home / End: jump to 0:00 / track end
    • Space / Enter: toggle play / pause
  • Screen reader readability: Added aria-valuetext announcing formatted time (e.g., 0:15 of 1:20) via formatClock.
  • Zero regression: Mouse click seeking and waveform visual rendering are untouched. Confined to one file with no new dependencies.

Tested On

  • Windows 11:
    • npm run typecheck passed cleanly
    • npm test -- --run passed cleanly
    • Verified keyboard focus ring and arrow/Home/End/Space seeking in browser preview

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.

feat(v2): audio history player is keyboard-inaccessible despite declaring role="slider"

1 participant