Page MenuHomePhabricator

Make realtime preview respect prefers reduced motion
Closed, ResolvedPublic2 Estimated Story Points

Description

It could be argued that realtime preview can be problematic for people who have chosen "Prefers reduced motion". That is an accessibility problem.

This can quite easily be detected.

window.matchMedia('(prefers-reduced-motion: reduce)').matches === true

I propose we automatically disable realtime preview auto update mode when the user has configured this browser setting.

Event Timeline

Restricted Application added a subscriber: Aklapper. ยท View Herald TranscriptAug 8 2022, 2:42 PM

@nayoub we can discuss some design solutions for allowing folks to toggle the auto-refresh on and off once we see the response in Group 1 (Goes out Aug 17)

dmaza set the point value for this task to 2.Aug 10 2022, 5:46 PM

Change 822689 had a related patch set uploaded (by Samtar; author: Samtar):

[mediawiki/extensions/WikiEditor@master] RealtimePreview.js: Respect prefers-reduced-motion

https://gerrit.wikimedia.org/r/822689

My patch ^ currently puts RTP into manual mode if prefers-reduced-motion is set โ€” if/when a design decision has been made, I've included a reducedMotion property which will be useful to displaying a custom UI message

Change 822689 merged by jenkins-bot:

[mediawiki/extensions/WikiEditor@master] RealtimePreview.js: Respect prefers-reduced-motion

https://gerrit.wikimedia.org/r/822689

MusikAnimal subscribed.

QA notes: I don't how to set this accessibility setting. I tested the patch by simply replacing the media query with true. Just saying this out loud in case it helps.

QA notes: I don't how to set this accessibility setting. I tested the patch by simply replacing the media query with true. Just saying this out loud in case it helps.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences

dom_walden subscribed.

If you have prefers reduced motion set, when opening the Realtime Preview it will immediately be in manual mode (with the manual mode bar).

I tested this on Firefox (via about:config and GTK settings), Chromium and Safari.

Test environment: https://en.wikipedia.beta.wmflabs.org WikiEditor 0.5.3 (b0d96f7) 06:30, 19 August 2022.

Just want to note for sign-off, forcing the user into manual mode when prefers-reduced-motion is set feels like a reasonable solution โ€” we may want to revisit this with a different message/UI in the future

We may want to revisit this with a different message/UI in the future

Agreed, let's see if any feedback comes back after it's live to users and down to revisit. Resolving for now!

Late note: We've introduced prefers-reduced-motion in CSS land for all of MediaWiki per T254399: Add ability to take `prefers-reduced-motion` user setting into account in Vector (unlike the title says). That should also apply for many JS induced animations and transitions (no 100% guarantee).