From 6f86baee50668a8726a737c4004c0123f3924e87 Mon Sep 17 00:00:00 2001
From: Zach Arend <zachzach@google.com>
Date: Tue, 14 Dec 2021 01:14:34 +0000
Subject: [PATCH] fix(material/datepicker): change calendar cells to buttons

Makes changes to the DOM structure of calendar cells. Previous, the DOM
structure looksed like this

Existing DOM structure of each calendar body cell

```
<td
 role="gridcell"
 aria-disabled="false"
 aria-current="date"
 aria-selected="true"
 <!-- ... -->
>
 <!-- additional details ommited -->
</>
```

Using the `gridcell` role allows screenreaders to use table specific
navigation and some screenreaders would announce that the cells are
interactible because of the presence of `aria-selected`. However, some
screenreaders did not announce the cells as interactable and treated it
the same as a cell in a static table (e.g. VoiceOver announces element
type incorrectly #23476).

This changes the DOM structure to use buttons
inside of a gridcell to make it more explicit that the table cells can
be interacted with and are not static content. The gridcell role is
still present to table navigation will continue to work, but the `td`
elements are now buttons. The gridcell wrapper is only for adding
information to the a11y tree and not used for visual purposes.

Updated DOM structure:

```
<div
  role="gridcell"
  style="display: contents;"
>
  <td
   role="button"
   aria-disabled="false"
   aria-current="date"
   aria-selected="true"
   <!-- ... -->
  >
   <!-- additional details ommited -->
  </>
<button>
```

I also tried another approach of keeping the `<td/>` as a
`gridcell`, and rendering a button inside of it. This turned out to be
much more complicated with getting the keyboard navigation and focusing
logic to work correctly. It also make writing the tests more complicated
because tests need to know if they should select the body cell or the
button nested inside of it. This approach also avoids interferring with
the styles.

Fixes #23476
---
 src/material/datepicker/calendar-body.html | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html
index a59bd39774d8..34e9ceaf64da 100644
--- a/src/material/datepicker/calendar-body.html
+++ b/src/material/datepicker/calendar-body.html
@@ -26,8 +26,10 @@
       [style.paddingBottom]="_cellPadding">
     {{_firstRowOffset >= labelMinRequiredCells ? label : ''}}
   </td>
-  <td *ngFor="let item of row; let colIndex = index"
-      role="gridcell"
+  <div role="gridcell" *ngFor="let item of row; let colIndex = index" style="display: contents;">
+  <!-- TODO(zarend): install prettier in vim and fix the code formatting -->
+  <td 
+      role="button"
       class="mat-calendar-body-cell"
       [ngClass]="item.cssClasses"
       [tabindex]="_isActiveCell(rowIndex, colIndex) ? 0 : -1"
@@ -62,4 +64,5 @@
       </div>
       <div class="mat-calendar-body-cell-preview"></div>
   </td>
+  </div>
 </tr>