fix(material/expansion): able to tab into descendants with visibility…

… while closed (#24045)

The expansion panel sets `visibility: hidden` while it's closed in order to prevent users from tabbing into the content. This breaks down if a child has its own `visibility`, because it overrides the one coming from the parent. We can't use `display` in the animation definition, because it prevents the animations module from calculating the height when animating.

These changes add some CSS that will set `display: none` once the animation has settled.

src/material/expansion/expansion-panel.scss

@@ -48,6 +48,16 @@
   display: flex;
   flex-direction: column;
   overflow: visible;
+
+  // 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.
+  // In other components we set a `display: none` at the root to stop focus from reaching the
+  // elements, however we can't do that here, because the content can determine the width
+  // of an expansion panel. The most practical fallback is to use `!important` to override
+  // any custom visibility.
+  &[style*='visibility: hidden'] * {
+    visibility: hidden !important;
+  }
 }
 
 .mat-expansion-panel-body {