adobe / adobe/spectrum-web-components
[Bug]: Accessibility issue in the number field in sp-slider component
- 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)
sp-slider
### Library version
_No response_
### Expected behavior
When a user navigates to an editable sp-slider (e.g. the Opacity, Letter Spacing, Line Spacing, or Paragraph Spacing input fields) and navigate to the input field by pressing tab, it should announce "{semantic label} {value} selected". (e.g. "Opacity 100% selected", "Letter spacing 0 selected").
### Actual behavior
The screen reader announces only "{value} selected" (e.g. "100% selected", "0 selected", "1.2 selected"). It does not announce the semantic label along with the value -- so the user has no context about what that value represents. The expected behavior is "{label} {value} selected" (e.g. "Opacity 100% selected", "Letter spacing 0 selected").
### Screenshots
_No response_
### What browsers are you seeing the problem in?
Chrome, Safari
### How can we reproduce this issue?
1. visit https://express.adobe.com/new?category=text
2. Turn on screen reader
3. choose any text template
4. select any text
5. left you'll see opacity button, click on it
6. change opacity, click on tab. Focus will move to the input field and the value will be selected
Screen reader will only announce - "{value} selected", instead of "{semantic label} {value} selected".
### Sample code or abstract reproduction which illustrates the problem
_No response_
### Severity
SEV 3
### Logs taken while reproducing problem
_No response_
### Would you like to track this issue in Jira?
- [x] Yes, please tell me the ticket number!
Contributor guide
Research direction
Start with the sp-slider component and its editable input fields, then reproduce the issue using the listed Chrome or Safari screen-reader steps. Done means tabbing to an input announces both its semantic label and selected value, such as “Opacity 100% selected,” rather than only the value.
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
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100