react-component / react-component/select
Bug: Options length is announced incorrectly by screen readers
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 938
- Forks
- 482
- Avg merge
- 15h 8m
- Merged PRs (30d)
- 2
Description
Description
When navigating the select component with keyboard + screen reader (i am using Screen Reader extension in Chrome, but issue is similar with all screen readers), the current options is always announced as "[options label], not selected, 2 of 3". This gives the erroneous impression that there are only 3 options in the dropdown, when there might be many more, and is confusing to the user. Instead, the correct position and full length of options list should be announced (e.g. when focus is in options 3 of a list of 8 options, it should be announced as "[option label], not selected, 3 of 8")
How to Reproduce Bug
Open a page where the Select component is present. Have a screen reader on and navigate to Select component by pressing tab. Open dropdown. Depending on the screen reader you're using the announcement might differ a little, but in general it announces a list of 2 or 3 items.
Technical description of the issue
The problem can be seen in OptionList.tsx, line 274-276. I don't know for what reason it is implemented like this, but the [role="listbox"] element should contain all options, and not just the current item and the adjacent ones.
Proposed solution
Render all the options inside the listbox element. This way the length of the list and position of the element will be announced correctly.
I've already created a PR for this, where the rendering is optional by passing the prop renderFullOptionList={true} to the Select component, but I don't see a good reason why this wouldn't be the default and only way it renders
Open for suggestions or ways to achieve the desired result in other ways.
Thanks!
Contributor guide
No contributing guide indexed for this repository
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 by reading OptionList.tsx around lines 274-276, where the listbox renders the current and adjacent options. Compare that behavior with the proposed full-list rendering in PR 805. Done means screen readers announce each option's correct position and the full options-list length.
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
- Clearly specified
- Newbie friendliness
- 25/100