WordPress.org
Get WordPress

Make WordPress Core

Opened 5 months ago

Closed 3 months ago

Last modified 3 months ago

#62806 closed defect (bug) (fixed)

Customizer: Respect settings that minimize non-essential motion

Reported by: wildworks's profile wildworks Owned by: joedolson's profile joedolson
Milestone: 6.8 Priority: normal
Severity: normal Version: 3.4
Component: Customize Keywords: has-patch commit
Focuses: accessibility Cc:

Description

From an accessibility perspective, if the user has suppressed animations, that preference should be respected.

There are already some preferes-reduced-motion media queries in the Customizer, but I think they should also be applied to the following actions:

  • Preview frame when switching device preview
  • When the Add Block button is pressed in the widget editor:
    • Overlay opacity
    • Left margin of the preview area

Attachments (1)

customizer-animation.mp4​ (3.4 MB) - added by wildworks 5 months ago.
In the Chrome browser, change preferes-reduced-motion to reduce and operate the customizer

Change History (12)

@wildworks
5 months ago

In the Chrome browser, change preferes-reduced-motion to reduce and operate the customizer

This ticket was mentioned in ​PR #8119 on ​WordPress/wordpress-develop by ​@sainathpoojary.
5 months ago #1

  • Keywords has-patch added

Trac ticket: #62806

This ticket was mentioned in ​PR #8120 on ​WordPress/wordpress-develop by ​@abcd95.
5 months ago #2

Trac ticket: #62806

Trac ticket:

#3 @abcd95
5 months ago

Hey @wildworks, Thanks for raising this issue.

While digging into this and testing I found another place where this issue can be seen. This is a screencast for the same: ​https://bvvrdzu01i.ufs.sh/f/vtiKpIr2gd0coXyHTUwvaLNtIVk7DWeSmFhX5jU4K3rZ8qMf

I have raised a fix for the same.

Last edited 5 months ago by abcd95 (previous) (diff)

This ticket was mentioned in ​Slack in #accessibility by joedolson. ​View the logs.
4 months ago

#5 @joedolson
4 months ago

  • Milestone changed from Awaiting Review to 6.8
  • Owner set to joedolson
  • Status changed from new to accepted
  • Version set to 3.4

This ticket was mentioned in ​Slack in #accessibility by joedolson. ​View the logs.
3 months ago

​@audrasjb commented on ​PR #8120:
3 months ago #7

I tested this PR and I can confirm it only adds the transition when the value of prefers-reduced-motion is no-preference (which means "default": nothing was indicated by the user). I am therefore approving this PR for commit.

​@audrasjb commented on ​PR #8119:
3 months ago #8

Approving this PR as well: transition is only added when prefers-reduced-motion value is no-preference (which is the default: the user didn't set their browser to reduce motion/animation).

#9 @joedolson
3 months ago

  • Keywords commit added

This looks and tests well; merged the two PRs and marking for commit.

#10 @joedolson
3 months ago

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

In 59989:

Customizer: A11y: Respect prefers-reduced-motion.

Several significant animations in the customizer did not respect prefers reduced motion. Change CSS to wrap animations in @media queries to verify user preferences.

Props wildworks, sainathpoojary, abcd95, joedolson, audrasjb.
Fixes #62806.

Note: See TracTickets for help on using tickets.