JedWatson / JedWatson/react-select
[Accessibility]: async select doesn't render aria-results accessibility text when no results found
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
Hey, i think there is issue with async select. As when no options is returned from loadOptions function the ariaLiveMessages.onFilter doesn't get triggered.
Without async loading there is no issue, when no results are found, the correct aria-text gets rendered in html:
When using async loading, also recreatable in offical docs example there will be never rendered 0 results.
reproduction
- Open asynx example, type "test" to input.
- id="aria-results" span is empty
Same works on not async example -> id="aria-results" span get children of "0 results available for search term test.".
Other
Also can't overwrite it because ariaLiveMessages.onFilter is not getting called when async loadOptions callback return empty array.
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 loading example and trace how loadOptions returning an empty array reaches ariaLiveMessages.onFilter and the aria-results span. Compare it with the non-async example, then verify that an empty async result renders the expected zero-results text and still allows ariaLiveMessages.onFilter to be overridden.
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
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100