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/dev-app/expansion/expansion-demo.html

@@ -8,10 +8,9 @@ <h1>Single Expansion Panel</h1>
     <mat-panel-title>Panel Title</mat-panel-title>
   </mat-expansion-panel-header>
 
-  <ng-template matExpansionPanelContent>
-    This is the content text that makes sense here.
-    <mat-checkbox>Trigger a ripple</mat-checkbox>
-  </ng-template>
+  This is the content text that makes sense here.
+  <mat-checkbox>Trigger a ripple</mat-checkbox>
+  <button  style="visibility: visible;">Hello</button>
 
   <mat-action-row>
     <button mat-button (click)="myPanel.expanded = false">CANCEL</button>

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 {