Accessibility issues with the Select component

[GrigorM]

What problem does this feature solve?

There are a few problems with accessibility of the Select component.

1. the option list [role="listbox"] is added in the DOM after user interacts with the component. This triggers an error for accessibility assessment tools. I know you've indicated this in the documentation ("Select only create a11y auxiliary node when operating on."), but it would be best to have an optional prop to allow to render the list from the start
2. using a screen reader and going through the options, they are always declared as "option 1 of 2" or "options 2 of 3", because inside the [role="listbox"] node there is only the current option and the adjacent ones. This is confusing to screen reader users because they don't get an idea of how long the list is

What does the proposed API look like?

1. Add optional prop to prerender the options list. Something like <Select forceRender ... /> to get the option list in the DOM without interacting with it.
2. No particulat api to fix this, as I don't see a reason why you would render only three items inside the listbox when you can render all of them. Just populate the [role='listbox'] with all the options.

[github-actions]

You may look for issues:

1. 61% About Transfer component performance issues #9703
2. 56% Select selector "search" optimization #38258
3. 55% Accessibility #37581

_{🤖 By issues-similarity-analysis}

[zombieJ]

For first part, we may do not provide forceRender since it's only to meet the a11y check tool but not really affect screen reader.
But for virtual list part, I think we can give option aria back to options when virtual is disabled.

[GrigorM]

Hey, thanks for answering.

For point 1: I don't see why not add a forceRender prop, when you already use it in Modal, Collapse and Tabs for the same reason: allow render of content from the start instead of lazy rendering after clicking.

For point 2: not sure i understand it right, but you mean adding role="listbox" to the List component? You would also need to add role="option" to all its children, and remove the [role="listbox"] element that is above it. I think the issue is here: https://github.com/react-component/select/blob/master/src/OptionList.tsx#L273 Why render only 3 items, and not all?

Thanks again!

[zombieJ]

1. forceRender in Drawer or Modal is used for the content which should trigger by mount event like it do some ajax work even not show in the screen.
2. Yes. That's what I mean to move all the aria in the list when virtual is disabled. For 3 items its basic arrow operation to fill the screen read operation range.

[EnixCoda]

@zombieJ Hi, it is also possible to fix the 2 for virtual lists. Please check out these aria attributes

https://w3c.github.io/aria/#aria-setsize
https://w3c.github.io/aria/#aria-posinset