[FEAT] Add support for prefers-reduced-motion in components to enhance accessibility

[jannik-busch]

Description
The prefers-reduced-motion CSS media feature detects if a user has enabled a device setting to minimize non-essential motion. This setting signals the browser that the user prefers an interface that reduces, removes, or replaces motion-based animations.

Motion-heavy animations, such as scaling or panning large objects, can cause discomfort for individuals with vestibular motion disorders, making this an important accessibility feature.

Proposal
In client components, detect if the user prefers reduced motion using CSS or JavaScript with a Media Query.

For example:

if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  // Disable animations or provide alternative UI
}

Whenever animations are used, they should be disabled or replaced when the prefers-reduced-motion setting is detected.

Acceptance Criteria

• Animations and movement-based interactions are disabled when the user has set their preference for reduced motion.

[DavidHDev]

Good idea, will look into adding it to all the components very soon

[PedroMarianoAlmeida]

Hi David! Have you already started?
I was thinking of checking how you do it and then replicating in other components

[DavidHDev]

@PedroMarianoAlmeida no, haven't had time for this, but it's going to be tricky since no two components are the same, each component will require a unique solution unfortunately

[PedroMarianoAlmeida]

Ok then! I will choose one and try it... maybe this can be done one component at a time, in different MR... but we need to keep track of where it is concluded.

Can we use this Issue for that? (a checkbox with the name of the components)

[PedroMarianoAlmeida]

What do you think about this solution? (asking before implementing in other components and creating the MR):
PedroMarianoAlmeida@93085b9

Why did I decide not to use the Media query CSS?
I could add a display none on the animated component, and create my static component with the opposite behavior (regular as display none, and block on the respective media query)
But in this way, the animated component would be loaded, and in this way, the only thing rendering is the static components

The isClient state is for avoiding hydration errors on NextJS

I believe that the methodology will be easier replicated to other components because I didn't touch the original component... I created a wrapper to check if it is animated (but each "static component" will be different)

[DavidHDev]

@PedroMarianoAlmeida Sorry, no, this is not a good solution, we definitely don't want to add another layer over the components or complexity like that in the code. Stopping animations should be an individual solution per component, and it should be done through a prop on the component and set to the prefers-reduced-motion media query by default. Don't worry about it, I will handle it. Thanks!