adobe / adobe/spectrum-web-components

[Bug]: Picker with help-text is not announced by screen readers

Open
#5,361 1 comment 0 reactions 0 assignees View on GitHub
a11y bug Component:Help text Component:Picker SEV 4
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)

Picker

### Expected behavior

https://opensource.adobe.com/spectrum-web-components/components/picker/#use-help-text-to-show-context
The help-text should be announced by screen-readers and be able to both render and get an accessible association for help text with `sp-picker`

### Actual behavior

https://opensource.adobe.com/spectrum-web-components/components/picker/ (help text section at bottom)
This doesn’t work as the help text isn’t in the same shadow so the describedby can’t resolve

https://opensource.adobe.com/spectrum-web-components/components/help-text/#ensure-help-text-and-field-share-the-same-root
Despite it saying that sp-picker supports a help-text slot the sp-picker [documentation](https://opensource.adobe.com/spectrum-web-components/components/picker/api/) doesn’t agree

### Screenshots

_No response_

### What browsers are you seeing the problem in?

Microsoft Edge, Safari, Chrome, Firefox

### How can we reproduce this issue?

1. Go to https://opensource.adobe.com/spectrum-web-components/components/picker/#use-help-text-to-show-context
2. Open NVDA or JAWS screen readers
3. Check the help-text is not announced by screen reader

### Sample code or abstract reproduction which illustrates the problem

_No response_

### Severity

SEV 4

### Logs taken while reproducing problem

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the Picker help-text documentation and the Help Text guidance on sharing the same root, then reproduce the issue with a screen reader using the linked Picker example. Done means help text is rendered, associated with sp-picker, and announced by screen readers, with the Picker API documentation matching the supported slot.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.