Login failure shake should respect the prefers-reduced-motion media query

[johnbillion]

When a login failure occurs, the login form shakes (recently reimplemented in CSS in #48490). This shake should not occur when the user has opted to reduce motion, for example by selecting the "Reduce motion" option in macOS' preferences or unselecting "Show animations in Windows" in Windows' preferences.

The prefers-reduced-motion media query can be used to disable the animation in this case. See [46824] as an example of where this is used in TwentyTwenty.

[afercia]

This ticket was discussed during today's accessibility bug-scrub: Agreed it makes totally sense. Setting milestone to 5.5.

[Nick_theGeek]

I'd be willing to do a patch for this.

[sabernhardt]

As this ​Google developers article notes, using the no-preference value on the shake animation should make it occur only when the browser supports the prefers-reduced-motion media query and the user has not specified a desire to reduce motion.

@media (prefers-reduced-motion: no-preference) {
	.login form.shake {
		animation: shake 0.2s cubic-bezier(.19,.49,.38,.79) both;
		animation-iteration-count: 3;
		transform: translateX(0);
	}
}

In addition to checking the media query's ​browser support before activating the animation, this can be cleaner than setting the animation and then removing it.

[afercia]

Some coordination with what the block editor does would be nice. Gutenberg uses @media (prefers-reduced-motion: reduce) {} in a few places. I'd tend to think a consistent pattern should be used across the whole codebase.

[audrasjb]

So to summary, the idea is to wrap the CSS rule into a specific media query for users that reduced the use of motion/animation in their browser preferences.

@media (prefers-reduced-motion: reduce) {
	.login form.shake {
		animation: none;
		transform: none;
	}
}

For reference, see also Twenty Twenty’s CSS file for another implementation example.

[eddystile]

remove shake animation in login screen

[eddystile]

My first patch in accompanied driving Ⓐ with @audrasjb

[audrasjb]

Looks good to me. This is exactly what we used for Twenty Twenty.
Marking this for commit.

[SergeyBiryukov]

In 47813:

Accessibility: Login and Registration: Respect the prefers-reduced-motion media query for "shake" CSS animation on login failure.

This shake should not occur when the user has opted to reduce motion, for example by selecting the "Reduce motion" option in macOS' preferences or unselecting "Show animations in Windows" in Windows' preferences.

Follow-up to [47226].

Props eddystile, johnbillion, sabernhardt, afercia, audrasjb.
Fixes #49723.