fix(material/sidenav): prevent focus from entering hidden sidenav if child element has a visibility

This is a similar fix that we've made for other components. Usually we set `visibility: hidden` on the sidenav which is enough to prevent the user from tabbing into it, however one of the children could override it with `visibility: visible`. These changes add an extra `display: none` on top which will prevent such issues. This has come up on AIO recently angular/angular#44990.

Author: crisbeto

src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.spec.ts

@@ -304,7 +304,7 @@ describe('OverlayOutsideClickDispatcher', () => {
   });
 
   it(
-    'should not throw an error when when closing out related components via the ' +
+    'should not throw an error when closing out related components via the ' +
       'outsidePointerEvents emitter on background click',
     fakeAsync(() => {
       const firstOverlayRef = overlay.create();

src/material-experimental/mdc-tabs/tab-body.scss

@@ -37,7 +37,7 @@
   // This is a fallback that completely hides the content when the element becomes hidden.
   // Note that we can't do this in the animation definition, because the style gets recomputed too
   // late, breaking the animation because Angular didn't have time to figure out the target height.
-  // This can also be achieved with JS, but it has issues when when starting an animation before
+  // This can also be achieved with JS, but it has issues when starting an animation before
   // the previous one has finished.
   &[style*='visibility: hidden'] {
     display: none;

src/material/sidenav/drawer.scss

@@ -150,6 +150,17 @@ $drawer-over-drawer-z-index: 4;
       transform: translate3d(-100%, 0, 0);
     }
   }
+
+  // Usually the `visibility: hidden` added by the animation is enough to prevent focus from
+  // entering the hidden drawer content, but children with their own `visibility` can override it.
+  // This is a fallback that completely hides the content when the element becomes hidden.
+  // Note that we can't do this in the animation definition, because the style gets recomputed too
+  // late, breaking the animation because Angular didn't have time to figure out the target
+  // transform. This can also be achieved with JS, but it has issues when starting an
+  // animation before the previous one has finished.
+  &[style*='visibility: hidden'] {
+    display: none;
+  }
 }
 
 // Note that this div isn't strictly necessary on all browsers, however we need it in

src/material/tabs/tab-body.scss

@@ -11,7 +11,7 @@
   // This is a fallback that completely hides the content when the element becomes hidden.
   // Note that we can't do this in the animation definition, because the style gets recomputed too
   // late, breaking the animation because Angular didn't have time to figure out the target height.
-  // This can also be achieved with JS, but it has issues when when starting an animation before
+  // This can also be achieved with JS, but it has issues when starting an animation before
   // the previous one has finished.
   &[style*='visibility: hidden'] {
     display: none;