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

… while closed

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,17 @@
   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.
+  // 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 when starting an animation before
+  // the previous one has finished.
+  &[style*='visibility: hidden'] {
+    display: none;
+  }
 }
 
 .mat-expansion-panel-body {