Components: Standardize reduced motion handling using media queries

[SainathPoojary]

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

[SainathPoojary]

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:

button
checkbox-control
circular-option-picker
form-toggle
form-token-field
panel
placeholder

Remaining components:

resizable-box
tab-panel
animate
modal
toolbar
drop-zone

[t-hamano]

@SainathPoojary Thanks for working on this issue.

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?

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.

[SainathPoojary]

Got it, I agree! I’ll include the remaining components in this PR.

[github-actions]

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: SainathPoojary <[email protected]>
Co-authored-by: t-hamano <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[SainathPoojary]

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!