Skip to content

Add aria-valuetext to the seeking, volume and balance sliders - #1371

Merged
captbaritone merged 1 commit into
keyboard-seekfrom
a11y-valuetext
Oct 12, 2026
Merged

captbaritone merged 1 commit into
keyboard-seekfrom
a11y-valuetext

Conversation

@captbaritone

Copy link
Copy Markdown
Owner

Stacked on #1369 (keyboard seeking), since both touch Position.tsx.

The seeking, volume and balance sliders are native range inputs, so screen readers announce their raw value: the seeking bar reads as "26", which means nothing. This adds aria-valuetext:

Slider Example
Seeking Bar "0:32 of 2:00". While dragging, it shows the scrub position, matching what the marquee shows.
Volume Bar "75%"
Balance "Center", "20% Left", "20% Right"

The seeking bar's text uses timeElapsed directly rather than reconstructing it from the slider's percentage. That avoids floating-point error showing "0:31" for 32 seconds.

The EQ band sliders get equivalent value text ("+6.0 dB") in #1370.

Testing

  • New Position.test.tsx cases cover the text both idle ("0:30 of 2:00") and while scrubbing ("1:00 of 2:00").
  • New Balance.test.ts covers balanceValueText.
  • tsc, eslint, prettier --check and vitest run pass locally.

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"
@github-actions

Copy link
Copy Markdown

Size Change: +210 B (+0.04%)

Total Size: 490 kB

📦 View Changed
Filename Size Change
packages/webamp/built/webamp.bundle.min.js 298 kB +105 B (+0.04%)
packages/webamp/built/webamp.lazy-bundle.min.js 192 kB +105 B (+0.05%)

compressed-size-action

@captbaritone
captbaritone merged commit eee09b9 into keyboard-seek Oct 12, 2026
4 of 5 checks passed
captbaritone added a commit that referenced this pull request Oct 15, 2026
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"
captbaritone added a commit that referenced this pull request Oct 15, 2026
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"
captbaritone added a commit that referenced this pull request Oct 15, 2026
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"
captbaritone added a commit that referenced this pull request Oct 15, 2026
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"
captbaritone added a commit that referenced this pull request Oct 15, 2026
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"
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