JedWatson / JedWatson/react-select
Loading state not announced by screen reader
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
When using the async version of react-select (I'm using v2), the loadingMessage (or other reference to the loading state) is not announced by the screen reader while search results are loading. Instead, the screen reader announces that you have "0 options for search term [x]" until the results load, which is misleading.
This behavior can be seen in the examples on the Async docs page - https://react-select.com/async. I tested using Voiceover on Chrome and Safari, but since the screen reader text is manually provided by react-select (in the A11yText component), this bug should be consistent across screen readers and browsers.
A possible solution is to pass the loadingMessage text to the A11yText component when isLoading is true.
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
Start with the async select implementation and the A11yText component, then reproduce the behavior from the Async docs example using a screen reader. Trace how loadingMessage and the "0 options" announcement are selected while results load; done means the loading state is announced instead of the misleading zero-options message, with coverage for the loading case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100