Slow down spinners when prefers-reduced-motion: reduce

[ffoodd]

Very simple enhancement to slow down spinners when reduced motion are requested.
Somehow relates to #30081 — deeper thinking:

• pausing the animation could be misunderstood as failing to load content;
• impossible to know how long the animation would be, no way to determine if we're above some WCAG threshold for animations durations and cycles.

So this PR basically just ensure to slow down animation, thus prevents flashing colors (most probably with growing spinners, but hey, who knows).

As usual, feel free to discard this if it's over-engineered in any way.

Preview: https://deploy-preview-31882--twbs-bootstrap.netlify.app/docs/5.0/components/spinners/

[mdo]

Love this!

[XhmikosR]

I'd like to hear @patrickhlauke's take on this :)

[patrickhlauke]

my take is: sure, why not :)

(and to expand, there really isn't any hard actual definition of motion that always causes problems - some user groups will feel dizzy/triggered by obvious large parallax-style animations, but it's debatable if a small contained little animation is also bad for them. WCAG itself doesn't define any threshold, and it only counts as a potential failure if it's as a result of interaction - hovering, scrolling, etc https://www.w3.org/TR/WCAG22/#animation-from-interactions )

[XhmikosR]

I'm all for a11y, but I'm afraid this will cause more issues similar to "My animations are not working".

Just thinking out loud here. :)

[ffoodd]

@XhmikosR That's why I only slow it down instead of dropping it :D ← BTW, this is what we currently do for transitions, dropping it all the way instead of slowing them down (which I consider more debatable).

[XhmikosR]

I'd say we definitely need a callout mentioning this behavior and the reasons behind it then :)

[patrickhlauke]

yes, callout in the same vein as the ones we already have pointing to the accessibility section about this

[ffoodd]

Added our prefers-reduced-motion callout in spinners page, and mentionned slowing down alongside disabling in our accessibility page. Seems the best approach to me, but I may be wrong. @patrickhlauke, may I have your opinion?

[XhmikosR]

Crap, forgot we should mention this in the migration page. @ffoodd see if you can tackle this later please :)

[thany]

If people are really suffering from smallish animations, reducing their speed isn't going to help them. They need animations to stop completely. Instead of a loading animation, a static hourglass is good.

Firefox does this as well instead of the loading icon on a tab:
https://www.mozilla.org/en-US/firefox/80.0/releasenotes/

[patrickhlauke]

no, it's not necessarily so clear cut and binary - and indeed, it varies for each user. users generally aren't affected by everything that animated, but specific types of animations that can be distracting (for users with cognitive and attention issues) or can trigger users with vestibular disorders (large motion, parallax effects, scroll-bound effects) or epylepsy (fast changes in contrast / flickering / strobing, movements of strong patterns) etc.

long story short, slowing small animations down is a valid approach.

[thany]

@patrickhlauke If people indicate they suffer from motion, you have to assume the worst condition. That's the only way to alleviate the problem for everyone who suffers from motion on their screens.

The term "prefers-reduced-motion" must not be taken literally.