[a11y] Grid cells are not associated with their proper column when read by SR - IgxGrid with column groups and IgxPivotGrid

[ddaribo]

Description

It appears that most screen readers (tested with NVDA, JAWS, Narrator) have an heuristic about the column of a cell element (in our case elements with role="gridcell") that matches the DOM rendered elements with role="columnheader" by index. Moreover, it would match these from any element with role="row", within the header rowgroup.

Ideally, each level of column headers should be rendered in a separate element with role="row" and the proper column header would be matched. However, the grid header groups are nested within each other and such a layout would require a major refactor.
Furthermore, testing proves that matching the aria-colindex attribute of the gridcell and the target columnheader is not sufficient and SRs still rely on matching DOM elements. Vritualization has to also be considered in the context of the grid.

• igniteui-angular version: any
• browser: any

Steps to reproduce

1. Open the Multi-column headers demo. Then test the Pivot grid demo here
2. Navigate the cells with a screen reader

Result

Observe the announced for the cell with text "Germany", for the "Country" column. Ignore the sort icons text, as it will be fixed by a pending PR:

Germany Country row 2 ContactName column 5

Here, Country, which is the proper column name comes from the aria-describedby attribute on the cell - ref.

However, screen readers seem to always announce the column header they match to this cell after. Moreover, Narrator disregards the aria-describedby, so an SR user will be confused. In any case, announcing two different column names is confusing.

What happens with the current layout, is that to the screen reader, the headers hierarchy appears as a flat sequence of column headers within a row, so it matches the cells to headers by index, i.e.:

ID, General Infromation, CompanyName, Personal Details, ContactName, ContactTitle, Address Infromation, Location, Country

so, for the Country cell of the first row, whose index is 4 (column 5, as the aria-announced column indexes are 1-based), the SR matches ContactName from the above rendered DOM headers, corresponding to the 4-th 0-based index.

For the pivot grid, observe the same, as the column headers are also grouped:

Expected result

Have the correct column header announced, prefreably once. That is, the aria-describedby might be redundant to repeat the column header, if the SR can match it properly.

Attachments

Attach a sample if available, and screenshots, if applicable.