Description

relates to elastic/kibana#214563

When navigating EuiDataGrid with screen readers, there is duplicate output for the column header related to a focused cell. For a HTML grid (or table) pattern it's expected that the column header is read with the cell to provide context within the grid. (e.g. observe the behavior for this example)

Currently each cell of EuiDataGrid also has an additional custom screenreader-only text applied that adds the same context which leads to the cell being read + custom header context + default header context. (code)
When the default header is read, it will read the header cell content. That means that it includes any perceivable elements, not only the header cell name text. For datagrid this can mean the actions button.
We might want to check to conditionally hide the actions button from the accessibility tree if the header cell is not focused to reduce the verbosity for body cells.

Additionally there seems to be an issue with the applied row index. When focussing a cell in row 2 it reads "row 3" and also "row 4" for the header content.

How to reproduce

• open EuiDataGrid (e.g. storybook) and navigate the grid in a screen reader (Windows/NVDA or Windows/JAWS)
  • use arrow keys to navigate cells
  • navigate to any body cell
  • observe the output having 3 types of content: cell, cell custom header context, default header context
  • observe different row index being announced for the custom header context of the cell and the default header context