react-virtualized
react-virtualized copied to clipboard
bvaughn
Accessibility: Role "grid" is used inappropriately in the simple "list" component
Bug Report
If an app uses the list component from react-virtualized, the ARIA markup is incorrect. There is a "grid" container, but no "row" children and "gridcell" grandchildren. Screen readers of all platforms get utterly confused, report a grid with 0 rows, and on Mac, VoiceOver even doesn't render any of the child components, making apps largely inaccessible.
What is the current behavior?
Inaccessible apps due to invalid markup. Grid containers end up with button children or such.
Examples: Signal-Desktop, DeltaChat, Facebook Messenger.
What is the expected behavior?
List should use a generic container role like "region" instead, since you don't know what children there could be. Normally, "listbox" would be appropriate, but that requires that the children be of role "option". Since unlike with grids, you don't populate list children with default roles, this cannot be guaranteed, so for best generic accessibility, "region" is probably the best role to use here.
Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?
| Browser | Several |
| OS | Mac, Win |
| React | Several |
| React DOM | Several |
| react-virtualized | Several |
Facing the same issue. This makes all list items inaccessible to the voiceover when using accessibilities keys like ctrl+option+ right/left arrow.
@bvaughn @TrySound Can we please merge this PR - https://github.com/bvaughn/react-virtualized/pull/1673 to fix current thread.
Two years down the line and this is still an issue? What’s the hold up here?
