fix(material/datepicker): change calendar cells to buttons

[zarend]

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

[zarend]

Here's the first approach I tried, which is not working: #24099

[jelbourn]

This is unfortunately invalid HTML- a <tr> element cannot directly contain a <div>.

We should be able to get something working with the <button> inside the gridcell- what did you run into with that approach?

[zarend]

To start, it broke many tests because they needed to select the button inside the .mat-calendar-body-cell instead of the .mat-calendar-body-cell itself. Rather than running into specific problems, it seemed more like there could be an easier way to do this.

Wrapping the button with a display: contents; makes things easier because then the rest of the controller code and the styles only need to target the button, and do not need to be aware of the gridcell.

I can also try doing something like this, which should be valid html

<td role="gridcell" style="display: contents;">
  <div role="button" tabindex="0" class="mat-calendar-body-cell" ...>
    ...
  </div>
</td>

[zarend]

I did run into styling problems by using the button tag instead of div role="button". But I would expect the styling to be fixable by adding more CSS rules.

[zarend]

Although this seems to work when I tested with VoiceOver screenreader, closing this because it's unfortunately invalid HTML. I'll try another way and open a new PR.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}