From a1c632962817682d98349b144676a884ec2b3cd6 Mon Sep 17 00:00:00 2001 From: Denis Bowen Date: Tue, 29 Apr 2025 17:34:59 +0000 Subject: [PATCH 1/2] fix(material/sidenav): fix tabindex issue on side mode remove tabindex=-1 from mat-drawer when in mode="side" so mobile screen readers like TalkBack does not focus on the container fixes b/286459024 --- src/material/sidenav/drawer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/material/sidenav/drawer.ts b/src/material/sidenav/drawer.ts index 784d26902af6..51d3f7e01f11 100644 --- a/src/material/sidenav/drawer.ts +++ b/src/material/sidenav/drawer.ts @@ -165,7 +165,7 @@ export class MatDrawerContent extends CdkScrollable implements AfterContentInit // this was also done by the animations module which some internal tests seem to depend on. // Simulate it by toggling the `hidden` attribute instead. '[style.visibility]': '(!_container && !opened) ? "hidden" : null', - 'tabIndex': '-1', + '[attr.tabindex]': 'mode === "side" ? null : "-1"', }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, From 51c1075b797fba212ebd5fcec051684970d0083a Mon Sep 17 00:00:00 2001 From: Denis Bowen Date: Mon, 5 May 2025 16:57:09 +0000 Subject: [PATCH 2/2] fix(material/sidenav): redo logic changed logic to where anytime the drawer is closed or when in mode side the tabindex is cleared fixes b/286459024 --- src/material/sidenav/drawer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/material/sidenav/drawer.ts b/src/material/sidenav/drawer.ts index 51d3f7e01f11..2c78fa235bfa 100644 --- a/src/material/sidenav/drawer.ts +++ b/src/material/sidenav/drawer.ts @@ -157,6 +157,7 @@ export class MatDrawerContent extends CdkScrollable implements AfterContentInit 'class': 'mat-drawer', // must prevent the browser from aligning text based on value '[attr.align]': 'null', + '[attr.tabindex]': '(!opened || mode === "side") ? null : -1', '[class.mat-drawer-end]': 'position === "end"', '[class.mat-drawer-over]': 'mode === "over"', '[class.mat-drawer-push]': 'mode === "push"', @@ -165,7 +166,6 @@ export class MatDrawerContent extends CdkScrollable implements AfterContentInit // this was also done by the animations module which some internal tests seem to depend on. // Simulate it by toggling the `hidden` attribute instead. '[style.visibility]': '(!_container && !opened) ? "hidden" : null', - '[attr.tabindex]': 'mode === "side" ? null : "-1"', }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None,