WordPress.org

Make WordPress Core

Opened 7 months ago

Closed 5 months ago

#52263 closed enhancement (fixed)

Use `prefers-reduced-motion` Media Query on auto-updates spinner animations

Reported by: audrasjb Owned by: audrasjb
Milestone: 5.7 Priority: normal
Severity: normal Version: 5.5
Component: Upgrade/Install Keywords: has-patch
Focuses: accessibility Cc:

Description

Animations used for auto-updates spinners should take into account browsers preferences.

For these animations, a prefers-reduced-motion: reduce Media Query should be used, with the animation CSS property set to none.

For reference: https://core.trac.wordpress.org/ticket/51476#comment:17

Attachments (3)

52263.diff (1.2 KB) - added by xkon 6 months ago.
plugin-updates-static-icon.jpg (107.2 KB) - added by sabernhardt 5 months ago.
Plugins screen with one plugin updating and others with update available
52263.1.diff (524 bytes) - added by sabernhardt 5 months ago.
restoring motion for Ajax plugin update actions (only)

Download all attachments as: .zip

Change History (19)

This ticket was mentioned in Slack in #core-auto-updates by audrasjb. View the logs.


6 months ago

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


6 months ago

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


6 months ago

@xkon
6 months ago

#4 @xkon
6 months ago

  • Keywords has-patch added; needs-patch removed

52263.diff adds the prefers-reduced-motion media query for the spinners as well as an extra query for the #51476 (not yet committed) admin bar spinner since we're adding an animation there as well.

Tell me if you prefer to update the reduced motion on the other task for the admin bar and I can refresh this :).

#5 @audrasjb
6 months ago

Hey, thanks for the patch @xkon, looks good to me! 👍
Let's wait for #51476 to be committed then :)

#6 @johnbillion
6 months ago

  • Keywords 2nd-opinion added

Note that "reduced motion" doesn't mean "no motion". Personally I would classify a loading spinner as useful motion that assists in communicating the current state of the application, as opposed to animation that is purely decorative.

WCAG AAA talks about "unnecessary animation" in this context too: https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html

If this spinner isn't animated when prefers-reduced-motion is in use, does it convey its meaning well enough?

#7 @audrasjb
6 months ago

@johnbillion fair point, thanks.
Given there is a state change on the action link (the link text changes once auto-updates are activated/disabled), I think it's ok to remove the animation, because we actually provide a feedback to the user (in the link text and also in a wpa11y.speak notice).

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


6 months ago

#9 @audrasjb
6 months ago

  • Keywords commit added; 2nd-opinion removed
  • Owner set to audrasjb
  • Status changed from new to accepted

Patch is ready to go on my side :)

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


6 months ago

#11 @SergeyBiryukov
6 months ago

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

In 50028:

Accessibility: Administration: Respect the prefers-reduced-motion media query for update icon spinner animations.

The update icon rotation should not occur when the user has opted to reduce motion, for example by selecting the "Reduce motion" option in macOS' preferences or unselecting "Show animations in Windows" in Windows' preferences.

Follow-up to [47813], [50027].

Props xkon, audrasjb, johnbillion.
Fixes #52263. See #51476.

@sabernhardt
5 months ago

Plugins screen with one plugin updating and others with update available

@sabernhardt
5 months ago

restoring motion for Ajax plugin update actions (only)

#12 @sabernhardt
5 months ago

  • Keywords commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

I think we should reconsider disabling every spinner rotation, and particularly maintain motion in places where the icon is both visible and static before you click to update plugins with Ajax:

  1. The "Update Now" buttons on the Add new plugin (or theme) screen
  2. The update message after clicking "update now" for individual plugins on the Plugins screen

In those cases, I would consider the motion "essential" to convey the busy state visually. 52263.1.diff restores spinning for both.

Leaving the other icons motionless by user preference:

  • I specifically wanted to avoid adding extra motion in the toolbar, away from the interaction, so of course I'd like to keep that part of [50028].
  • The auto-update buttons complete the action so quickly that motion might be more distracting than helpful for some users.
  • The Import page's spinner icons only show while the install process is running, so the icon's presence is likely enough to help indicate the status (along with the text).
  • I was a bit surprised the first time I installed a plugin or theme and the Install Now button icon did not rotate. The process there takes longer to finish, and the motion is meaningful. Yet it may not be essential because the icon appears and disappears the same way as the Import installer and auto-update buttons.

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


5 months ago

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


5 months ago

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


5 months ago

#16 @sabernhardt
5 months ago

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

After discussion on the #accessibility Slack channel, we agreed it's better to keep the original changeset as it is.

@joedolson summarized the points regarding motion:

It could hypothetically be useful, but because the expected result of reducing motion should be to ... reduce motion, we should start [by] respecting that expectation.

Note: See TracTickets for help on using tickets.