feat(react): respect prefers-reduced-motion with Accordion

[tbusillo]

closes: #828

Summary

• Adds utility for detecting whether a system has prefers-reduced-motion: reduce enabled.
• If it is prefers-reduced-motion is enabled, the <Accordion> animations/transitions are disabled.
• Unrelated , added a few basic properties to the prettier config in package.json. Was running into config issues/inconsistencies in things like trailing commas, parens, etc.

[github-actions]

Preview branch generated at https://expand-collapse-prefer-reduced-motion.d1gko6en628vir.amplifyapp.com

[scurker]

The bulk of the animation happens inside of ExpandCollapsePanel in the animateOpen/animateClose functions. I would think we would instead want to be sure our reduced motion handling code happens there instead of Accordion.

Additionally, I think you were close to the right idea of adding the reduce-motion media query in both spots, but we should be very specific with what we're targeting. For example:

@media (prefers-reduced-motion: reduce) {
  .ExpandCollapse__panel {
    animation: none !important;
  }
}

Targeting ExpandCollapseComponent I think is better because it's the component that's actually controlling the animation and is composed with the Accordion component. Also we can safely use !important here because we always want the animation of the section to be turned if there's more specific/cascading selectors.

[CharlesBelov]

@scurker : re: "I'm not sure we need prefers-reduced-motion here. Setting this value doesn't mean "no motion", but removing non-essential motion. I would argue that the slight motion that happens here (the rotation of caret and the highlight of the trigger) are still subtile enough where it isn't needed."

There is some confusion around prefers-reduced-motion. First, the name is a historical artifact of what Apple called it when it created the feature, "Reduce motion". Windows calls it "show animation in windows" and Android uses a similar all-or-nothing label. Second, there are at least a couple conditions which are addressed by this setting: vestibular motion disorders (the motion makes the viewer feel ill) and hypervigilance (the motion attracts the attention of the viewer out of proportion to its importance); further, even if the animation on your website or application is safe, past disruption from other sites' excessive animation can cause any un-requested animation to be triggering. Any of this can disrupt the end-user. This makes it difficult to determine a safe amount of animation which will serve everyone implementing this non-granular setting on their operating system. A choice of no animation is the safest.

That said, "the slight motion that happens here (the rotation of caret and the highlight of the trigger)" is probably sufficiently subtle.

@bobbyomari : re: "From a user experience perspective, the accordion animation can also be helpful for users to notice the change of content and what is occurring on the screen."

People for whom the accordion animation would be helpful would be unlikely to set prefers-reduce-motion to reduce. I set prefers-reduced-motion to reduce because the motion pretty much always distracts me, sometimes makes my eyes feel ill for up to half an hour afterwards, and I have been triggered by animation which would otherwise be safe for me because of past experiences with excessive animation.

[tbusillo]

Looks like was able to accomplish pretty much everything via the css media query and simplified everything as a result.

@CharlesBelov would you be willing/interested to take a look at the preview and let us know what you think? The two components likely relevant are the Accordion and the Expand Collapse Panel. We're looking to get this into an upcoming release, so any feedback you have would be greatly valued!

[scurker]

I created #1062 to make the UI immediately responsive, but this addresses the immediate accessible need.

[github-actions]

Preview branch generated at https://expand-collapse-prefer-reduced-motion.d1gko6en628vir.amplifyapp.com

[CharlesBelov]

@tbusillo Thank you for the fast follow up. I would be happy to take a look at the preview; however I am not knowledgeable about dealing with pull requests on github. When I go to those pages that you have linked, for example, https://expand-collapse-prefer-reduced-motion.d1gko6en628vir.amplifyapp.com/, I get a blank page, and Firefox's network inspector says "no requests".

[tbusillo]

@CharlesBelov Ah, it looks like the link(s) expired when the PR was merged. Here are some new ones!

Accordion: https://cauldron.dequelabs.com/components/Accordion

Expand Collapse Panel: https://cauldron.dequelabs.com/components/ExpandCollapsePanel

Thank you for being willing to take a look!

[CharlesBelov]

Yes, thank you! That is exactly what I expect to happen with prefers-reduced-motion enabled on my operating system.

[scurker]

@CharlesBelov This will likely land in the axe extension with the next update (which normally happens around every ~2 weeks) so keep a lookout for that release!