adobe / adobe/spectrum-web-components

[Bug]: Accessibility issue in the number field in sp-slider component

Open
#6,092 4 comments 0 reactions 0 assignees View on GitHub
a11y bug Component:Number field Component:Slider SEV 3 triage
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").

Image

### 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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.