bug(sidenav/drawer/focustrap): over/push mode do not remove tabindex="0" when drawer closed #29545
Closed
1 task done
Labels
Accessibility
This issue is related to accessibility (a11y)
area: material/sidenav
P2
The issue is important to a large percentage of users, with a workaround
Is this a regression?
The previous version in which this bug was not present was
15
Description
When using mat-sidenav or mat-drawer with mode over or push (and might need backdrop=true) there is a div element:
<div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div>
which always has tabindex="0" added to it but should get it only when the sidenav/drawer is opened.
As a result tabbing through the page is confusing.
Reproduction
StackBlitz link: https://stackblitz.com/edit/e4bsuu?file=package.json
StackBlitz was forked from the second example here: SideNav Examples
Steps to reproduce:
Expected Behavior
tabindex="0" is only added when the sidenav/drawer is opened.
Actual Behavior
tabindex="0" is always there and makes tabbing through the page confusing.
Environment
Angular: 16.1.1
CDK/Material: 16.2.0
Browser(s): Chrome
Operating System (e.g. Windows, macOS, Ubuntu): Windows
The text was updated successfully, but these errors were encountered: