Repository navigation
bug(DatePicker): keyboard navgiation breaks when a screen reader is used #33683
Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
When you open the date picker you can easily use the arrow keys to navigate between the days of the month.
But if you use a screen reader (tested with nvda and the integrated one from windows) the arrow keys won't work properly anymore.
The reason is because the screen reader switches to browse mode instead of focus mode and catches the keyboard events. If you switch manually to the focus mode (in nvda its the nvda key + space) it works again.
Reproduction
Just try it in one of the examples at the official site https://material.angular.dev/components/datepicker/examples
- without screen reader: keyboard navigation works
- with screen reader: keyboard navigation won't work - you have to switch manually to focus mode
Expected Behavior
I expect the keyboard navigation to work regardless if a screen reader is active or not. It should also not be needed to manually switch to focus mode
Actual Behavior
- without screen reader: keyboard navigation works
- with screen reader: keyboard navigation won't work - you have to switch manually to focus mode
Environment
- Angular: 22
- CDK/Material: 22
- Browser(s): Chrome, Firefox
- Operating System: Windows 11
Activity
crisbeto commentedon Aug 20, 2026
It works fine for me with VoiceOver. Maybe you entered browse mode?
mr-itsg commentedon Aug 20, 2026
That's the problem: As soon as I enter the calendar the screenreader switches to browse mode. I have to manually switch back to focus mode. This is not the expected behavior, is it?
I tested it on my Windows 11 computer in Chrome and Firefox, with nvda and the integrated screenreader from windows. Also asked a friend of mine who tested it on his computer (also Windows 11) with Chrome and nvda.
I noticed it first in an application of ours but the samed happened on the sample page of the official angular material site.
crisbeto commentedon Aug 20, 2026
It's definitely not expected, but it sounds odd. We don't do anything special aside from moving focus to the current/selected date. For what it's worth, we occasionally run accessibility audits on Material and I'm not aware of this coming up.
mr-itsg commentedon Aug 20, 2026
Did you try it on a Windows system? Tried it on a third computer now, same behavior.
mr-itsg commentedon Aug 20, 2026
For a test I edited the role of the div containing the mat-calendar component from role="dialog" to role="application". With this change the screenreader automatically switched to focus mode and the keyboard navigation worked properly.
But since I had to change the component in the node_modules folder for this, that not feasible as a practical work around.
rafalbesztak2 commentedon Oct 16, 2026
I bump this. I ran into this bug with the NVDA screen reader. When opening the datepicker with the button or alt+keydown, NVDA switches to browse mode, which causes arrow key presses to be intercepted by the AT. Having to switch back to focus mode every time the calendar opens is tedious. For comparison, the MUI component works well.