From b15f33bb00ba3ff839c5ba5478c39556b88a24e1 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 8 Mar 2022 14:00:59 +0100 Subject: [PATCH] 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 | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/material/expansion/expansion-panel.scss b/src/material/expansion/expansion-panel.scss index 1229414320ed..9a007b875aeb 100644 --- a/src/material/expansion/expansion-panel.scss +++ b/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 {