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.
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| RealtimePreview.js: Respect prefers-reduced-motion | mediawiki/extensions/WikiEditor | master | +4 -1 |
@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)
Change 822689 had a related patch set uploaded (by Samtar; author: Samtar):
[mediawiki/extensions/WikiEditor@master] RealtimePreview.js: Respect prefers-reduced-motion
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
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.
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).