eui
eui copied to clipboard
[EuiDataGrid][AXE-CORE]: Certain ARIA roles must contain particular children
Description
While building Cypress a11y tests for the EuiDataGrid, I came across an axe violation when we hide all the columns. It's a bit of an edge case, but worth investigating.
The issue
Our data grid appears to retain the parent "row" when we hide all child data rows, but axe is looking for child ARIA that's not present. I'm not sure yet if the rows are just hidden visually, or if we can add styles like `{display: none;} to prevent this error.
<!-- This row remains -->
<div role="row" class="euiDataGridHeader" data-test-subj="dataGridHeader"></div>
To solve this problem, you need to...
Fix the following:
Required ARIA children role not present: cell, columnheader, gridcell, rowheader
Steps to recreate
- Navigate to https://elastic.github.io/eui/#/tabular-content/data-grid-schema-columns
- Click the
fullscreenbutton on the first data grid - Click
Columnsthen clickHide all - Run an axe scan using your DevTools axe browser plugin
- Verify there's 1 critical violation