bug(datepicker): <table> element inside of the datepicker should read out column labels for elements

[toastking]

Reproduction

Use StackBlitz to reproduce your issue:

• Components: https://stackblitz.com/edit/mat-datepicker-issue?file=src/app/example-component.html

Steps to reproduce:

1. Turn on screen reader
2. Use keyboard navigation to select a day in a month on the date picker

Expected Behavior

What behavior were you expecting to see?

The screen reader should read out the column header (which is the day of the week) in addition to the label for the element.

Actual Behavior

What behavior did you actually see?

The screen reader reads out the date, but not the day of the week.

This is due to the table roles I believe, the outer table has a role of "presentation" but the inner tbody element has a role of "grid". The data grid role expects to be a table, so it looks for items with the role of "columnheader".

Environment

• Angular: 10.1.1
• CDK/Material: 10.2.1
• Browser(s): 87.0.4280.88 (Official Build) (x86_64)
• Operating System (e.g. Windows, macOS, Ubuntu): Mac OS 10.15.7

[crisbeto]

I tried adding role="columnheader", but it didn't make much of a difference on NVDA. We could use aria-describedby or format the aria-label in a way that includes the week day.

[jelbourn]

@crisbeto I did some early looking at this- our current structure is actually wrong, I have an in-progress PR to fix it.

[annieyw]

@jelbourn

[annieyw]

Double checked - this probably has to be done through the aria-label or aria-describedby