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.

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

@@ -31,4 +31,15 @@
   .mat-mdc-tab-group-dynamic-height & {
     overflow: hidden;
   }
+
+  // Usually the `visibility: hidden` added by the animation is enough to prevent focus from
+  // entering the collapsed 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 height.
+  // 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

@@ -5,4 +5,15 @@
   .mat-tab-group-dynamic-height & {
     overflow: hidden;
   }
+
+  // Usually the `visibility: hidden` added by the animation is enough to prevent focus from
+  // entering the collapsed 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 height.
+  // 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;
+  }
 }