JedWatson / JedWatson/react-select

[Accessibility]: async select doesn't render aria-results accessibility text when no results found

Open
#6,091 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

issue/bug-unconfirmed
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:
Image

When using async loading, also recreatable in offical docs example there will be never rendered 0 results.

reproduction

  1. Open asynx example, type "test" to input.
  2. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.