Use alternate means to animate-in hidden component content

[geotrev]

Issue:

Right now, accordions (and surely future components) are assigned a static max-height value in combination with transition to animate hidden content into view. This isn't compatible with text zoom and isn't accessible.

While this works, it is not manageable long-term as the max-height uses ems, which is reliant on the developer's configured $global-font-size variable to choose the correct font size for the container.

What's more, even if the font size is correct, text and other content will wrap as text zoom increases beyond 200%.

Solution:

Control state using a utility describing if the current action is animating or not. If the content is hidden, it should have display: none;. If showing, display: block. Between those states, we should animate using max-height.

It may also be more ideal to create a JS-defined animation duration (remove the need from CSS entirely) and use a synchronous delay with a promise to allow content to expand/collapse. Once the content is expanded, set max-height: auto to allow fluid vertical expansion with text zoom.