fix(material/expansion): able to tab into descendants with visibility while closed #24045
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
crisbeto
added
P3
google-cla
bot
added
the
cla: yes
|
LGTM |
andrewseguin
removed
the
cla: yes
crisbeto
force-pushed
the
expansion-panel-display
branch
from
d7afb2b to
5a19a24
Compare
|
I ended up reworking this a bit. The |
… 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.
crisbeto
force-pushed
the
expansion-panel-display
branch
from
5a19a24 to
b15f33b
Compare
andrewseguin
approved these changes
Mar 8, 2022
crisbeto
added a commit
that referenced
this pull request
Mar 8, 2022
… 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. (cherry picked from commit c12347c)
crapStone
pushed a commit
to Calciumdibromid/CaBr2
that referenced
this pull request
Mar 18, 2022
This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular/cdk](https://github.com/angular/components) | dependencies | patch | [`13.2.5` -> `13.2.6`](https://renovatebot.com/diffs/npm/@angular%2fcdk/13.2.5/13.2.6) | | [@angular/material](https://github.com/angular/components) | dependencies | patch | [`13.2.5` -> `13.2.6`](https://renovatebot.com/diffs/npm/@angular%2fmaterial/13.2.5/13.2.6) | --- ### Release Notes <details> <summary>angular/components</summary> ### [`v13.2.6`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#​1326-suede-spaghetti-2022-03-09) [Compare Source](angular/components@13.2.5...13.2.6) ##### cdk | Commit | Type | Description | | -- | -- | -- | | [39929a815d](angular/components@39929a8) | fix | **overlay:** backdrop timeouts not being cleared in some cases ([#​23972](angular/components#23972)) | | [2f2b0c7cf4](angular/components@2f2b0c7) | fix | **testing:** dispatch mouseover and mouseout events in UnitTestElement ([#​24490](angular/components#24490)) | | [edca54f2d0](angular/components@edca54f) | fix | **testing:** require at least one argument for locator functions ([#​23619](angular/components#23619)) | ##### material | Commit | Type | Description | | -- | -- | -- | | [c4993ac171](angular/components@c4993ac) | fix | **button:** avoid setting a tabindex on all link buttons ([#​22901](angular/components#22901)) | | [c47d30e0e5](angular/components@c47d30e) | fix | **dialog:** don't wait for animation before moving focus ([#​24121](angular/components#24121)) | | [70b8248568](angular/components@70b8248) | fix | **expansion:** able to tab into descendants with visibility while closed ([#​24045](angular/components#24045)) | | [d22d73ab8d](angular/components@d22d73a) | fix | **select:** disabled state out of sync when swapping form group with a disabled one ([#​17872](angular/components#17872)) | | [911d6b71d4](angular/components@911d6b7) | fix | **slide-toggle:** clear name from host node ([#​15505](angular/components#15505)) | | [4b5363d160](angular/components@4b5363d) | fix | **tooltip:** decouple removal logic from change detection ([#​19432](angular/components#19432)) | ##### material-experimental | Commit | Type | Description | | -- | -- | -- | | [8414646d79](angular/components@8414646) | fix | **mdc-card:** remove extra margin if header doesn't have an avatar ([#​19072](angular/components#19072)) | | [f66486dc5b](angular/components@f66486d) | fix | **mdc-slider:** fix a few null pointer exceptions ([#​23659](angular/components#23659)) | ##### multiple | Commit | Type | Description | | -- | -- | -- | | [6ee0089ce6](angular/components@6ee0089) | fix | don't block child component animations on open ([#​24529](angular/components#24529)) | #### Special Thanks Andrew Seguin, Jeri Peier, Kristiyan Kostadinov and Paul Gschwendtner <!-- CHANGELOG SPLIT MARKER --> </details> --- ### Configuration 📅 **Schedule**: At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, click this checkbox. --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate). Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1214 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>
forsti0506
pushed a commit
to forsti0506/components
that referenced
this pull request
Apr 3, 2022
… while closed (angular#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.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The expansion panel sets
visibility: hiddenwhile it's closed in order to prevent users from tabbing into the content. This breaks down if a child has its ownvisibility, because it overrides the one coming from the parent. We can't usedisplayin the animation definition, because it prevents the animations module from calculating the height when animating.These changes add some CSS that will set
display: noneonce the animation has settled.