scrumlr.io icon indicating copy to clipboard operation
scrumlr.io copied to clipboard

a11y: Add support for reduced motion

Open Resaki1 opened this issue 1 year ago • 1 comments

We have a few animations already (and will hopefully have more in the future!). For a11y reasons, we should add support for reduced motion.

As a user, I want scrumlr to automatically detect and apply the reduced-motion setting from my OS or Browser. Additionally, I want to have a toggle in the settings to independently turn reduced motion on or off.

Acceptance criteria:

  • In the settings, there is a toggle to turn animations on, off, or auto (just like the color theme). Default is auto
  • On auto, scrumlr should turn animations on or off depending on the client's settings

A few of our animations are currently implemented using react-spring. This library has a useReducedMotion hook which should be useful here.

Resaki1 avatar Feb 22 '24 12:02 Resaki1

If this only applies to react-spring animations, we also might consider using the reduced-motion media query to skip other animations.

Schwehn42 avatar Feb 22 '24 15:02 Schwehn42