diff --git a/src/material/sidenav/drawer.ts b/src/material/sidenav/drawer.ts
index 784d26902af6..b5e19e496896 100644
--- a/src/material/sidenav/drawer.ts
+++ b/src/material/sidenav/drawer.ts
@@ -165,7 +165,9 @@ 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',
+    // 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,
   encapsulation: ViewEncapsulation.None,
diff --git a/src/material/sidenav/sidenav.ts b/src/material/sidenav/sidenav.ts
index 0dbfe6b6ada4..2c9cc1a94736 100644
--- a/src/material/sidenav/sidenav.ts
+++ b/src/material/sidenav/sidenav.ts
@@ -47,7 +47,9 @@ export class MatSidenavContent extends MatDrawerContent {}
   templateUrl: 'drawer.html',
   host: {
     'class': 'mat-drawer mat-sidenav',
-    'tabIndex': '-1',
+    // 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',
     '[class.mat-drawer-end]': 'position === "end"',