Carousel: Fix focus capture (#33204)

Author: Mitch-At-Work

change/@fluentui-react-carousel-5e2a3d84-3b48-4b8f-b15a-96d16eeaa8b9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Ensure pointer events do not block future focus index changes",
+  "packageName": "@fluentui/react-carousel",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-carousel/library/src/components/CarouselCard/useCarouselCard.ts

@@ -73,24 +73,28 @@ export const useCarouselCard_unstable = (
         containerRef?.current?.scrollTo(0, 0);
         selectPageByElement(e, e.currentTarget, false);
       }
+      // Mouse focus event has been consumed
+      isMouseEvent.current = false;
     },
     [selectPageByElement, containerRef],
   );
 
-  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+  const handlePointerDown = (e: React.MouseEvent<HTMLDivElement>) => {
     if (!e.defaultPrevented) {
       isMouseEvent.current = true;
     }
   };
-  const handleMouseUp = (e: React.MouseEvent<HTMLDivElement>) => {
+
+  const handlePointerUp = (e: React.MouseEvent<HTMLDivElement>) => {
     if (!e.defaultPrevented) {
       isMouseEvent.current = false;
     }
   };
 
-  const onFocus = mergeCallbacks(props.onFocus, handleFocus);
-  const onMouseUp = mergeCallbacks(props.onMouseUp, handleMouseUp);
-  const onMouseDown = mergeCallbacks(props.onMouseDown, handleMouseDown);
+  const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocus);
+  const onPointerUp = mergeCallbacks(props.onPointerUp, handlePointerUp);
+  const onPointerDown = mergeCallbacks(props.onPointerDown, handlePointerDown);
+
   const state: CarouselCardState = {
     autoSize,
     components: {
@@ -103,9 +107,9 @@ export const useCarouselCard_unstable = (
         tabIndex: cardFocus ? 0 : undefined,
         ...props,
         id,
-        onFocus,
-        onMouseDown,
-        onMouseUp,
+        onFocusCapture,
+        onPointerUp,
+        onPointerDown,
         ...focusAttrProps,
       }),
       { elementType: 'div' },