Components: Replace reducedMotion() usage with media queries

[mirka]

We have a reducedMotion() utility for CSS that we recently deprecated, and we'd like to rewrite all the existing usage with standard media queries.

Most of the time, it should be possible to rewrite them in the form of:

@media not ( prefers-reduced-motion ) {
  /* the transition or animation styles */
}

Split PRs as appropriate — they don't have to be all at once.

• AlignmentMatrixControl
• Elevation
• FocalPointPicker
• Navigation
• RangeControl
• Tabs
• ToggleGroupControl
• inputStyleNeutral
• Remove utility when everything is replaced

[DaniGuardiola]

I'm gonna make the change for Tabs in #60560 since I'm already replacing one of the instances there already.

Edit: done.

[DaniGuardiola]

I removed all instances, you can see them linked above in the thread. Please review when you can @mirka :)

Can we add one final item to remove the utility once those land, before closing this umbrella task?

[tyxla]

@DaniGuardiola feel free to request a review from the @WordPress/gutenberg-components team so more of us can help with reviews.

[DaniGuardiola]

@tyxla thanks for the suggestion! I sent these PRs before I had contributor access but I'll do it now.

[alexstine]

CC: @afercia or @joedolson. I wonder if this might be a spot Accessibility Team should contribute documentation for coding standards. I would imagine it being possible that some transition could be introduced without the not prefers reduced motion declaration. In my opinion, a utility seemed much more robust to prevent errors so now we need to handle this from a documentation or code checking side if at all possible.

[DaniGuardiola]

@alexstine FWIW, I'd personally think the opposite. Previously, we had a custom utility with zero documentation. As a relatively new contributor, I didn't even realize it existed initially.

Now, we use the standard (which is simpler too). If anything granted documentation, in my opinion, was the previous custom utility. Now, a developer just has to have basic accessibility and CSS knowledge, which afaik includes most if not all potential contributors to this package.

That said, some sort of project-specific guide never hurts, if that's what you're proposing, though I would consider that -since this is pretty universal- any of the many a11y learning resources and checklists out there already include this information.

[joedolson]

We've always struggled with exactly what level of detail to provide in the accessibility coding standards. In an ideal world, they would be a set of highly opinionated standards - not just how to make something accessible, but what is the WordPress decision on how this particular accessibility characteristic should be done. E.g., when do we prefer screen-reader-text vs. aria-label. This would be more similar to our other code standards, which reference larger standards but also document the WordPress specific preferences within them.

As a result, the accessibility coding standards are currently just links across to standards documents, which are pretty clear on requiring the usage of prefers-reduced-motion.

I don't actually think there's anything about the utility that's particularly more testable or detectable than the use of the prefers reduced motion media query flag - but if there could be some tests added that can check and make sure that all transitions/animations are wrapped in prefers-reduced-motion, that would definitely be great.

[DaniGuardiola]

@joedolson I'd be happy to contribute to the accessibility docs for WordPress since it's one of the things I'm gonna be focusing a lot on. I'm also currently doing some courses (5 of them!) to refresh and complete my knowledge in this area, so that'll help. Where can I find these docs? The docs dir?

[joedolson]

@DaniGuardiola There are the accessibility coding standards, which are part of the WordPress Coding Standards; then there's the Accessibility Handbook, which is more opinionated.

Having a document on handling animation would be great!