mirror_php/wordpress
1
0
Fork 0
mirror of git://develop.git.wordpress.org/ synced 2025-03-24 05:49:49 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Customizer: A11y: Respect prefers-reduced-motion.

Browse Source 
Several significant animations in the customizer did not respect prefers reduced motion. Change CSS to wrap animations in `@media` queries to verify user preferences.

Props wildworks, sainathpoojary, abcd95, joedolson, audrasjb.
Fixes #62806.

git-svn-id: https://develop.svn.wordpress.org/trunk@59989 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe Dolson 2025-03-16 20:25:35 +00:00
parent d07d4fce8c
commit fd55ed4b7b
4 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/wp-admin/css/customize-controls.css
View File

@ -842,13 +842,18 @@ h3.customize-section-title {
color: #3c434a;
text-align: left;
cursor: pointer;
transition:
color .15s ease-in-out,
border-color .15s ease-in-out,
background .15s ease-in-out;
box-sizing: content-box;
}
@media (prefers-reduced-motion: no-preference) {
.customize-controls-close {
transition:
color .15s ease-in-out,
border-color .15s ease-in-out,
background .15s ease-in-out;
}
}
.customize-panel-back,
.customize-section-back {
display: block;

6
src/wp-admin/css/customize-nav-menus.css
View File

@ -720,8 +720,10 @@
opacity: 1;
}
#customize-preview {
transition: all 0.2s;
@media (prefers-reduced-motion: no-preference) {
#customize-preview {
transition: all 0.2s;
}
}
body.adding-menu-items #available-menu-items {

6
src/wp-admin/css/customize-widgets.css
View File

@ -261,8 +261,10 @@
color: #646970;
}
#customize-preview {
transition: all 0.2s;
@media (prefers-reduced-motion: no-preference) {
#customize-preview {
transition: all 0.2s;
}
}
body.adding-widget #available-widgets {

14
src/wp-admin/css/themes.css
View File

@ -1648,12 +1648,14 @@ body.full-overlay-active {
}
/* Animations */
.wp-full-overlay,
.wp-full-overlay-sidebar,
.wp-full-overlay .collapse-sidebar,
.wp-full-overlay-main {
transition-property: left, right, top, bottom, width, margin;
transition-duration: 0.2s;
@media (prefers-reduced-motion: no-preference) {
.wp-full-overlay,
.wp-full-overlay-sidebar,
.wp-full-overlay .collapse-sidebar,
.wp-full-overlay-main {
transition-property: left, right, top, bottom, width, margin;
transition-duration: 0.2s;
}
}
/* Device/preview size toggles */