Reduce motion for arrow key scrolling in Carousel (#1549)

Implement reduced motion preferences for users when scrolling with arrow
keys in the Carousel component, enhancing accessibility for those who
prefer less motion.

The component now respects reduced motion when both using the arrow
buttons and arrow keys. For regular scrolling/swiping it still does not.
This would require some advanced tweaking and it isn't strictly
required: *"For example, if scrolling a page causes elements to move
(other than the essential movement associated with scrolling the
content, which is under the user's control)"*
(https://www.w3.org/WAI/WCAG22/Techniques/css/C39). Scrolling or swiping
left/right in the `Carousel` is under the users control. And users with
a reduced motion preference can avoid this by using the arrow
buttons/keys.

Author: oscarcarlstrom

.changeset/dark-knives-brush.md

@@ -0,0 +1,5 @@
+---
+"@obosbbl/grunnmuren-react": patch
+---
+
+Movments in the `Carousel` are now eliminated when using arrow keys for users that has a reduced motion preferrence

packages/react/src/carousel/carousel.tsx

@@ -272,6 +272,8 @@ const Carousel = ({
               carouselItemsRef,
               onScroll,
               activeIndex: scrollTargetIndex,
+              handlePrevious,
+              handleNext,
             },
           ],
           [
@@ -370,6 +372,8 @@ type CarouselItemsContextValue = {
   carouselItemsRef: React.Ref<HTMLDivElement>;
   onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
   activeIndex: number;
+  handlePrevious?: () => void;
+  handleNext?: () => void;
 };
 
 const CarouselItemsContext = createContext({
@@ -378,6 +382,28 @@ const CarouselItemsContext = createContext({
 } as CarouselItemsContextValue);
 
 const CarouselItems = ({ className, children }: CarouselItemsProps) => {
+  const {
+    carouselItemsRef,
+    onScroll,
+    activeIndex,
+    handlePrevious,
+    handleNext,
+  } = useContext(CarouselItemsContext);
+
+  const prefersReducedMotion = useRef(
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+  );
+
+  // Update the ref when the media query changes
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const handleChange = (e: MediaQueryListEvent) => {
+      prefersReducedMotion.current = e.matches;
+    };
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     // Prevent default behavior when holding down arrow keys (when repeat is true)
     // The default behavior in scroll snapping causes a staggering scroll effect that feels janky
@@ -386,11 +412,20 @@ const CarouselItems = ({ className, children }: CarouselItemsProps) => {
       (event.key === 'ArrowLeft' || event.key === 'ArrowRight')
     ) {
       event.preventDefault();
+      return;
     }
-  };
 
-  const { carouselItemsRef, onScroll, activeIndex } =
-    useContext(CarouselItemsContext);
+    // For users with prefers-reduced-motion, trigger button click behavior instead of native scroll
+    if (prefersReducedMotion.current) {
+      if (event.key === 'ArrowLeft' && handlePrevious) {
+        event.preventDefault();
+        handlePrevious();
+      } else if (event.key === 'ArrowRight' && handleNext) {
+        event.preventDefault();
+        handleNext();
+      }
+    }
+  };
 
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: The keydown handler is only to prevent undesired scrolling behavior when using the arrow keys