fix(material/datepicker): remove abbr from day of week header (angula…

…r#24106)

Removes the `abbr` tag that is nested inside the cells of the day of the
week header. This is to fix angular#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 angular#23477

src/material/datepicker/calendar.scss

@@ -125,6 +125,3 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
   }
 }
 
-.mat-calendar-abbr {
-  text-decoration: none;
-}

src/material/datepicker/month-view.html

@@ -1,11 +1,8 @@
 <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>
+        {{day.narrow}}
       </th>
     </tr>
     <tr><th aria-hidden="true" class="mat-calendar-table-header-divider" colspan="7"></th></tr>