Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Block Editor]: A11y - Add and Update missing reduce-motion mixing #68417

Merged

Conversation

Mayank-Tripathi32
Copy link
Contributor

@Mayank-Tripathi32 Mayank-Tripathi32 commented Dec 30, 2024

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?

Currently, many parts of the codebase do not consider users' motion preferences, which may not be ideal for those with reduced motion settings. This PR addresses and fixes that issue.

How?

This PR updates the old reduce-motion mixin implementation and addresses missing cases to adopt the new approach outlined in the parent issue.

	@media not ( prefers-reduced-motion ) {
			transition: opacity 0.1s linear;
		}

Standard adopted from @wordpress/components

Testing Information

  1. Search for Each block in editor then check its implementations in block-library.
  2. Open up the implementation and test with preferred-reduce motion option.
  3. Ensure everything works as expected.
  4. Some components may be tested via storybook aswell.

Screencast

TEST.B.E.mp4

@Mamaduka Mamaduka added [Type] Task Issues or PRs that have been broken down into an individual action to take [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Block editor /packages/block-editor labels Jan 13, 2025
@Mayank-Tripathi32 Mayank-Tripathi32 force-pushed the try/fix-68282-block-editor branch from ebbbbad to b4270f1 Compare January 16, 2025 14:13
@Mayank-Tripathi32 Mayank-Tripathi32 marked this pull request as ready for review January 16, 2025 14:20
Copy link

github-actions bot commented Jan 16, 2025

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: Mayank-Tripathi32 <mayanktripathi32@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.

Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! I believe everything has been refactored appropriately.

Just to be sure, can you rebase this PR before merging it?

@Mayank-Tripathi32 Mayank-Tripathi32 force-pushed the try/fix-68282-block-editor branch from b4270f1 to ee4dde7 Compare January 31, 2025 08:37
@t-hamano t-hamano merged commit 8b837f7 into WordPress:trunk Jan 31, 2025
62 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.3 milestone Jan 31, 2025
@Mayank-Tripathi32 Mayank-Tripathi32 deleted the try/fix-68282-block-editor branch January 31, 2025 09:48
Kallyan01 pushed a commit to Kallyan01/gutenberg that referenced this pull request Feb 24, 2025
…ordPress#68417)

Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Block editor /packages/block-editor [Type] Task Issues or PRs that have been broken down into an individual action to take
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants