WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 3 months ago

#49723 closed enhancement (fixed)

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

Reported by: johnbillion Owned by: audrasjb
Milestone: 5.5 Priority: normal
Severity: normal Version: 5.3
Component: Login and Registration Keywords: good-first-bug has-patch commit
Focuses: accessibility, css Cc:

Description

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.

Attachments (1)

49723.diff (398 bytes) - added by eddystile 3 months ago.
remove shake animation in login screen

Download all attachments as: .zip

Change History (13)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 months ago

#2 @afercia
4 months ago

  • Milestone changed from Awaiting Review to 5.5

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

#3 @Nick_theGeek
4 months ago

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

#4 @sabernhardt
4 months ago

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.

#5 @afercia
4 months ago

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.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 months ago

#7 @afercia
4 months ago

  • Owner set to audrasjb
  • Status changed from new to assigned

#8 @audrasjb
4 months ago

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.

Last edited 4 months ago by audrasjb (previous) (diff)

@eddystile
3 months ago

remove shake animation in login screen

#9 @eddystile
3 months ago

  • Keywords has-patch added; needs-patch removed

My first patch in accompanied driving Ⓐ with @audrasjb

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 months ago

#11 @audrasjb
3 months ago

  • Keywords commit added

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

#12 @SergeyBiryukov
3 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.