[A11y] Added support for prefers reduced motion

[hiTyagi]

A11y Enhancement

Added support for prefers-reduced-motion Enhances the A11y Support for the modifier

Details

• Realtime update of the scrolling behavior when users update their OS settings for the reduced motion.
• Sets scroll behavior to instant if the original requested behavior was smooth; when the reduced motion setting is enabled.
• Keeps other settings untouched and makes no changes if the reduced motion is not enabled.

Screen recording

https://github.com/user-attachments/assets/4f7d5a50-d7b2-42be-bdf6-a865c1b624af

[elwayman02]

I'm trying to decide if this should be considered a breaking change, since we're essentially changing how the smooth behavior option is handled when prefers-reduced-motion is set. It's kind of weird that browsers don't already handle this - why wouldn't the browser prefer the user's setting over the programmatic one already?

[hiTyagi]

I'm trying to decide if this should be considered a breaking change, since we're essentially changing how the smooth behavior option is handled when prefers-reduced-motion is set. It's kind of weird that browsers don't already handle this - why wouldn't the browser prefer the user's setting over the programmatic one already?

In my explorations for this, I discovered that Firefox handles this automatically but Chrome does not. This condition that I have added is essentially in line with A11y recommendations. The idea behind this implementation is essentially to keep it in a way that we can clean this out once (if) chrome starts to support it.

I originally thought of adding a flag as the named param to optionally support prefers-reduced-motion but then decided against it because I think the modifier should inherently be accessible, not optional.