Respect reduced-motion in the customizer #1608
Conversation
There was a problem hiding this comment.
This is working well as long as we reload the page after changing system settings 😅
I'm not sure how much of an issue it is, but if we load the Customizer with "Reduce motion" enabled and then disable it, but don't reload the Customizer, interacting with the sections makes them go partially off-screen:
When doing it the other way around (starting with "Reduce motion" off and then enabling it), everything looks fine but it's impossible to tab into each section with the keyboard.
| // Return if CSS transitions are not supported or if reduced motion is enabled. | ||
| if ( ! normalizedTransitionendEventName || isReducedMotion ) { | ||
| // Schedule the callback until the next tick to prevent focus loss. | ||
| _.defer( function () { |
There was a problem hiding this comment.
Where was the focus loss occurring?
There was a problem hiding this comment.
It should focus the "Back" button when expanding to a section. That is lost if we call the callback synchronously though.
|
@tellthemachines Good catch! I don't think it's too much of an issue but I pushed a fix anyway :). |
|
Committed via https://core.trac.wordpress.org/changeset/51677. |
Respect
prefers-reduced-motion: reducein the customizer.Kapture.2021-08-20.at.14.54.35.mp4
Test steps:
reduce motionin your OS settings (macOS for instance)reduce motiontooTrac ticket: https://core.trac.wordpress.org/ticket/53542
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.