fix(material/datepicker): use cdk-visually-hidden on calendar header (#…

…24523)

Use cdk-visually-hidden to announce the days of the week on the calendar header in screenreaders. Previously, this was done with an `aria-label` on the `th` element, but NVDA does not read aria-labels on table elements and well as some other static content.

Fix NVDA incorrectly announcing the days of the week as "M", "T",
etc. instead of "Monday".

(cherry picked from commit 14f5b6e)

src/material/datepicker/month-view.html

@@ -1,8 +1,9 @@
 <table class="mat-calendar-table" role="grid">
   <thead class="mat-calendar-table-header">
     <tr>
-      <th scope="col" *ngFor="let day of _weekdays" [attr.aria-label]="day.long">
-        {{day.narrow}}
+      <th scope="col" *ngFor="let day of _weekdays">
+        <span class="cdk-visually-hidden">{{day.long}}</span>
+        <span aria-hidden="true">{{day.narrow}}</span>
       </th>
     </tr>
     <tr><th aria-hidden="true" class="mat-calendar-table-header-divider" colspan="7"></th></tr>