bug(Datepicker): accessibility screen reader arrow key movement not in sync visually on calendar

[robwloch]

Is this a regression?

• [x] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

12

Description

When using a keyboard while running a screen reader such as NVDA or JAWS, the highlighted day doesn't change visually like it used to in v12 and below. JAWS seems to compensate by putting a green square but in NVDA the cursor doesn't move visually. Logically, focus does move as screen reader user can hear where they've moved to.

Reproduction

Steps to reproduce:

1. launch a screen reader such as JAWS or NVDA
2. go to http://material.angular.io and navigate to the Datepicker component
3. tab to the "Basic datepicker" field's calendar icon and hit ENTER to launch it
4. use keyboard arrow keys to move around and notice if focus moves around visually
5. change Angular Material version at top right of screen to an older version and repeat steps 3 and 4 to see the difference, if any

Expected Behavior

Should see little circle moving from day to day

Actual Behavior

No movement of little circle

Environment

• Angular:
• CDK/Material: 13 plus
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[amysorto]

I can reproduce following the steps mentioned above with NVDA (JAWS works as intended for me) on Chrome while on Windows.

[Bdan13]

Hi,

Regarding JAWS, when we tested with it, it seemed to have a built in focus visualizer (light green color) if the component doesn't have its own focus working. I also wanted to mention that when the user is navigating with the keyboard, the reader doesn't indicate to the user which row they are on like previous versions but it does mention the column.

Extra comment: We also wanted to mention that there are many issues for users using a screen reader with multiple components after version 12 of Angular.

Thank you!

[robwloch]

Just some additional information regarding this issue while using NVDA v2021.3.5 with Angular Material v13 plus. We got it working well with the round focus indicator showing up if we toggled forms mode using INSERT SPACEBAR right after launching the calendar. So, perhaps forms mode switching is a factor.

[michalslime]

Is there any progress on that? It's really bad that 4 versions till now the issue is still there

[zarend]

Hello folks,

Thank you for reporting accessibility issues. We need more information. I'm not sure that this is really an issue, or if there is an accessibility requirement that is not being meet. This may be just how NVDA works.

When Screen Reader is active, pressing arrow keys might not work the same way because the Screen Reader may be receiving those keystrokes and handling it itself. In other works, NVDA will do the NVDA keyboard shortcuts for arrow keys instead of the Datepicker keyboard shortcuts.

The previous version in which this bug was not present was 12 Extra comment: We also wanted to mention that there are many issues for users using a screen reader with multiple components after version 12 of Angular.

I'm concerned to hear that you're noticing a significant regression from version 12 to 13. Please file issue reports for other components if they are not working for you. I'm not aware of any major changes, and we have been making accessibility improvements to our components. I don't know anything off the top of my head that has changed from 12 to 13. Have you switched from using the legacy components to the newer, MDC-based components?

The calendar is a table, so you can you NVDA's table specific shortcuts to navigate.

I would expect it to be easier to navigate in forms mode, since each of the cells in the calendar are interactive.

Most screen readers also have a way to pass through a keystroke, so that the keystroke will do the same behavior as if the assistive technology is not active.

We often see issue reports about quirks or misunderstood behavior of screen readers and other assistive technology. We prioritize issues that have a criteria or requirement to back them up (WCAG) or are most impactful to end users.

Are your end users having issues? Do you have an accessibility requirement, such as WCAG?

Best Regards,

Zach

[zarend]

Hello folks,

Closing as "not planned". No accessibility requirement or criteria (such as WCAG).

For support, I suggest reaching out on support channels such as Stackoverflow. We can give limited support through this issue tracker.

Calendar UI implements ARIA grid pattern with native buttons. Some Assistive Technology may have different behavior than others.

IIRC issues can get locked after a period of time. If you would like to follow-up on this issue with more information, I suggest starting a discussion.

Best Regards,

Zach