Thumnails Gifs for Plugins does not respect "no motion" device settings

[Travel_girl]

The plugin directory allows now gifs as thumbnails. They are problematic for people with cognitive disabilities because they are distracting.

They are therefore not a good idea in the first place. But at least, the gifs should respect "no motion" device settings.

People who are struggling with motion can set in their device, that they are prefer "no motion". But this setting does not apply for the plugin thumbnails.

This problem is visible in the follow areas:

• plugin directory (see ticket ​https://meta.trac.wordpress.org/ticket/6312)
• installing plugins via WordPress Admin Area
• Update Screen in WordPress Admin Area

[Travel_girl]

Thumbnail Gif in WordPress Admin area is moving even with activated "no motion" setting in Device

[joedolson]

This will be a bit tricky to implement, but there are some useful ideas in the related meta trac ticket (​https://meta.trac.wordpress.org/ticket/5464); and we can look at adding something like ​https://adamchaboryk.github.io/gifa11y/.

[audrasjb]

It would probably be easier to completely stop all animated gifs.
I found ​another useful resource for this.

[bordoni]

@audrasjb I really like the second link you posted there, I wanted to tackle that but I wanted to check if you were already working on this before I get started.

My idea was, since this has a performance concern, it would only apply to the browsers with prefers-reduced-motion and to the plugin icons.

I would have liked to apply only to the animated icons, but it seems like most of the icons are either SVG, GIF or PNG, which defeats the purpose of trying to avoid doing this to all icons.

[audrasjb]

Replying to bordoni:

@audrasjb I really like the second link you posted there, I wanted to tackle that but I wanted to check if you were already working on this before I get started.

No, your work is actually more than welcome!

My idea was, since this has a performance concern, it would only apply to the browsers with prefers-reduced-motion and to the plugin icons.

Yay! This is the best option in my opinion.

I would have liked to apply only to the animated icons, but it seems like most of the icons are either SVG, GIF or PNG, which defeats the purpose of trying to avoid doing this to all icons.

Sounds still good to me 👌

[audrasjb]

Moving this to milestone 6.4, as we're approaching the end of WP 6.3 beta cycle.
Also changing ticket type to enhancement.

[joedolson]

Hi, @bordoni! Please do work on this - it would be a great enhancement to get into 6.4. If you need any support or incomplete patches you want a second set of eyes on, don't hesitate to ask!

[bordoni]

Thank you @joedolson @audrasjb, I had a couple of weird busy weeks, but I will get something to be reviewed early next week.

[oglekler]

Hi @bordoni your patch is most welcomed. Right now we are on Alpha stage of the release cycle and this is an enhancement, which meant that the patch needs to be reviewed and committed before the Beta 1 to get into 6.4 release. If your patch is nearly ready but still needs some work, please make it as a Draft PR to provide an ability to someone else to tackle the rest of the work and not to double what is done already. Thank you!

[joedolson]

Hey, @bordoni! It would still be great if you added a patch on this, but if you're not going to have time for it, please let us know. Thanks!

[bordoni]

@joedolson I got incredibly distracted with Plugin Review team work, which I recently got approved to work on and it has been so much work there. Its taking a lot more of my time. I won't be able to get to this in time.

Freeze animated plugin icons when reduced motion is enabled. When the user has enabled the 'prefers-reduced-motion' setting, this module stops animations for all GIFs on the page with the class 'plugin-icon' or plugin icon images in the update plugins table.

Added to wp-admin/js/common.js. I'm not sure if this is the best location for this javascript. Open to suggestions if this is not the proper location for such code.

Trac ticket: https://core.trac.wordpress.org/ticket/55723

[joedolson]

common.js seems reasonable. The only other place that might make sense is plugin-install.js, but that's also loaded globally so it doesn't make a difference from a load perspective.

[joedolson]

Hi, Steve! Thanks for the patch! This patch is only working when results are already loaded that include animations; it also needs to be able to run on new results. E.g., /wp-admin/plugin-install.php?s=popup&tab=search&type=term will return animated results that are stopped, but performing a search for 'popup' will return results that are still animated.

Testing instructions:

1) Before patch: go to Plugins > Add New. Perform a search that returns results including animations. E.g. 'popup'.
2) Observe that animations are running.
3) Apply patch.
4) Perform same search. Observe whether animations are still running.

[stevejonesdev]

Thanks for catching that @joedolson. I've added a listener for the search-install-plugins Ajax event. If prefers-reduced-motion is still set to reduce the freezeAll() function will run again stopping all animated gifs. I've updated the PR and this is ready for testing.

[joedolson]

Works great, thanks, @stevejonesdev! I've updated the PR to meet JS coding style standards, but otherwise I think this is pretty much ready to go.

[joedolson]

In 56541:

Plugins: Respect prefers-reduced-motion on plugin thumbnails.

Pause animated plugin thumbnails when a user has reduced motion preferences configured in their device or operating system.

Props Travel_girl, audrasjb, bordoni, stevejonesdev, joedolson.
Fixes #55723.

Closed in ​https://github.com/WordPress/wordpress-develop/commit/ef54f4e57fc936ca3f505cb1f00b54a74ac75114