From 3e2e8ae02608fc3be20ebc73868104e4cb98d9f8 Mon Sep 17 00:00:00 2001
From: Zach Arend <zachzach@google.com>
Date: Fri, 4 Mar 2022 22:14:15 +0000
Subject: [PATCH] fix(material/datepicker): use cdk-visually-hidden on calendar
 header

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 | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/material/datepicker/month-view.html b/src/material/datepicker/month-view.html
index 3ccafd6d2e94..d002f925afbc 100644
--- a/src/material/datepicker/month-view.html
+++ b/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>