Skip to content

Make the seeking bar work from the keyboard - #1369

Open
captbaritone wants to merge 3 commits into
masterfrom
keyboard-seek
Open

captbaritone wants to merge 3 commits into
masterfrom
keyboard-seek

Conversation

@captbaritone

@captbaritone captbaritone commented Oct 12, 2026 •

Copy link
Copy Markdown
Owner

Note: this branch now also contains #1371 (aria-valuetext for the seeking, volume and balance sliders). #1371 was stacked on this PR, and it was merged into this branch rather than master. Merging this PR lands both changes.

The seeking bar (#position, an <input type="range">) can be focused, but only seeks in onPointerUp. Arrow keys fire onInput, which only updates the scrub preview. The clock display moves, but playback never seeks, and the slider stays stuck in "scrubbing" mode until the next pointer interaction.

Changes

  • Arrow keys seek ±5 seconds (Right/Up forward, Left/Down back), using the existing seekForward/seekBackward action creators that the arrow-key hotkeys use. I didn't keep the native 1% step: the displayed position uses Math.floor(timeElapsed), so on tracks shorter than 100s a 1% step rounds back to the same value, and a paused track would never get past the start.
  • Other non-pointer input seeks immediately. That's Home, End, PageUp/PageDown, and screen-reader increment/decrement actions.
  • Pointer dragging is unchanged. It still previews while dragging and seeks on release.

The global hotkeys already ignore events from <input>s, so with enableHotkeys on there's no double seek.

Testing

  • New Position.test.tsx (thirty seconds into a two-minute track):
    • ArrowRight seeks to 35s and ArrowLeft to 25s, and both prevent the native step.
    • Other keys are left alone.
    • Input with no pointer down seeks immediately.
    • A pointer drag only seeks on pointerup.
  • The three keyboard tests fail against the old implementation. The pointer-drag test passes against both, confirming that behaviour is unchanged.
  • tsc, eslint, prettier --check and vitest run pass locally.

@netlify

netlify Bot commented Oct 12, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for tourmaline-kringle-c98715 ready!

Name Link
🔨 Latest commit b2e829e
🔍 Latest deploy log https://app.netlify.com/projects/tourmaline-kringle-c98715/deploys/6ad14fe61cbc772af9d61d72
😎 Deploy Preview https://deploy-preview-1369--tourmaline-kringle-c98715.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions

github-actions Bot commented Oct 12, 2026 •

Copy link
Copy Markdown

Size Change: +371 B (+0.08%)

Total Size: 491 kB

📦 View Changed
Filename Size Change
packages/webamp/built/webamp.bundle.min.js 298 kB +175 B (+0.06%)
packages/webamp/built/webamp.lazy-bundle.min.js 193 kB +196 B (+0.1%)

compressed-size-action

@captbaritone
captbaritone force-pushed the keyboard-seek branch 4 times, most recently from d7a9b10 to 184c570 Compare October 15, 2026 17:18
captbaritone and others added 3 commits October 15, 2026 15:12
The position slider only seeked on pointerup. Keyboard (and screen reader)
changes fired input, which updated the scrub preview but never seeked.

- Arrow keys now seek -/+5 seconds, like the arrow key hotkeys. The native 1%
  step can be smaller than the one second resolution of the displayed
  position, which would leave short tracks stuck when paused.
- Other input that does not come from a pointer (Home/End/PageUp/PageDown,
  assistive tech increment/decrement) seeks immediately.
- Pointer dragging is unchanged: preview while dragging, seek on release.
Screen readers announced these range inputs as bare numbers (e.g. "26" for
the seeking bar). Describe their values instead:

- Seeking Bar: "0:32 of 2:00" (the scrub position while dragging)
- Volume Bar: "75%"
- Balance: "Center", "20% Left" or "20% Right"

This branch has not been deployed

No deployments
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.

1 participant