[Feature Request]: Accessible component animations

[bdfranck]

Describe the solution you'd like

Let's add some subtle animations to our interactive components. Animations provide both aesthetic and functional benefits to users. They help users understand how the states of the components are changing.

But we should also respect a user's accessibility preferences. We can accommodate those with vestibular disorders by using the prefers-reduced-motion media query and hiding motion animations.

I created a proof-of-concept branch with the following changes:

• Add a chevron rotation animation to accordion and details
• Add a fade & slide in for popover
• Remove new & existing motion animations when user prefers reduced motion

Here's the popover animation at 10% speed:

Here's how an animated modal looks when I set "Reduce motion" to "Off"...

Here's how the same modal looks when I set "Reduce motion" to "On"...

Possible next steps

• Explore on how subtle or dramatic we want animations to be
• Make a general list of animation guidelines
• Explore re-usable keyframe animations to use on multiple components
• Research any additional accessibility implications for animations