[EuiDataGrid] a11y roles not valid (gridcell without row)

[flash1293]

Due to virtualization, there are no "row" elements in the data grid anymore.

As the individual cells have a gridcell role, this is causing automated a11y tests to fail: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_role

I'm not sure about the right solution:

• should we simply remove the gridcell role?
• should we wrap all of the cells in a single row element (even though it's not 100% correct)?
• Is it possible to introduce dummy elements for rows in the dom tree (AFAIK our virtualization lib doesn't allow this)

cc @myasonik @chandlerprall

[myasonik]

@chandlerprall how does EUI's automated testing not fail on the same thing?

[chandlerprall]

Datagrid pages are disabled in the axe check

[myasonik]

For EUI, I can't think of a workaround for getting around this requirement. A role=grid needs children with role=row.

For Kibana, at this point, the most practical solution is probably to ignore datagrid classes in the tests. @flash1293 I can help you set that up.

[j-m]

Looks like react-window is unlikely to fix this (bvaughn/react-window#217)

[myasonik]

Did some exploration on this:

• Need to convert react-window's use of Grid back to List (so that it can be a vertical List of rows, and each row would then have a horizontal List of cells) which breaks a few APIs which is annoying. You can get kind of close feeling pretty quickly but getting the last 10% working takes just as long.
• Would be a bigger effort but the API of react-virtual is actually loads better than react-window... And it supports variable and dynamic heights out of the box...