From 8f631fe5bb460de0ad5a78575e357064f05c61b0 Mon Sep 17 00:00:00 2001
From: Zach Arend <zachzach@google.com>
Date: Wed, 15 Dec 2021 22:59:08 +0000
Subject: [PATCH] fix(material/datepicker): remove abbr from day of week header

Removes the `abbr` tag that is nested inside the cells of the day of the
week header. This is to fix #23477 where VoiceOver reads day of week
three times: 'Sunday, Sunday, Sunday...'

I tested this change on VoiceOverAfter this change and sometimes it read
the day of week twice and sometimes it read it once. When navigating
from a day on the calendar to the header it reads: "row 1 of 7 Sunday
S". When navigating from Sunday to Monday, it reads "Monday Monday M
Column 2 of 7".

Tested on macos 12.0.1 (21A559) with chrome Version 96.0.4664.110 (Official Build) (x86_64).

I'll leave this as a draft until I can at least test it on other
screenreaders.

fixes #23477
---
 src/material/datepicker/month-view.html | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/material/datepicker/month-view.html b/src/material/datepicker/month-view.html
index 35deaf2339c2..89c650c974c6 100644
--- a/src/material/datepicker/month-view.html
+++ b/src/material/datepicker/month-view.html
@@ -1,11 +1,9 @@
 <table class="mat-calendar-table" role="grid">
   <thead class="mat-calendar-table-header">
     <tr>
-      <!-- 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>
+      <!-- TODO(zarend): setup prettier in vim -->
+      <th scope="col" *ngFor="let day of _weekdays" [attr.aria-label]="day.long" class="mat-calendar-abbr" role="text">
+        {{day.narrow}}
       </th>
     </tr>
     <tr><th aria-hidden="true" class="mat-calendar-table-header-divider" colspan="7"></th></tr>