[wp-trac] [WordPress Trac] #49723: Login failure shake should respect the prefers-reduced-motion media query

[WordPress Trac]

#49723: Login failure shake should respect the prefers-reduced-motion media query
----------------------------------------+---------------------------------
 Reporter:  johnbillion                 |       Owner:  (none)
     Type:  enhancement                 |      Status:  new
 Priority:  normal                      |   Milestone:  5.5
Component:  Login and Registration      |     Version:  5.3
 Severity:  normal                      |  Resolution:
 Keywords:  needs-patch good-first-bug  |     Focuses:  accessibility, css
----------------------------------------+---------------------------------

Comment (by sabernhardt):

 As this [https://web.dev/prefers-reduced-motion/#working-with-the-media-
 query 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 [https://developer.mozilla.org
 /en-US/docs/Web/CSS/@media/prefers-reduced-motion#Browser_compatibility
 browser support] before activating the animation, this can be cleaner than
 setting the animation and then removing it.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/49723#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform