fix(material/stepper): don't allow focus inside a hidden element (#21842

)

The CSS `visibility` allows for a child element to become visible, even though its parent is
hidden. This becomes a problem for an expanded stepper inside a collapsed sidenav,
because it allows the user to tab into the stepper.

These changes resolve the issue by transitioning to `visibility: ''` which allows it to be
inherited.

Fixes #21831.

(cherry picked from commit 6f99852)

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)'))
   ])
 };