adobe / adobe/spectrum-web-components
[Bug][a11y][VoiceOver]: Range Slider handles have no accessibility name
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 262
- Avg merge
- 3d 10h
- Merged PRs (30d)
- 68
Description
### Code of conduct
- [X] I agree to follow this project's code of conduct.
### Impacted component(s)
Slider, SliderHandle
### Expected behavior
Using Safari with VoiceOver on either macOS or iOS, the slider handles for Range Sliders examples on https://opensource.adobe.com/spectrum-web-components/components/slider-handle/ should announce with the `label` provided for `sp-slider` and the `label` provided for each `sp-slider-handle`. The example below should have two inputs announced as "5, Output Levels Minimum, slider" and "250, Output Levels Maximum, slider."
```html
Output Levels
```
The labelling seems to be working as expected with Chrome, Edge and Firefox.
### Actual behavior
Using Safari with VoiceOver on either macOS or iOS, the slider handles for Range Sliders examples on https://opensource.adobe.com/spectrum-web-components/components/slider-handle/ announce without any accessibility name. The example below has two inputs announced as "5, slider" and "250, slider," without context.
```html
Output Levels
```
Also, note that the multi-handle storybook examples do not provide a `label` for each of the `sp-slider-handle` elements: https://opensource.adobe.com/spectrum-web-components/storybook/index.html?path=/story/slider--two-handles
### Screenshots
_No response_
### What browsers are you seeing the problem in?
Safari
### How can we reproduce this issue?
1. Go to '...'
2. Click on '....'
3. Scroll to '....'
4. Check console
5. See error
### Sample code that illustrates the problem
_No response_
### Logs taken while reproducing problem
_No response_
Contributor guide
Research direction
Start by inspecting the Slider and SliderHandle component implementations and reproduce the range-slider example with Safari VoiceOver on macOS or iOS. Compare the announcements with Chrome, Edge, and Firefox, and verify that each handle includes the parent and handle labels in its accessible name when the issue is resolved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100