Should the backgrounds addon respect prefers-reduced-motion?

[ahuth]

Describe the bug
The backgrounds addon sets a transition on the applied background, so that it fades in and out.

Should it take prefers-reduced-motion into account, and not transition if someone sets the related OS and browser settings?

To Reproduce
Steps to reproduce the behavior:

1. Configure a background for a story. For how to do that, see the backgrounds documentation.
2. Run storybook
3. For the story, select a background

Expected behavior

• If the user has configured their OS to reduce motion, the transition should not happen.
• If the user has not configured their OS to reduce motion, the transition should happen.

Screenshots

Additional context
We can already prevent the transition with some custom CSS:

@media (prefers-reduced-motion) {
  .sb-show-main {
    transition: none !important; /* !important needed to counter inline style */
  }
}

I'm wondering if we should build this in to the addon, though. I can put up a pull request to do so if it's what we want.

[shilman]

cc @yannbf

[yannbf]

Hey @ahuth thanks a lot for pointing this out!
I think it can make sense, although depending on the color transition, it feels like it gives more dizziness without the transition. However, I'm not the best person to say that.

@adagar care to share your opinion? You can see result without transitions in #13711

[adagar]

While I'm not overly familiar with prefers-reduced-motion my understanding is that it's largely applicable to movement, resizing, zooming, etc.

https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
"In contrast, animated effects like color fades, opacity changes and small changes in scale are unlikely to be problematic. If in doubt, it can’t hurt to add the effect in question to your 'to reduce' list to err on the side of caution."

And WCAG guidelines don't count color transitions as a "motion"
https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html

motion animation
addition of steps between conditions to create the illusion of movement or to give a sense of a smooth transition

For example, an element which moves into place or changes size while appearing is considered to be animated. An element which appears instantly without transitioning is not using animation. Motion animation does not include changes of color, blurring or opacity

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.16 containing PR #13711 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.