diff --git a/src/material/stepper/stepper-animations.ts b/src/material/stepper/stepper-animations.ts
index 71053cb9352c..930e8fbea7f6 100644
--- a/src/material/stepper/stepper-animations.ts
+++ b/src/material/stepper/stepper-animations.ts
@@ -25,7 +25,9 @@ export const matStepperAnimations: {
   /** Animation that transitions the step along the X axis in a horizontal stepper. */
   horizontalStepTransition: trigger('stepTransition', [
     state('previous', style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'})),
-    state('current', style({transform: 'none', visibility: 'visible'})),
+    // Transition to '', rather than `visible`, because visibility on a child element overrides
+    // the one from the parent, making this element focusable inside of a `hidden` element.
+    state('current', style({transform: 'none', visibility: ''})),
     state('next', style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'})),
     transition('* => *', animate('500ms cubic-bezier(0.35, 0, 0.25, 1)'))
   ]),
@@ -34,7 +36,9 @@ export const matStepperAnimations: {
   verticalStepTransition: trigger('stepTransition', [
     state('previous', style({height: '0px', visibility: 'hidden'})),
     state('next', style({height: '0px', visibility: 'hidden'})),
-    state('current', style({height: '*', visibility: 'visible'})),
+    // Transition to '', rather than `visible`, because visibility on a child element overrides
+    // the one from the parent, making this element focusable inside of a `hidden` element.
+    state('current', style({height: '*', visibility: ''})),
     transition('* <=> current', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
   ])
 };