WCAG flagging from Lighthouse

[dhruv4kubra]

Bug Report

When run the table against lighthouse for accessibility, it flags an issue in there

Issues: Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children. Elements failing <div class="ReactVirtualized__Grid__innerScrollContainer" role="rowgroup" style="width: auto; height: 550px; max-width: 561px; max-height: 550px; overflow:…">

Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children. <div aria-label="grid" class="ReactVirtualized__Grid ReactVirtualized__Table__Grid" role="rowgroup" tabindex="0" style="box-sizing: border-box; direction: ltr; position: relative; width: 561px; …">

What is the current behavior?

the rowgroup is inside rowgroup role for the grid, which is causing lighthouse to flag this issue. As per W3C a rowgroup can only have rows as its descendents.

What is the expected behavior?

React virtualized grid is not flagged by lighthouse.

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	Chrome, 89.0.4389.90
OS	Mac OS
React	16.13.1
React DOM	16.13.1
react-virtualized	9.22.3

[assdi54]

Bug Report

When run the table against lighthouse for accessibility, it flags an issue in there

Issues: Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children. Elements failing <div class="ReactVirtualized__Grid__innerScrollContainer" role="rowgroup" style="width: auto; height: 550px; max-width: 561px; max-height: 550px; overflow:…">

Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children. <div aria-label="grid" class="ReactVirtualized__Grid ReactVirtualized__Table__Grid" role="rowgroup" tabindex="0" style="box-sizing: border-box; direction: ltr; position: relative; width: 561px; …">

What is the current behavior?

the rowgroup is inside rowgroup role for the grid, which is causing lighthouse to flag this issue. As per W3C a rowgroup can only have rows as its descendents.

What is the expected behavior?

React virtualized grid is not flagged by lighthouse.

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 Chrome, 89.0.4389.90 OS Mac OS React 16.13.1 React DOM 16.13.1 react-virtualized 9.22.3

any update on this ?

[kansalanmol0609]

Facing same issue, can we control it via prop?

[32naman]

did we solve this?

[kDatner]

I found a solution!

<Table /> drills its props into its <Grid />, with grid rendering an "inner scroll component" that is the culprit of this issue. Meaning you can pass down a new role (like "presentation", that is the generic role of a div). Just make sure to also manually pass down a maxWidth of unset because react-virtualized has a css rule that targets div[role=rowgroup] that you need to restore

TL;DR:

<Table
  containerRole="presentation"
  containerStyle={{ maxWidth: "unset" }}
  {..theRestOfTheProps}
>
  {children}
</Table>

Thank god it was an easy fix. Too bad I had to go through the source files to divine it