Respect prefers-reduced-motion media query

[jfrost-mo]

Problem

The cylc UI doesn't currently respect user agents setting prefers-reduced-motion. This accessibility option indicates whether animations should play, and is useful to both people who get nauseous at too much animation, and to people on systems that don't have the graphics to run the animations smoothly. (E.g. VDIs at the Met Office)

Proposed Solution

Fortunately you can just add a snippet of CSS to your pages to prevent animations. It reduces their duration to near-instant rather than removing them entirely, as some website rely on the events fired during an animation. I think this CSS just needs to be added to src/styles/index.scss.

/* Remove all animations, transitions and smooth scroll for people that prefer
not to see them. Based on https://web.dev/prefers-reduced-motion/ */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

[oliver-sanders]

Oh nice!

We have a reduced animation configuration available via the settings page, we'll see if we can hook it into this.

Note the animations on the page come from the component framework we use (vuetify) and are on-by default with no option to turn them off so we have to hack them away with CSS.

[MetRonnie]

This could be hooked into https://github.com/cylc/cylc-ui/blob/ca2236a0a45e6c00ec2afab4fdecc8e025e84bc8/src/composables/localStorage.js#L32

using something like

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

for the default value instead of false

Edit: or using https://vueuse.org/core/usePreferredReducedMotion/ seeing as useLocalStorage is also from vueuse