Opened 3 years ago
Closed 3 years ago
#54174 closed enhancement (fixed)
Twenty Twenty-One: @media (prefers-reduced-motion) in sass/07-utilities/a11y.scss breaks some plugins
Reported by: | gregoiresailland | Owned by: | peterwilsoncc |
---|---|---|---|
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 )
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)
Change History (12)
#1
@
3 years ago
- Component changed from Themes to Bundled Theme
- Description modified (diff)
- Version changed from trunk to 5.6
#2
@
3 years 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)') { //console.log(sheet.cssRules[i]); sheet.deleteRule (i); } //else{console.log(sheet.cssRules[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); } } }
This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.
3 years ago
#4
@
3 years 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.
#5
@
3 years 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.
3 years ago
#7
@
3 years 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).
#8
@
3 years ago
- Keywords needs-testing added; needs-refresh removed
The patch contains the SCSS and compiled stylesheets (no map files or unrelated IE11 stylesheet improvements).
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