adobe / adobe/spectrum-web-components
[Bug]: Picker with help-text is not announced by screen readers
- 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
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