Make WordPress Core

Opened 21 months ago

Last modified 21 months ago

#54852 new enhancement

Twenty Twenty: Consider less aggressive motion preference styles

Reported by: sabernhardt's profile sabernhardt Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-patch
Focuses: accessibility, css Cc:

Description

Twenty Twenty styles create animations and transitions but then disable all that animation for people who set the reduced motion preference in their browser/OS.

@media ( prefers-reduced-motion: reduce ) {

	* {
		animation-duration: 0s !important;
		transition-duration: 0s !important;
	}
}

The theme needs to continue honoring the preference, but it could define each of its animations within a (prefers-reduced-motion: no-preference) media query—and remove the 0s !important styles—instead. That way, the theme would be responsible for its own motion without disabling motion from other stylesheets (from plugins).

Related: #54174 (Twenty Twenty-One)

Change History (1)

#1 @parinpanjari
21 months ago

This feature is implemented as a media query, it can be accessed the same way we access any media query values in JS: using window.matchMedia.

function getPrefersReducedMotion() {

const QUERY = '(prefers-reduced-motion: no-preference)';
const mediaQueryList = window.matchMedia(QUERY);
const prefersReducedMotion = !mediaQueryList.matches;
return prefersReducedMotion;

}

Last edited 21 months ago by parinpanjari (previous) (diff)
Note: See TracTickets for help on using tickets.