Make WordPress Core

Opened 4 months ago

Last modified 4 days ago

#54174 new enhancement

Twenty Twenty-One: @media (prefers-reduced-motion) in sass/07-utilities/a11y.scss breaks some plugins

Reported by: gregoiresailland Owned by:
Milestone: 6.0 Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: ui, accessibility, css Cc:

Description (last modified by sabernhardt)

As a fix it could be good to register it as a separate script than in the main style.css
Like that it could be deregistered via wp_deregister_script or wp_dequeue_script function
I have for example a plugin (Gallery Lightbox Lite) that is not working with gutenberg gallery and Twenty Twenty-One when the OS or browser has the flag prefers-reduced-motion:reduced active.

Or do you have a solution in order to remove the

@media (prefers-reduced-motion) {
	* {
		transition-delay: 0s !important;
		transition-duration: 0s !important;

Some animations are vital to some blocks or plugins and it could be good to can disable this limitation in some child theme without having to recompile and replace all Twenty Twenty-One scss

Thank you for your support :)

Attachments (2)

54174.patch (168.8 KB) - added by sabernhardt 4 months ago.
54174.1.patch (10.6 KB) - added by sabernhardt 4 days ago.
switching social link transition to SVG instead of a element

Download all attachments as: .zip

Change History (10)

#1 @sabernhardt
4 months ago

  • Component changed from Themes to Bundled Theme
  • Description modified (diff)
  • Version changed from trunk to 5.6

Welcome and thanks for the report!

There are only 4 unique transition properties in the theme's compiled stylesheets. Instead of removing all transitions, these specific styles could be wrapped in
@media (prefers-reduced-motion: no-preference) { }

Google developers article

#2 @gregoiresailland
4 months ago

I found a way to disable it with javascript:

	var styleTag = document.getElementById("twenty-twenty-one-style-css");
	var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;

	if (sheet.cssRules) { // all browsers, except IE before version 9
		for (var i=0; i<sheet.cssRules.length; i++) {
			if (sheet.cssRules[i].conditionText === '(prefers-reduced-motion)') {
				sheet.deleteRule (i);
	else{  // Internet Explorer before version 9
		for (var i=0; i<sheet.rules.length; i++) {
			if (sheet.rules[i].conditionText === '(prefers-reduced-motion)') {
				// console.log(sheet.cssRules[i]);
				sheet.removeRule (i);
Last edited 4 months ago by sabernhardt (previous) (diff)

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

4 months ago

#4 @ryokuhi
4 months ago

Hello @gregoiresailland, and welcome again on Trac.
We discussed this ticket today during the weekly Accessibility Team's bug-scrub.
As the Twenty Twenty-One theme was built taking accessibility into great consideration, we're a bit reluctant to make changes to its accessibility features.
Still, there's maybe some space for possible improvements to the CSS rule.
We'd like to hear @poena's opinion on the topic, as she's been involved with the theme development since the beginning.

4 months ago

#5 @sabernhardt
4 months ago

  • Keywords has-patch 2nd-opinion added; needs-patch removed
  • Severity changed from critical to normal
  • Type changed from defect (bug) to enhancement

Plugins need to account for users' motion preferences, too, so this is not a bug.

However, Twenty Twenty-One could be less aggressive about the transition property. I uploaded a patch for consideration.

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

8 days ago

#7 @sabernhardt
8 days ago

  • Keywords needs-refresh added; dev-feedback 2nd-opinion removed
  • Milestone changed from Awaiting Review to 6.0

I'll refresh the patch, with the social link transition on the SVG (not the a element).

4 days ago

switching social link transition to SVG instead of a element

#8 @sabernhardt
4 days ago

  • Keywords needs-testing added; needs-refresh removed

The patch contains the SCSS and compiled stylesheets (no map files or unrelated IE11 stylesheet improvements).

Note: See TracTickets for help on using tickets.