Skip to content

Commit

Permalink
fix(material/sidenav): disable focus trap while closed (#29548)
Browse files Browse the repository at this point in the history
Completely disables the sidenav's focus trap while it's closed so users can't tab to the anchors.

Fixes #29545.
  • Loading branch information
crisbeto committed Aug 7, 2024
1 parent d22a24d commit 626164b
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 1 deletion.
23 changes: 23 additions & 0 deletions src/material/sidenav/drawer.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -710,6 +710,29 @@ describe('MatDrawer', () => {
.withContext('Expected focus trap anchors to be enabled in over mode.')
.toBe(true);
}));

it('should disable the focus trap while closed', fakeAsync(() => {
testComponent.mode = 'over';
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
flush();

const anchors = Array.from<HTMLElement>(
fixture.nativeElement.querySelectorAll('.cdk-focus-trap-anchor'),
);
expect(anchors.map(anchor => anchor.getAttribute('tabindex'))).toEqual([null, null]);

drawer.open();
fixture.detectChanges();
flush();
expect(anchors.map(anchor => anchor.getAttribute('tabindex'))).toEqual(['0', '0']);

drawer.close();
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
flush();
expect(anchors.map(anchor => anchor.getAttribute('tabindex'))).toEqual([null, null]);
}));
});

it('should mark the drawer content as scrollable', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/material/sidenav/drawer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -612,7 +612,7 @@ export class MatDrawer implements AfterViewInit, AfterContentChecked, OnDestroy
if (this._focusTrap) {
// Trap focus only if the backdrop is enabled. Otherwise, allow end user to interact with the
// sidenav content.
this._focusTrap.enabled = !!this._container?.hasBackdrop;
this._focusTrap.enabled = !!this._container?.hasBackdrop && this.opened;
}
}

Expand Down

0 comments on commit 626164b

Please sign in to comment.