datepicker: keyboard accessibility with Screen Readers regression in 8.2.3

[Dustman71]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/angular/yrrmarxbmay?file=src%2Fapp%2Fdatepicker-overview-example.ts

Steps to reproduce:

1. Open NVDA or JAWS
2. Open the calendar and try to navigate with the arrow keys to select the day

Expected Behavior

navigate with the arrow keys and select another day

Actual Behavior

Keyboard accessible does not work in Material Datepicker version 8.2.3, but in Material 7.3.7 it worked.

Environment

• Angular: 8.2.13
• CDK/Material: 8.2.3
• Browser(s): Google Chrome 78.0.3904.97
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[Splaktar]

This appears to be related to #17280.

PR #16402 added a role="button" in addition to the existing role="gridcell", so we've got two roles on the td, which is invalid.

PR #17297 is considering removing the role="gridcell" but there are concerns that this will also result in an invalid structure.

That said, I tested in VoiceOver on macOS Catalina and the behavior was generally consistent across 7.x, 8.x, and 9.x. Though it was easiest for me to interact by using the Command+Shift+Arrow keys within the calendar rather than just the Arrow keys.

I need to do some testing on ChromeVox and NVDA.

[Splaktar]

Testing on ChromeVox gives acceptable results on both 7.x and 8.x, but the behavior and visual focus indicators are better in 8.2.3.

Based on looking at the WAI-ARIA spec, it looks like we need a fairly significant change to align with the current recommendations. More details in #17297 (comment).

[Splaktar]

With NVDA, in 7.x using the up/down/right/left arrow keys work great for moving around dates on the calendar.

With 8.x and NVDA, you can use the up/down arrow keys only to go forward/back one day in the calendar and you can't see the currently 'focused' day (but it is voiced) and selection works. The right/left arrow keys don't work and give some confusing messages (reading one character or space at a time). In the WAI-ARIA datepicker dialog example, focus decoration works fine, but I have similar issues with the arrow keys in NVDA.

The behavior in NVDA has certainly regressed with 8.2.x.

[jelbourn]

I believe this was fixed in a past version of Angular when remove the double role definition on the cell.

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