bug(material/sidenav): [a11y] Sidenav with mode="over" doesn't trap screen reader virtual cursor #32805
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 the MatSideNav is open with mode="over", the main content (the one within mat-side-nav-content) is visually covered, but the screen reader can still access it. The focus moves correctly to the sidenav, but I can press down arrow multiple times to continue reading the page and the cursor "leaks" out of the sidenav.
The expected result is very similar to what the MatDialog does. I don't know all the details, but I believe it's related to setting aria-hidden="true" for all the elements within the mat-sidenav-content.
PS:
Thank you so much! Angular team rocks! I've always been afraid of developing webpages because I used to struggle a lot with all the JS and document.querySelector. Angular made everything to be much more comprehensive and fun!
Reproduction
StackBlitz link: here
Steps to reproduce
- Make a simple sidenav with
mode="over". - Run a screen reader and open the page.
- Make the sidenav to open.
- Use the screen reader reading commands (e. g. up and down arrows, ctrl+home, ctrl+end, insert+down)
Expected Behavior
the screen reader should not be able to reach the elements within mat-sidenav-content.
Actual Behavior
the screen reader continues reading as if the sidenav wasn't open at all.
Environment
- Angular: latest (although I think the bug's always been there)
- CDK/Material: latest (although I think the bug's always been there)
- Browser(s): Chrome, Safari (both latest)
- Operating System: Windows, iOS
- Screen reader: JAWS, VoiceOver