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

…ngular#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".

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>