JedWatson / JedWatson/react-select
JAWS screen reader highlight/focus issue
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
Issue: Focus/highlight does not work properly for non searchable and searchable options when using JAWS screen reader
I think the issue lies with the dummy input used for non searchable options. The dummy input ends up outside the select component which leads JAWS to focus that. For searchable option, the highlighting isn't as bad since it does at least do it inside the component but ideally should do it for entire component. Tabbing to it is the easiest way to trigger the issue but also does it sometimes when clicking.
This is an accessibility issue.
Non searchable option video:
https://github.com/JedWatson/react-select/assets/86272014/ba360e6e-f5a0-4971-9c06-42af92c67e6b
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue with JAWS using the linked videos as reference, comparing non-searchable and searchable options and the dummy input's focus relative to the select component. Done means focus and highlighting remain within the entire select component when tabbing or clicking in both cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100