Repository navigation
[accessibility] OptionList shows incorrect count during keyboard navigation. #707
Description
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
- Navigate to https://rc-select.react-component.vercel.app/?path=/story/rc-select--optionlabelprop
- Tab (or click) to input, to show options
- 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)
Activity
briannhinton commentedon May 4, 2022
Have you come across any solution? @rynodivino
rynodivino commentedon Jul 25, 2022
Hi @mrbrianhinton, unfortunately no
Tims101 commentedon Nov 4, 2025
It is possible to pass
aria-setsizeandaria-posinsetinto the elements, so even if rc-component renders only 3 items, the screen reader will read the correct number of elements.nrps9909 commentedon Aug 26, 2026
This has been fixed by #1226 and released in
@rc-component/select@1.11.0. CurrentOptionList.tsxsuppliesaria-setsizeandaria-posinseton 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 commentedon Aug 27, 2026
Close by #1226