Page MenuHomePhabricator

Add ability to take `prefers-reduced-motion` user setting into account in Vector
Open, MediumPublic

Description

prefers-reduced-motion media query sees increasing operating system and browser support and should be taken into account for all user-interface transitions and animations to address people with vestibular disorder needs (global estimation of around 70 million people).

Possible implementation paths

  • Adding a core style module that is either loaded by default or as an opt-in for skins and by default by installer(?)
  • Adding a specific CSS class to body as core functionality when user hasn't set @media screen and (prefers-reduced-motion: reduce);
  • Just relying on media query (as Less mixin) on every relatively big movement, mismatched direction or spatial distance animation/transition

Prior work

This has been discussed before in context of

External references

Event Timeline

ovasileva triaged this task as Medium priority.Jun 9 2020, 1:20 PM
ovasileva added a project: Readers-Web-Backlog.

I remember there were questions about how best to implement this feature. It's available to be used in CSS directly via media query, but it can also be used by appending a class to the body via JS.

I think the JS approach might suite our needs better because it allows us to frame the feature as an assertion rather than a negation.

Using the media query @media screen and (prefers-reduced-motion: reduce) would mean overriding previously declared animations and disabling them in that block.
The opposite of that would be placing the animation in a media-query like @media (prefers-reduced-motion: no-preference) but that has limited browser support.

Appending a class like .animations-enabled, which under the hood checks for @media screen and (prefers-reduced-motion: reduce) === false has the benefit of letting us default to true even when the browser doesn't support that media-query. The downside side is that it only kicks in when JS is enabled and the page has loaded, bu on the upside, it fixes the chrome animation flash bug! T234570

Jdlrobson renamed this task from Add ability to take `prefers-reduced-motion` user setting into account to Sidebar: Add ability to take `prefers-reduced-motion` user setting into account.Jul 28 2020, 6:20 PM

This could be added in mediawiki.page.ready since that is run in all skins.

Today we discussed this ticket at the end of standup and concluded that it was a bit too nebulous in its current form so we moved it back to needs analysis. Questions that came up during the discussion:

  1. Where should we implement this change? E.g. Only in Vector, implemented in Core and used by Vector, implemented in Core and used by Vector and Minerva, etc?
  2. Should we attempt to use the .animations-enabled class to replace the chrome animation flash bug. Is that part of the acceptance criteria? If so, will the prefers-reduced-motion media query work on desktop browsers and mobile browsers?
  3. What is the acceptance criteria?

Pushing back to the backlog until we have this @Volker_E - the problem statement is not clear right now and this doesn't seem time sensitive given our existing work on search or languages.

I'm convinced we all would be better of, with this be done on a MediaWiki core (and possible duplication on external UI lib level) with a ruleset like this, carved out in sanitize.css:

@media ( prefers-reduced-motion: reduce ) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important; /* 1 */
    animation-duration: 1ms !important; /* 1 */
    animation-iteration-count: 1 !important; /* 1 */
    background-attachment: initial !important; /* 2 */
    scroll-behavior: auto !important; /* 3 */
    transition-delay: 0s !important; /* 4 */
    transition-duration: 0s !important; /* 4 */
  }
}
Volker_E renamed this task from Sidebar: Add ability to take `prefers-reduced-motion` user setting into account to Add ability to take `prefers-reduced-motion` user setting into account.Feb 22 2021, 4:52 PM
Volker_E updated the task description. (Show Details)
LGoto added a subscriber: LGoto.

This task was closed as part of backlog upkeep. If you believe it was closed in error, please respond on the ticket.

This is an important Accessibility feature and should just be removed from Readers-Web-Backlog, not declined.

Jdlrobson renamed this task from Add ability to take `prefers-reduced-motion` user setting into account to Add ability to take `prefers-reduced-motion` user setting into account in Vector.Aug 2 2021, 10:56 PM
Jdlrobson moved this task from Triaged but Future to Tracking on the Readers-Web-Backlog board.

Just relying on media query (as Less mixin) on every relatively big movement, mismatched direction or spatial distance animation/transition

This seems like the best approach to me here. I don't see why this needs to be generalized when it can be easily added to each feature where it makes sense using a simple media query.