shoelace-style/shoelace

A11y issue: sl-range tooltip is read by screen reader on every update to value

Open

#2,406 opened on Mar 19, 2025

View on GitHub
 (1 comment) (2 reactions) (0 assignees)TypeScript (922 forks)github user discovery
buggood first issuehelp wanted

Repository metrics

Stars
 (13,867 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Describe the bug

<sl-range> has an accessibility bug where narrator will announce the text of the slider's tooltip any time it changes. This causes a problem for video and audio players that use sl-range for the track position: narrator announces the position of the video/audio as it's playing over and over again.

Here's a video showing the problem (sound on):

https://github.com/user-attachments/assets/13372537-6a7f-4ad0-b0a2-bd8ead9506d4

https://judahtemp.b-cdn.net/sl-range-a11y-narrator-bug.mp4

To Reproduce

Steps to reproduce the behavior:

  1. Create a page with <sl-range> on it.
  2. Change the sl-range value every second.
  3. Bug: Narrator on Windows will announce the new sl-range value every time it changes because of sl-range tooltip.

Demo

Fiddle

Screenshots

See video

Browser / OS

  • OS: Windows, though this may also be present on Mac.
  • Browser: Chrome
  • Browser version: 134

Contributor guide

Research direction
Investigate why the tooltip's content is announced by screen readers on value change. Check the tooltip's ARIA attributes and consider adding aria live='off' or debouncing the tooltip update to reduce announcements. Also ensure that the slider retains its accessibility for screen readers on interaction.
Tech stack
typescript
Domain
frontendaccessibility
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
GitTypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75