[accessibility] OptionList shows incorrect count during keyboard navigation.

[rynodivino]

Description

When using the keyboard to traverse an optionlist, the length of the list is always restricted to 3 or less. I think it's related to this:
https://github.com/react-component/select/blob/master/src/OptionList.tsx#L255-L257

The only thing rendered is the current active plus next and previous items. Nice way to keep things light for sure, but it would be nice if there is a way to convey the length of the options to the screenreader correctly.

I also noticed issues #473 and #474, but did not see any mention of this specific issue in either (unless i just missed the essence of those issues).

Screenshot

Steps to reproduce

1. Navigate to https://rc-select.react-component.vercel.app/?path=/story/rc-select--optionlabelprop
2. Tab (or click) to input, to show options
3. Use arrow keys to cycle through the list

Expected behavior

The screenreader should announce each option item's value, selected state, and position in the list (i.e. 9 not selected 9 of 9)

Actual behavior

The option's position in the list is always restricted to a count of 3 or less (i.e. 9 not selected 2 of 3)

[briannhinton]

Have you come across any solution? @rynodivino

[rynodivino]

Hi @mrbrianhinton, unfortunately no

[Tims101]

It is possible to pass aria-setsize and aria-posinset into the elements, so even if rc-component renders only 3 items, the screen reader will read the correct number of elements.

[nrps9909]

This has been fixed by #1226 and released in @rc-component/select@1.11.0. Current OptionList.tsx supplies aria-setsize and aria-posinset on the virtual accessibility options, including group-aware positions, so screen readers can announce the full option count even though only the active option and its neighbors are mounted in the hidden list. I verified the fix is present on current master at f9f0128.

[yoyo837]

Close by #1226