Skip to content

Commit e791236

Browse files
authored
fix(material/datepicker): wrong day of week read out for dates in first row (#23388)
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.
1 parent e4b54aa commit e791236

File tree

1 file changed

+4
-5
lines changed

1 file changed

+4
-5
lines changed

src/material/datepicker/calendar-body.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,12 @@
1414
<!-- Create the first row separately so we can include a special spacer cell. -->
1515
<tr *ngFor="let row of rows; let rowIndex = index" role="row">
1616
<!--
17-
We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.
18-
The aspect ratio of the table cells is maintained by setting the top and bottom padding as a
19-
percentage of the width (a variant of the trick described here:
20-
https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).
17+
This cell is purely decorative, but we can't put `aria-hidden` or `role="presentation"` on it,
18+
because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the
19+
table cells is maintained by setting the top and bottom padding as a percentage of the width
20+
(a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).
2121
-->
2222
<td *ngIf="rowIndex === 0 && _firstRowOffset"
23-
aria-hidden="true"
2423
class="mat-calendar-body-label"
2524
[attr.colspan]="_firstRowOffset"
2625
[style.paddingTop]="_cellPadding"

0 commit comments

Comments
 (0)