Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Options length is announced incorrectly by screen readers #852

Open
GrigorM opened this issue Oct 25, 2022 · 1 comment
Open

Bug: Options length is announced incorrectly by screen readers #852

GrigorM opened this issue Oct 25, 2022 · 1 comment

Comments

@GrigorM
Copy link

GrigorM commented Oct 25, 2022

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!

@GrigorM
Copy link
Author

GrigorM commented Nov 23, 2022

Does anyone maintain this project? Can I get an answer for this? I think it's a quite reasonable request, at least someone tell me if there's something wrong...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant