fix(material/sidenav): removes -1 tabindex from sidenav (#31155)

* 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

* refactor(material/sidenav): updates syntax

Updates previous fix to use proper syntax to calculate which
mode that the sidenav is set to.

* 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.

(cherry picked from commit 08a3c04)

Author: essjay05

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,

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"',