CdkTable defaults to role="grid" when it should probably default to role="table"

Incorrect accessibility markup for A.M. tables

Based on These table examples

All examples uses the ARIA grid markup

• role="grid" on the container
• role="gridcell" on regular table cells

This is misleading at best and can cause major screen reader user issues at worst. The grid role is meant for a two-dimentional layout of interactive elements, such as a spreadsheet or a datepicker. It is not intended for use with static/normal tables, including sortable static tables (where clicking the column headers can sort by that column), not even for tables with one or two action buttons per row (e.g. “delete” or “more info”).

To fix, do one of 2 things:

Remove the ARIA markup

(all instnaces of the role attribute). The underlying HTML markup is correct table markup.

Replace grid roles with static table roles

• Replace role="grid" with role="table"
• Replace every instance of role="gridcell" with role="cell"

This would be sufficient. Other role attributes (columnheader, rowheader, row and rowgroup) are equally valid in a table and grid structure.

[jelbourn]

Yeah, the original intent of the cdk-table is that it is the fully interactive role="grid pattern. However, over time we’ve seen that people do often use it as a regular role="table". We should consider changing the default and making it easier to swap between the two.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}