bug(datepicker): Redundant announcement of header row cell values

[zarend]

Reproduction

Steps to reproduce:

1. Open the Datepicker Examples
2. Go to the "basic datepicker" demo
3. Activate "Open calendar" button
4. Focus on the header row
5. Linear navigate all the values of the header row

Expected Behavior

It should not announce the week name thrice

Actual Behavior

It is announcing the week name twice/thrice. For example, it is announcing as "Monday, Monday, Monday, group, column 2 of 7"

Environment

OS| Browser | Screen reader
ChromeOS | Google Chrome 91.0.4472.167 | ChromeVox
Windows 10 | Google Chrome 92.0.4515.131 | NVDA/JAWS
macOS Catalina | Google Chrome 92.0.4515.131 | VoiceOver
Windows 10 | Firefox 90.0.2 (64-bit) | NVDA

Additional Notes

This is copied from an internal bug report found during a11y testing.

[zarend]

from @jelbourn

This is likely due to a workaround employed to make ChromeVox and VoiceOver both happy. The HTML looks like this:

  <!-- For the day-of-the-week column header, we use an `<abbr>` element because VoiceOver
       ignores the `aria-label`. ChromeVox, however, does not read the full name
       for the `<abbr>`, so we still set `aria-label` on the header element. -->
  <th scope="col" *ngFor="let day of _weekdays" [attr.aria-label]="day.long">
    <abbr class="mat-calendar-abbr" [attr.title]="day.long">{{day.narrow}}</abbr>
  </th>

The duplicate announcement is probably coming from the combined aria-label on the th and the element inside.

One solution to try here would be something like

  <th scope="col" *ngFor="let day of _weekdays">
    <span class="cdk-visually-hidden">{{day.long}}</span>
    <span aria-hidden="true">{{day.narrow}}</span>
  </th>

[angular-automatic-lock-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.}