Data Views: Standardize reduced motion handling using media queries #68422
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Hi @t-hamano, I have implemented reduced motion handling using media queries for the data view. Please look at it at your convenience. Thank you! |
| transition: padding ease-out 0.1s; | ||
| container-type: inline-size; | ||
| @include reduce-motion("transition"); | ||
|
|
||
| @media not (prefers-reduced-motion) { | ||
| transition: padding ease-out 0.1s; | ||
| } | ||
|
|
||
| container-type: inline-size; |
There was a problem hiding this comment.
Nit: Can you format it like this:
.dataviews-view-grid {
margin-bottom: auto;
grid-template-rows: max-content;
padding: 0 $grid-unit-60 $grid-unit-30;
container-type: inline-size;
@media not (prefers-reduced-motion) {
transition: padding ease-out 0.1s;
}
t-hamano
added
[Type] Code Quality
|
Hi @t-hamano, I have made the requested changes and also updated PR branch with the latest changes from trunk. Please have a look at it at your convenience. Thank You! |
Part of: #68282
What?
Refactors animation and transition styles to use media not (prefers-reduced-motion) for improved accessibility, ensuring a better experience for users who prefer reduced motion.
Why?
It addresses instances where animations and transitions were not optimized for Data Views for individuals with reduced motion settings, ensuring a smoother and more inclusive user experience.
How?
This PR updates the outdated reduce-motion mixin implementation and resolves previously missed instances by adopting the new approach defined in the parent issue.
Screencast
2024-12-31_12-24-22.mp4