search

bvaughn / react-virtualized

React components for efficiently rendering large lists and tabular data
http://bvaughn.github.io/react-virtualized/
MIT License
26.1k stars 3.05k forks source link

MultiGrid accessibility error #1540

Open pavel-bublavy opened 4 years ago

pavel-bublavy commented 4 years ago

MultiGrid component accessibility audit fails with following error:

Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children.

Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions.

Failing Elements <div class="ReactVirtualized__Grid__innerScrollContainer" role="rowgroup" style="width: 504px; height: 32px; max-width: 504px; max-height: 32px; overflow: hidden; position: relative;">

div.ReactVirtualized__Grid__innerScrollContainer
div.ReactVirtualized__Grid__innerScrollContainer
div.ReactVirtualized__Grid__innerScrollContainer

The reason of the error is not fulfilling WAI-ARIA rules. Role "rowgroup" requires children of role "row", and role "row" requires children of role "columnheader", "rowheader", or "gridcell".

The roles for "columnheader", "rowheader", or "gridcell" can be assigned to cells in cellRenderer but there is currently no way to add element with role "row" which is necessary as aria context for those roles.

Possible solution to this problem should be wrapping grid cells on the same row in another element with role "row" in MultiGrid component implementation.

MihirGH commented 1 year ago

Hi @pavel-bublavy Did you find any workaround to fix this?