Make WordPress Core

Opened 2 years ago

Closed 11 months ago

Last modified 11 months ago

#55723 closed enhancement (fixed)

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

Reported by: travel_girl's profile Travel_girl Owned by: joedolson's profile joedolson
Milestone: 6.4 Priority: normal
Severity: normal Version:
Component: Plugins Keywords: has-patch has-testing-info commit
Focuses: ui, accessibility, administration Cc:

Description

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:

Attachments (1)

gif_motion_plugin_install_Core.mov (3.1 MB) - added by Travel_girl 2 years ago.
Thumbnail Gif in WordPress Admin area is moving even with activated "no motion" setting in Device

Change History (28)

@Travel_girl
2 years ago

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

#1 @SergeyBiryukov
2 years ago

  • Component changed from General to Plugins
  • Focuses ui administration added

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


2 years ago

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


2 years ago

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


16 months ago

#5 @joedolson
16 months ago

  • Milestone changed from Awaiting Review to 6.3

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/.

#6 @audrasjb
15 months ago

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

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


13 months ago

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


13 months ago

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


13 months ago

#10 follow-up: @bordoni
13 months ago

@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.

#11 in reply to: ↑ 10 @audrasjb
13 months ago

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 👌

Last edited 13 months ago by audrasjb (previous) (diff)

#12 @audrasjb
13 months ago

  • Milestone changed from 6.3 to 6.4
  • Type changed from defect (bug) to enhancement

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

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


12 months ago

#14 @joedolson
12 months ago

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!

#15 @bordoni
12 months ago

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

#16 @oglekler
11 months ago

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!

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


11 months ago

#18 @joedolson
11 months ago

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!

#19 @bordoni
11 months ago

@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.

This ticket was mentioned in PR #5130 on WordPress/wordpress-develop by @stevejonesdev.


11 months ago
#20

  • Keywords has-patch added; needs-patch removed

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

This ticket was mentioned in Slack in #accessibility by stevejones. View the logs.


11 months ago

#22 @joedolson
11 months ago

  • Owner set to joedolson
  • Status changed from new to reviewing

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.

#23 @joedolson
11 months ago

  • Keywords has-testing-info changes-requested added

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.

#24 @stevejonesdev
11 months ago

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.

#25 @joedolson
11 months ago

  • Keywords commit added; changes-requested removed

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.

#26 @joedolson
11 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

Note: See TracTickets for help on using tickets.