Remove prefers-reduced-motion file

[Antonio-Laguna]

Is your enhancement related to a problem? Please describe.

I think this file should probably be removed from the scaffold:

/*
 * Resources on prefers-reduced-motion:
 * https://webkit.org/blog-files/prefers-reduced-motion/prm.htm
 * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
 */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.001s !important;
		transition-duration: 0.001s !important;
	}
}

I think this is using a very drastic approach and with very high specificity to just nuke animations which doesn't translate well with accessibility. The only concern with animations should be Vestibular disorders related to motion sickness. However, animations can be great too to combat forms of cognitive disabilities when used to break down complicated concepts or communicate relationships with seemingly unrelated objects. Here's a good article about researched benefits of animations in general.

A much slower animation that adds movement could be a valid replacement or even sorting to fade in / fade out without moving.

See 10up/Engineering-Best-Practices#385 for a supporting explanation in our Engineering Best Practices.

I'm more than happy to open a PR but I'd rather discuss this as an issue.

Designs

No response

Describe alternatives you've considered

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Firestorm980]

@Antonio-Laguna I've been thinking about this one a bit since I saw it show up in my feed. I think all your points are valid. We should be thinking more about our animations / transitions than having a blanket thing to just address every scenario. The !important adds an extra barrier as well.

The issue I have with this is I get the feeling it was originally added specifically because we tend to not think about animations / transitions in general, much less making sure they have appropriate prefers-reduced-motion media query support. Having it in the best practice documentation is a good start, but if we're not always actively thinking about it, I think we do run the risk of it getting missed.

So I end up being a little torn. Is it better to have this because most of the time it isn't thought about (even though it should be) so that we at least have something to fall back on (even if it isn't particularly great), or do we remove it because we should be doing something better with our animations / transitions but run the risk of missing it entirely (hence causing a bad UX for people with accessibility needs)? I'm not sure. I'm curious what other people think of that.