diff --git a/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.spec.ts b/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.spec.ts
index a10df92140a7..bbb6afe519ba 100644
--- a/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.spec.ts
+++ b/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();
diff --git a/src/material-experimental/mdc-tabs/tab-body.scss b/src/material-experimental/mdc-tabs/tab-body.scss
index 164ed84102fb..ea8aa849d6cf 100644
--- a/src/material-experimental/mdc-tabs/tab-body.scss
+++ b/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;
+  }
 }
diff --git a/src/material/sidenav/drawer.scss b/src/material/sidenav/drawer.scss
index 01ed6fcf94ed..fff1f95a98dd 100644
--- a/src/material/sidenav/drawer.scss
+++ b/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
diff --git a/src/material/tabs/tab-body.scss b/src/material/tabs/tab-body.scss
index a92aaf492e20..0bed41796ef9 100644
--- a/src/material/tabs/tab-body.scss
+++ b/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;
+  }
 }