Components: Standardize reduced motion handling using media queries #68421
Conversation
|
Hey @t-hamano, This package includes several components. Would it be better to raise a new PR for the remaining components, or should I add them to this PR? Components currently in PR: Remaining components: |
|
@SainathPoojary Thanks for working on this issue.
It will be easy to test this PR because almost all components are published in Storybook, so I personally think it's okay to include all components in this PR. |
t-hamano
added
[Type] Code Quality
|
Got it, I agree! I’ll include the remaining components in this PR. |
|
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. |
|
Hey @t-hamano, I have standardized the transition and animation for the Component package and attached a video demonstrating the tests for each component. Please take a look when you have a moment. Thank you! |
There was a problem hiding this comment.
Thanks for the PR! I've tested all components on Storybook and everything appears to work as before.
In order for this PR to be shippable, could you confirm the following?
- Rebase the PR. This should pass all E2E tests (See Site Editor: fix "Quick Edit Mode" E2E tests #68484).
- Update the CHANGELOG. Add a
Internalsection under theUnreleasedsection and add this PR as an item in it.
@WordPress/gutenberg-components If you have any feedback on this PR, please let us know 🙏
Note: The CI error reported in the comment (Storybook build error) does not occur in this PR.
Presumably the error only occurs when surrounded by a breakpoint mixin like below, but there are no media queries surrounded by a breakpoint mixin in this PR:
.selector {
@include break-medium {
@media not (prefers-reduced-motion) {
}
}
}| @media not (prefers-reduced-motion) { | ||
| transition: 100ms transform ease; | ||
| } | ||
|
|
||
| will-change: transform; |
There was a problem hiding this comment.
I think we could move the will-change inside the media query.
| @media not (prefers-reduced-motion) { | ||
| transition: transform 0.1s ease-in; | ||
| } | ||
|
|
||
| will-change: transform; |
There was a problem hiding this comment.
| @media not (prefers-reduced-motion) { | |
| transition: transform 0.1s ease-in; | |
| } | |
| will-change: transform; | |
| @media not (prefers-reduced-motion) { | |
| transition: transform 0.1s ease-in; | |
| will-change: transform; | |
| } |
| animation: components-button__appear-animation 0.1s ease; | ||
| animation-fill-mode: forwards; | ||
| @include reduce-motion("animation"); | ||
| @media not (prefers-reduced-motion) { | ||
| animation: components-button__appear-animation 0.1s ease; | ||
| animation-fill-mode: forwards; | ||
| } |
There was a problem hiding this comment.
Do you know what this animation is intended to do? As far as I've tested, the outline animation when I focus on a button doesn't work.
Maybe we can improve or fix this in a follow-up.
Part of: #68282
What?
Refactors animation and transition styles to use
@media not (prefers-reduced-motion)ensuring better accessibility for users who prefer reduced motion.Why?
Currently, many parts of the codebase do not consider users’ motion preferences, which may not be suitable for those with reduced motion settings. This PR addresses and resolves that issue.
Screenshots or screencast
Button:
Transition:
2024-12-31.11-44-38.mp4
Animation
2024-12-31.11-55-39.mp4
checkbox-control:
Transition:
2024-12-31.12-34-35.mp4
circular-option-picker:
Transition:
2024-12-31.14-14-36.mp4
form-toggle:
Transition:
2024-12-31.14-42-02.mp4
form-token-field:
Transition:
2024-12-31.14-51-53.mp4
panel:
Transition:
2024-12-31.15-02-18.mp4
placeholder:
Transition:
2024-12-31.16-36-46.mp4
resizable-box:
Transition:
2025-01-02.13-28-56.mp4
Animation:
2025-01-02.13-48-27.mp4
tab-panel:
Transition:
2025-01-02.14-14-06.mp4
drop-zone:
Transition:
2025-01-02.14-29-09.mp4
animate
Animation:
2025-01-03.11-35-25.mp4
modal
Animation:
2025-01-03.13-06-51.mp4
toolbar
Animation:
2025-01-03.13-54-29.mp4