Closed geoffrich closed 2 years ago
I think the root issue is in WCSS:
By setting "transition: none", there is no transitionend
event to listen to.
https://github.com/AlaskaAirlines/auro-accordion/blob/5238379521902e587592fd1eb542fd33e138e985/src/auro-accordion.js#L162
I've seen other CSS resets that set a very small transition duration instead to get around this issue, e.g.
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
Unable to repro, can you include a video of what you see?
It only happens if you add content to the accordion after it's open. Here's a CodePen that repros the issue (GIF below). Clicking expand adds additional paragraphs -- if you have reduced motion on, the content is cut off because the height on the panel inside the shadow root was not removed.
@geoffrich thanks for the additional context. That makes sense.
Reopening because we need to update and release auro-accordion to fix the underlying issue. The core WCSS is imported into the component's shadow root.
:tada: This issue has been resolved in version 1.5.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
Describe the bug
When prefers-reduced-motion is enabled, the height added to the accordion panel is not removed after the transition completes.
This causes issues when there is dynamic content inside of the accordion. For example, one of our pages has form fields that are added/removed inside an accordion based on a radio button selection. When reduced-motion is enabled, any newly added fields are cut off since the accordion still has a height set.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The height does not persist when reduced-motion is enabled.
Desktop (please complete the following information):