Change date picker cells to buttons

[wnvko]

matDatePicker days, months and years was represented via divs. This did not allow to tab between them and the screen readers did not communicate them as actionable. Change them to buttons solves both these issues.

closes #16356

[mmalerba]

I think we actually do not want each cell to act as a tab stop. We have intentionally set it up so that the calendar body is a tab stop and you then move between the cells using the arrow keys. I believe the issue you linked is more about what the screen-reader reads when you arrow to a cell.

I think we probably want to use plain <button> elements (not mat-button) and explicitly set the tabindex=-1. Another approach would be to just add role=button to the existing element. @jelbourn do you have a preference for which approach we use here?

[jelbourn]

Definitely not mat-button. If role="button" works well in screen-readers, I would go with that. Also agreed that they should not be tab stops.

[jelbourn]

LGTM

[ngbot]

I see that you just added the pr: merge ready label, but the following checks are still failing:
     status "ci/circleci: tests_browserstack" is failing

If you want your PR to be merged, it has to pass all the CI checks.

If you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help.

[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.}