Height not reset with 'prefers-reduced-motion' enabled

[geoffrich]

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:

1. Enable prefers-reduced-motion
2. Go to the accordion demo
3. Expand the accordion. Notice that height is not removed.

Expected behavior

The height does not persist when reduced-motion is enabled.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 1.4.0

[geoffrich]

I think the root issue is in WCSS:

https://github.com/AlaskaAirlines/WebCoreStyleSheets/blob/d61bb99026e44ff8415bf8fed3dd7b74eea9f4d9/src/_core.scss#L37-L40

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;
  }
}

Source

[blackfalcon]

Unable to repro, can you include a video of what you see?

[geoffrich]

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.

[blackfalcon]

@geoffrich thanks for the additional context. That makes sense.

[geoffrich]

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.

[AuroDesignSystem]

:tada: This issue has been resolved in version 1.5.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: