[OUDS] Deactivate animations for accessibility

[hannahiss]

Prerequisites

• [x] I have searched for duplicate or closed feature requests
• [x] I have read the contributing guidelines

Proposal

It could be something like:

@media (prefers-reduced-motion) {
  .my-animated-component {
    animation: none;
  }
}

Motivation and context

Some animations can be disturbing or even triggering for some users, and that's why browsers provide ways to turn off animations. To ensure the animations in OUDS respect these settings, we need to make use of the prefers-reduced-motion CSS feature to detect the user settings and carry out appropriate actions.

[MaxLardenois]

Maybe we could have a mixin like for transitions that automatically adds the media query?

[MaxLardenois]

So I investigated a little, we have animations on : OUDS Button, OUDS Switch, Spinners, Progress bars and Carousel. At the moment only spinners and OUDS buttons do not have the media query prefers-reduced-motion optout in place for their animation. We can add it on the Button (and maybe Spinners but I do not know if it will be like the Bootstrap one in OUDS), but I think there is a usability issue as a not animated spinner will be very strange and look like a stuck UI. I think it might come as an exception as stated in Note 4 here: https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html

[MaxLardenois]

So I investigated a little, we have animations on : OUDS Button, OUDS Switch, Spinners, Progress bars and Carousel. At the moment only spinners and OUDS buttons do not have the media query prefers-reduced-motion optout in place for their animation. We can add it on the Button (and maybe Spinners but I do not know if it will be like the Bootstrap one in OUDS), but I think there is a usability issue as a not animated spinner will be very strange and look like a stuck UI. I think it might come as an exception as stated in Note 4 here: https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html

@Aniort will look into it, let's circle back in a few weeks