Base styles: Improve the reduce-motion mixin

[afercia]

Description

Splitting this out from #55547

Ideally, the reduce-motion scss mixin should be able to reset any CSS transition / animation. However, this is not the case. Thdre are a few occurrences in the codebase where specific, ad-hoc, media query prefers-reduced-motion are in place because the mixin doesn't cover all the cases to properly reset a transition or animation.

Ideally, these specific ad-hoc media query should be avoided because they are redundant code, hard to maintain, and pronoe to bugs. A unique, centralized, mixin that works for all cases is certainly better.

The specific case in #55547 didn't allow to use the reduce-motion mixin because the animation for the 'saving' buttons state uses the CSS property animation-iteration-count with a value of infinite. This property is not reset by the reduce-motion mixin.

gutenberg/packages/base-styles/_mixins.scss

Lines 185 to 205 in 1ee154f

	@mixin reduce-motion($property: "") {
	@if $property == "transition" {
	@media (prefers-reduced-motion: reduce) {
	transition-duration: 0s;
	transition-delay: 0s;
	}
	} @else if $property == "animation" {
	@media (prefers-reduced-motion: reduce) {
	animation-duration: 1ms;
	animation-delay: 0s;
	}
	} @else {
	@media (prefers-reduced-motion: reduce) {
	transition-duration: 0s;
	transition-delay: 0s;
	animation-duration: 1ms;
	animation-delay: 0s;
	}
	}
	}

Notice the mixin sets animation-duration to 1ms instead of 0. This is because of this reason, which dates to more than 3 years ago. I'm not sure whther that concern is still valid. Regardles, the effect of:
animation-duration: 1ms;
on the saving buttons animation would just make the animation very fast because animation-iteration-count is still infinite.

At the very least, the mixing:

• Should set animation-iteration-count to 0 (or maybe 1).
• We should check whether animation-duration: 1ms; is still needed. Ideally, this should be set to 0.
• Any other property used in other animations should be evaluated to check whether it can be reset by the mixin,
• Any 'ad-hoc' usage of prefers-reduced-motion in the codebase should be replaced by the mixin.
• An new animation should be crafted since the beginning taking into consideration that it needs to be compatible with the reduce-motion mixin.

Step-by-step reproduction instructions

• Testing would require altering the code and building, so this is not for everyone.
• Add @include reduce-motion("animation"); after this line:

  gutenberg/packages/components/src/button/style.scss

  Line 244 in 1ee154f

  animation: components-button__busy-animation 2500ms infinite linear;

• If Improve Button saving state accessibility. #55547 has already been merged, replace the ad-hoc media query with @include reduce-motion("animation");
• Build.
• Enable 'Reduce motion' in your operating system user preferences.
• Edit a post.
• Click the 'Update' primary button.
• Observe the button animation still runs.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[afercia]

The enqueue_disable_animations_stylesheet E2E 'pugin' should be updated as well.

https://github.com/WordPress/gutenberg/blob/1ee154f51d6b0a743fc7c99ba5959371237bbb0e/packages/e2e-tests/plugins/disable-animations.php

[afercia]

Additionally, check any @keyframes animation.

[t-hamano]

In this comment, it is suggested to use the standard pattern instead of the reduce-motion mixin.

At the same time, efforts are being made to replace the reduce-motion mixin in the Gutenberg project with this pattern.

Will this solve the issue?

[afercia]

In this comment, it is suggested to use the standard pattern instead of the reduce-motion mixin.

I'm not sure that pattern takes into account animation?

Regardless, the mixin still 'resets'

gutenberg/packages/base-styles/_mixins.scss

Line 246 in 9bde809

animation-duration: 1ms;

. That's still a problem with potential usages of animation-iteration-count.

[t-hamano]

I'm not sure that pattern takes into account animation?

Taking the Button component as an example, the following code should work:

.components-button {
	// ...

	&.is-busy,
	&.is-secondary.is-busy,
	&.is-secondary.is-busy:disabled,
	&.is-secondary.is-busy[aria-disabled="true"] {
		@media not (prefers-reduced-motion) {
			animation: components-button__busy-animation 2500ms infinite linear;
		}

		// ...
	}
	// ...
}

Testing on Storybook:

2fb686667068ad8495cf1a7bfd6b9ea8.mp4

I think the advantage of this approach is that there is no need to "reset" animation or transition.

Another benefit is that the size of the compiled files is slightly reduced.

Code compiled using the reduce-motion mixin:

.components-button {
  transition: all 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  .components-button {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}

Code compiled using the @media not media query:

.components-button {
	@media not (prefers-reduced-motion) {
		transition: all 0.2s;
	}
}