components
components copied to clipboard
bug(mat-sidenav): focus trap should be optional with mode over
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 Sidenav is open in over or push (not side) keyboard focus is trapped onto the sidenav. But the sidenav may just be a part of the page, not the whole thing. So the keyboard is stuck on the sidenav without an option to break it free (outside of toggling the sidenav closed).
I was told this is an a11y issue by someone at the OCR.
This seems similar to 21955 and 13132.
Reproduction
StackBlitz link: https://stackblitz.com/edit/kjwmhm
Steps to reproduce:
- Select
overorpush - Toggle Sidenav open
- Use
tabto change focus, noting it is trapped to the open Sidenav - Select
side - Use
tabto change focus, noting it is not trapped to the open Sidenav and now cycles through all the controls, including the stackblitz controls
My stackblitz is just an unchanged fork of "Sidenav with configurable mode" on the material website, https://material.angular.io/components/sidenav/overview#sidenav-mode
Expected Behavior
For an open sidenav in 'side' mode, focus should (optionally?) not be trapped.
Actual Behavior
The sidenav is trapping focus.
Environment
- Angular: at least 13.3, including 18.2
- Browser(s): at least Chrome, Edge, & Firefox