Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Carousel): autoplay does not trigger live region announcements #33832

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fix(Carousel): autoplay does not trigger live region announcements #33832

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fea8cec
fix: autoplay carousel does not trigger live region announcements
smhigley Feb 12, 2025
79936b8
remove stray console log
smhigley Feb 12, 2025
f956851
change file
smhigley Feb 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 16 additions & 14 deletions packages/react-components/react-carousel/library/src/components/Carousel/useCarousel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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,
Expand All @@ -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;
});

Expand All @@ -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) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated this to take an index directly, since activeIndex isn't updated to the new value when updateAnnouncement is called

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 });
}
});
Expand All @@ -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',
Expand Down
Loading