eui icon indicating copy to clipboard operation
eui copied to clipboard

[EuiDataGrid][AXE-CORE]: Certain ARIA roles must contain particular children

Open 1Copenut opened this issue 3 years ago • 0 comments

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

  1. Navigate to https://elastic.github.io/eui/#/tabular-content/data-grid-schema-columns
  2. Click the fullscreen button on the first data grid
  3. Click Columns then click Hide all
  4. Run an axe scan using your DevTools axe browser plugin
  5. Verify there's 1 critical violation

1Copenut avatar Dec 07 '22 23:12 1Copenut