Components: Standardize reduced motion handling using media queries #68421

SainathPoojary · 2024-12-31T04:22:31Z

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

…ries

… queries

SainathPoojary · 2024-12-31T11:19:40Z

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 · 2025-01-02T04:21:37Z

@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 · 2025-01-02T08:08:47Z

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

…eries

github-actions · 2025-01-03T11:52:54Z

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 <sainathpoojary@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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

SainathPoojary · 2025-01-03T15:13:22Z

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!

t-hamano

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 Internal section under the Unreleased section 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) {
		}
	}
}

packages/components/src/circular-option-picker/style.scss

packages/components/src/resizable-box/style.scss

packages/components/src/toolbar/toolbar/style.scss

…ation - ResizableBox: Optimized transform. - CircularOptionPicker: Optimized transform.

SainathPoojary · 2025-01-06T08:57:58Z

Hey @t-hamano,

I have implemented all the requested changes and also updated the code with the trunk, Please have a look at your convenience.

Thank you!

t-hamano

LGTM! All components appear to be correctly standardized.

Before shipping this PR, can you check the following points?

Move the changelog entry to the correct place. It needs to be in the Unreleased section:

## Unreleased

### Internal

-   `Components`: Standardize reduced motion handling using media queries ([#68421](https://github.com/WordPress/gutenberg/pull/68421)).

## 29.1.0 (2025-01-02)

Rebase this PR so that All CIs pass

SainathPoojary · 2025-01-07T09:46:08Z

Hey @t-hamano,

I have moved the changelog entry to the correct place now. Previously, I merged trunk into my PR, and I believe all the CI checks are now passing. Would you like me do it again?

Thank you!

t-hamano

Unfortunately, after testing this PR again, it appears that Storybook is no longer able to build. This is the same issue reported here.

I don't know the exact reason yet, but it might be a good idea to merge the Storybook build's CI (#68466) first while we investigate the cause.

t-hamano · 2025-01-07T10:21:23Z

I was wrong. After running npm install on another old branch, I didn't run npm install after switching to this branch 😅

In this PR, The StoryBook build is indeed successful. Just to be sure, I tried rebasing this PR with the trunk branch, and it worked just as well.

…ry/interactivity-lazy-hydration * 'trunk' of https://github.com/WordPress/gutenberg: (143 commits) Update: Bundle upload media. (#68522) Add: Media field changing ui to Dataviews and content preview field to posts and pages (#67278) Bump the react-native group with 2 updates (#68095) Check Storybook build on CI for PRs (#68466) Bump the github-actions group across 1 directory with 2 updates (#68436) Classic theme preview: remove admin-bar class name (#68519) Remove geriux as code owner (#68523) Post Featured Image: Adds control to clear the the overlay color (#68525) Components: Standardize reduced motion handling using media queries (#68421) Upgrade Playwright to v1.49 (#68504) Document Outline: Use block client ID as unique 'key' (#68502) Storybook: Add UnitControl story (#67346) Details: Add allowedBlocks and TemplateLock attributes (#68489) Post Comment Link: Show Border Control By Default (#68506) Query Total: Show Border Controls By Default (#68507) RSS: Added Colour support (#66419) Refactor: Separate input form styles to a dedicated stylesheet (#68501) Code quality: Fix typos (#67304) Page List: Added color support (#66430) Fix flaky DataViews list arraow nav e2e tests (#68503) ...

SainathPoojary added 8 commits December 31, 2024 09:49

Button: Standardize reduced motion handling using media queries

a45c67a

Button: Standardize animation reduced motion handling using media que…

72773cc

…ries

CheckboxControl: Standardize reduced motion handling using media queries

3872568

CircularOptionPicker: Standardize reduced motion handling using media…

8d46aed

… queries

FormToggle: Standardize reduced motion handling using media queries

386c259

FormTokenField: Standardize reduced motion handling using media queries

2c421b0

Panel: Standardize reduced motion handling using media queries

7105494

Placeholder: Standardize reduced motion handling using media queries

c863a53

t-hamano added [Type] Code Quality Issues or PRs that relate to code quality [Package] Components /packages/components labels Jan 2, 2025

SainathPoojary added 6 commits January 2, 2025 13:50

ResizableBox: Standardize reduced motion handling using media queries

f9a5c9b

TabPanel: Standardize reduced motion handling using media queries

bdb3f8d

DropZoneComponent: Standardize reduced motion handling using media qu…

90804a2

…eries

Animate: Standardize reduced motion handling using media queries

147e9bb

Modal: Standardize reduced motion handling using media queries

7ea0752

Toolbar: Standardize reduced motion handling using media queries

fb9f4ee

SainathPoojary marked this pull request as ready for review January 3, 2025 11:52

SainathPoojary requested a review from ajitbohra as a code owner January 3, 2025 11:52

Animate: Fix stuck animation for slide-in animation

3ab4762

t-hamano reviewed Jan 5, 2025

View reviewed changes

packages/components/src/circular-option-picker/style.scss Outdated Show resolved Hide resolved

packages/components/src/resizable-box/style.scss Outdated Show resolved Hide resolved

packages/components/src/toolbar/toolbar/style.scss Show resolved Hide resolved

SainathPoojary added 3 commits January 6, 2025 12:35

Components: Move will-change inside media query for transform optimiz…

8b7c52e

…ation - ResizableBox: Optimized transform. - CircularOptionPicker: Optimized transform.

Components: Update CHANGELOG for reduced motion standardization

bae80ef

Merge branch 'trunk' into update/components-reduce-motion-media-queries

86cf355

SainathPoojary requested a review from t-hamano January 6, 2025 09:32

t-hamano approved these changes Jan 7, 2025

View reviewed changes

Components: Move CHANGELOG entry to Unreleased section

e2c44b0

t-hamano self-requested a review January 7, 2025 09:57

t-hamano requested changes Jan 7, 2025

View reviewed changes

t-hamano self-requested a review January 7, 2025 10:22

t-hamano approved these changes Jan 7, 2025

View reviewed changes

t-hamano merged commit 900862e into WordPress:trunk Jan 7, 2025
66 checks passed

github-actions bot added this to the Gutenberg 20.1 milestone Jan 7, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Components: Standardize reduced motion handling using media queries #68421

Components: Standardize reduced motion handling using media queries #68421

SainathPoojary commented Dec 31, 2024 •

edited

Loading

SainathPoojary commented Dec 31, 2024 •

edited

Loading

t-hamano commented Jan 2, 2025

SainathPoojary commented Jan 2, 2025

github-actions bot commented Jan 3, 2025

SainathPoojary commented Jan 3, 2025

t-hamano left a comment •

edited

Loading

SainathPoojary commented Jan 6, 2025

t-hamano left a comment

SainathPoojary commented Jan 7, 2025

t-hamano left a comment

t-hamano commented Jan 7, 2025 •

edited

Loading

Components: Standardize reduced motion handling using media queries #68421

Components: Standardize reduced motion handling using media queries #68421

Conversation

SainathPoojary commented Dec 31, 2024 • edited Loading

What?

Why?

Screenshots or screencast

Button:

checkbox-control:

circular-option-picker:

form-toggle:

form-token-field:

panel:

placeholder:

resizable-box:

tab-panel:

drop-zone:

animate

modal

toolbar

SainathPoojary commented Dec 31, 2024 • edited Loading

t-hamano commented Jan 2, 2025

SainathPoojary commented Jan 2, 2025

github-actions bot commented Jan 3, 2025

SainathPoojary commented Jan 3, 2025

t-hamano left a comment • edited Loading

Choose a reason for hiding this comment

SainathPoojary commented Jan 6, 2025

t-hamano left a comment

Choose a reason for hiding this comment

SainathPoojary commented Jan 7, 2025

t-hamano left a comment

Choose a reason for hiding this comment

t-hamano commented Jan 7, 2025 • edited Loading

SainathPoojary commented Dec 31, 2024 •

edited

Loading

SainathPoojary commented Dec 31, 2024 •

edited

Loading

t-hamano left a comment •

edited

Loading

t-hamano commented Jan 7, 2025 •

edited

Loading