adobe / adobe/spectrum-web-components

[Bug]: Slider handler is not keyboard accessible when the slider has `editable` attribute

Open
#4,906 3 comments 0 reactions 0 assignees View on GitHub
a11y bug Component:Slider needs-jira-ticket SEV missing
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.