From c6ec332aa5fa0d4fe11e324b67293465800c8ee0 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Mon, 19 May 2025 23:31:10 +0000 Subject: [PATCH 1/3] fix(material/sidenav): removes -1 tabindex from sidenav Updates Angular Components SideNav component so that when the mode is not equalt to side the tabIndex value is -1. Otherwise provide a null value. 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..26814b4dcb85 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', + 'tabIndex': '(mode !== "side") ? "-1" : null', }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, From 4b5161ca11bc9a8980ac7086723c16e617f03e82 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Tue, 20 May 2025 00:10:19 +0000 Subject: [PATCH 2/3] refactor(material/sidenav): updates syntax Updates previous fix to use proper syntax to calculate which mode that the sidenav is set to. --- src/material/sidenav/drawer.ts | 2 +- src/material/sidenav/sidenav.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/material/sidenav/drawer.ts b/src/material/sidenav/drawer.ts index 26814b4dcb85..d85026f6b846 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': '(mode !== "side") ? "-1" : null', + '[attr.tabIndex]': '(mode !== "side") ? "-1" : null', }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, diff --git a/src/material/sidenav/sidenav.ts b/src/material/sidenav/sidenav.ts index 0dbfe6b6ada4..3ecaeeaa7f89 100644 --- a/src/material/sidenav/sidenav.ts +++ b/src/material/sidenav/sidenav.ts @@ -47,7 +47,7 @@ export class MatSidenavContent extends MatDrawerContent {} templateUrl: 'drawer.html', host: { 'class': 'mat-drawer mat-sidenav', - 'tabIndex': '-1', + '[attr.tabIndex]': '(mode !== "side") ? "-1" : null', // must prevent the browser from aligning text based on value '[attr.align]': 'null', '[class.mat-drawer-end]': 'position === "end"', From 13d3e2150c5d0d00cf187505f94143bab0f45670 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Tue, 20 May 2025 16:00:42 +0000 Subject: [PATCH 3/3] refactor(material/sidenav): adds comments to explain reason for change Updates previous changes to add the reasoning and reference for the removal of the -1 for side mode sidenavs. --- src/material/sidenav/drawer.ts | 2 ++ src/material/sidenav/sidenav.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/material/sidenav/drawer.ts b/src/material/sidenav/drawer.ts index d85026f6b846..b5e19e496896 100644 --- a/src/material/sidenav/drawer.ts +++ b/src/material/sidenav/drawer.ts @@ -165,6 +165,8 @@ 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', + // The sidenav container should not be focused on when used in side mode. See b/286459024 for + // reference. Updates tabIndex of drawer/container to default to null if in side mode. '[attr.tabIndex]': '(mode !== "side") ? "-1" : null', }, changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/material/sidenav/sidenav.ts b/src/material/sidenav/sidenav.ts index 3ecaeeaa7f89..2c9cc1a94736 100644 --- a/src/material/sidenav/sidenav.ts +++ b/src/material/sidenav/sidenav.ts @@ -47,6 +47,8 @@ export class MatSidenavContent extends MatDrawerContent {} templateUrl: 'drawer.html', host: { 'class': 'mat-drawer mat-sidenav', + // The sidenav container should not be focused on when used in side mode. See b/286459024 for + // reference. Updates tabIndex of drawer/container to default to null if in side mode. '[attr.tabIndex]': '(mode !== "side") ? "-1" : null', // must prevent the browser from aligning text based on value '[attr.align]': 'null',