adobe / adobe/spectrum-web-components
[Bug]: Slider handler is not keyboard accessible when the slider has `editable` attribute
- 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
### Expected behavior
Both the slider and the input should be keyboard focusable and accessible.
### Actual behavior
The handler is keyboard accessible only when the slider is not `editable`
### Screenshots
N/A
### What browsers are you seeing the problem in?
Firefox, Chrome, Safari, Microsoft Edge
### How can we reproduce this issue?
1. Go to https://opensource.adobe.com/spectrum-web-components/components/slider/
2. Navigate using the keyboard
3. Observe there is no tab stop on the handler when the slider is editable
### Sample code or abstract reproduction which illustrates the problem
Seems like this was intentional, as per https://github.com/adobe/spectrum-web-components/blob/bd35e1b7763675fae79e52ef88cdaa661c3fcdeb/packages/slider/src/HandleController.ts#L557
### Severity
None
### Logs taken while reproducing problem
_No response_
Contributor guide
Research direction
Start by reading the referenced packages/slider/src/HandleController.ts location around line 557 and reproduce the issue from the slider component page using keyboard navigation. The fix is done when both the editable slider and its input have keyboard focus stops in Firefox, Chrome, Safari, and Edge.
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
- 35/100