From fea8cecfab1c062cbe3b261b28ac2dc3e5b13935 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Wed, 12 Feb 2025 13:50:59 -0800
Subject: [PATCH 1/3] fix: autoplay carousel does not trigger live region
 announcements

---
 .../src/components/Carousel/useCarousel.ts    | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/react-components/react-carousel/library/src/components/Carousel/useCarousel.ts b/packages/react-components/react-carousel/library/src/components/Carousel/useCarousel.ts
index 1f61ea71e13a9e..4eff7331f04a2b 100644
--- a/packages/react-components/react-carousel/library/src/components/Carousel/useCarousel.ts
+++ b/packages/react-components/react-carousel/library/src/components/Carousel/useCarousel.ts
@@ -6,10 +6,11 @@ import {
   useIsomorphicLayoutEffect,
   useMergedRefs,
 } from '@fluentui/react-utilities';
+import type { EventHandler } from '@fluentui/react-utilities';
 import * as React from 'react';
 
 import type { CarouselProps, CarouselState } from './Carousel.types';
-import type { CarouselContextValue } from '../CarouselContext.types';
+import type { CarouselContextValue, CarouselIndexChangeData } from '../CarouselContext.types';
 import { useEmblaCarousel } from '../useEmblaCarousel';
 import { useAnnounce } from '@fluentui/react-shared-contexts';
 
@@ -37,6 +38,12 @@ export function useCarousel_unstable(props: CarouselProps, ref: React.Ref<HTMLDi
   } = props;
 
   const { dir } = useFluent();
+
+  const onCarouselIndexChange: EventHandler<CarouselIndexChangeData> = useEventCallback((event, data) => {
+    onActiveIndexChange?.(event, data);
+    updateAnnouncement(data.index);
+  });
+
   const { activeIndex, carouselApi, containerRef, viewportRef, subscribeForValues, enableAutoplay, resetAutoplay } =
     useEmblaCarousel({
       align,
@@ -48,27 +55,25 @@ export function useCarousel_unstable(props: CarouselProps, ref: React.Ref<HTMLDi
       watchDrag: draggable,
       containScroll: whitespace ? false : 'keepSnaps',
       motion,
-      onDragIndexChange: onActiveIndexChange,
+      onDragIndexChange: onCarouselIndexChange,
       onAutoplayIndexChange: onActiveIndexChange,
     });
 
   const selectPageByElement: CarouselContextValue['selectPageByElement'] = useEventCallback((event, element, jump) => {
     const foundIndex = carouselApi.scrollToElement(element, jump);
-    onActiveIndexChange?.(event, { event, type: 'focus', index: foundIndex });
+    onCarouselIndexChange?.(event, { event, type: 'focus', index: foundIndex });
 
     return foundIndex;
   });
 
   const selectPageByIndex: CarouselContextValue['selectPageByIndex'] = useEventCallback((event, index, jump) => {
     carouselApi.scrollToIndex(index, jump);
-
-    onActiveIndexChange?.(event, { event, type: 'click', index });
+    onCarouselIndexChange?.(event, { event, type: 'click', index });
   });
 
   const selectPageByDirection: CarouselContextValue['selectPageByDirection'] = useEventCallback((event, direction) => {
     const nextPageIndex = carouselApi.scrollInDirection(direction);
-    onActiveIndexChange?.(event, { event, type: 'click', index: nextPageIndex });
-
+    onCarouselIndexChange?.(event, { event, type: 'click', index: nextPageIndex });
     return nextPageIndex;
   });
 
@@ -81,16 +86,17 @@ export function useCarousel_unstable(props: CarouselProps, ref: React.Ref<HTMLDi
 
   const { announce } = useAnnounce();
 
-  const updateAnnouncement = useEventCallback(() => {
+  const updateAnnouncement = useEventCallback((newIndex: number) => {
     if (totalNavLength.current <= 0 || !announcement) {
       // Ignore announcements until slides discovered
       return;
     }
 
-    const announcementText = announcement(activeIndex, totalNavLength.current, navGroupRef.current);
+    const announcementText = announcement(newIndex, totalNavLength.current, navGroupRef.current);
 
     if (announcementText !== announcementTextRef.current) {
       announcementTextRef.current = announcementText;
+      console.log('announcing', announcementText);
       announce(announcementText, { polite: true });
     }
   });
@@ -105,14 +111,10 @@ export function useCarousel_unstable(props: CarouselProps, ref: React.Ref<HTMLDi
       }
       totalNavLength.current = data.navItemsCount;
       navGroupRef.current = data.groupIndexList;
-      updateAnnouncement();
+      updateAnnouncement(data.activeIndex);
     });
   }, [subscribeForValues, updateAnnouncement, announcement]);
 
-  useIsomorphicLayoutEffect(() => {
-    updateAnnouncement();
-  }, [activeIndex, updateAnnouncement]);
-
   return {
     components: {
       root: 'div',

From 79936b84eff32e212c16469c273534ad91d080d9 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Wed, 12 Feb 2025 14:00:00 -0800
Subject: [PATCH 2/3] remove stray console log

---
 .../library/src/components/Carousel/useCarousel.ts               | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-components/react-carousel/library/src/components/Carousel/useCarousel.ts b/packages/react-components/react-carousel/library/src/components/Carousel/useCarousel.ts
index 4eff7331f04a2b..00439663bca229 100644
--- a/packages/react-components/react-carousel/library/src/components/Carousel/useCarousel.ts
+++ b/packages/react-components/react-carousel/library/src/components/Carousel/useCarousel.ts
@@ -96,7 +96,6 @@ export function useCarousel_unstable(props: CarouselProps, ref: React.Ref<HTMLDi
 
     if (announcementText !== announcementTextRef.current) {
       announcementTextRef.current = announcementText;
-      console.log('announcing', announcementText);
       announce(announcementText, { polite: true });
     }
   });

From f95685122443d0367121cea7a925ffecfd0de12a Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Wed, 12 Feb 2025 14:00:15 -0800
Subject: [PATCH 3/3] change file

---
 ...eact-carousel-bf44df36-9898-4ce0-b4d5-decf3c170b35.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-carousel-bf44df36-9898-4ce0-b4d5-decf3c170b35.json

diff --git a/change/@fluentui-react-carousel-bf44df36-9898-4ce0-b4d5-decf3c170b35.json b/change/@fluentui-react-carousel-bf44df36-9898-4ce0-b4d5-decf3c170b35.json
new file mode 100644
index 00000000000000..92ee57d5223b9d
--- /dev/null
+++ b/change/@fluentui-react-carousel-bf44df36-9898-4ce0-b4d5-decf3c170b35.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: autoplay carousel does not trigger live region announcements",
+  "packageName": "@fluentui/react-carousel",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}