From 1a0c919d65c2d250cd3f3c8ac482983a440636ea Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 17 Aug 2021 17:30:44 +0200
Subject: [PATCH] fix(material/datepicker): wrong day of week read out for
 dates in first row

The first row of cells has a cell with the month label which also has a `colspan` and `aria-hidden`. It looks like hiding the cell causes screen readers to ignore the cell competely and consider the cells after it to be first. This results in the wrong day of the week being read out for each date.
---
 src/material/datepicker/calendar-body.html | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html
index f421c245ba6f..14a60fd862d2 100644
--- a/src/material/datepicker/calendar-body.html
+++ b/src/material/datepicker/calendar-body.html
@@ -14,13 +14,12 @@
 <!-- Create the first row separately so we can include a special spacer cell. -->
 <tr *ngFor="let row of rows; let rowIndex = index" role="row">
   <!--
-    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.
-    The aspect ratio of the table cells is maintained by setting the top and bottom padding as a
-    percentage of the width (a variant of the trick described here:
-    https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).
+    This cell is purely decorative, but we can't put `aria-hidden` or `role="presentation"` on it,
+    because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the
+    table cells is maintained by setting the top and bottom padding as a percentage of the width
+    (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).
   -->
   <td *ngIf="rowIndex === 0 && _firstRowOffset"
-      aria-hidden="true"
       class="mat-calendar-body-label"
       [attr.colspan]="_firstRowOffset"
       [style.paddingTop]="_cellPadding"