gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-11-27 10:00:50 +00:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

Fix: Ensure carousel focuses on wrapper (#36649)

Browse Source
This commit is contained in:
Echo 2025-10-30 14:08:24 +01:00 committed by GitHub
parent f3d9a4ed44
commit 28cb345131
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/javascript/mastodon/components/carousel/index.tsx
View File

@ -90,9 +90,8 @@ export const Carousel = <
const slide = wrapperRef.current?.children[newIndex];
if (slide) {
setCurrentSlideHeight(slide.scrollHeight);
onChangeSlide?.(newIndex, slide);
if (slide instanceof HTMLElement) {
slide.focus({ preventScroll: true });
onChangeSlide?.(newIndex, slide);
}
}
@ -134,9 +133,13 @@ export const Carousel = <
);
const handlePrev = useCallback(() => {
handleSlideChange(-1);
// We're focusing on the wrapper as the child slides can potentially be inert.
// Because of that, only the active slide can be focused anyway.
wrapperRef.current?.focus();
}, [handleSlideChange]);
const handleNext = useCallback(() => {
handleSlideChange(1);
wrapperRef.current?.focus();
}, [handleSlideChange]);
const intl = useIntl();
@ -172,6 +175,11 @@ export const Carousel = <
className={`${classNamePrefix}__slides`}
ref={wrapperRef}
style={wrapperStyles}
aria-label={intl.formatMessage(messages.slide, {
current: slideIndex + 1,
max: items.length,
})}
tabIndex={-1}
>
{items.map((itemsProps, index) => (
<CarouselSlideWrapper<SlideProps>
@ -184,10 +192,6 @@ export const Carousel = <
active: index === slideIndex,
})}
active={index === slideIndex}
label={intl.formatMessage(messages.slide, {
current: index + 1,
max: items.length,
})}
/>
))}
</animated.div>
@ -201,7 +205,6 @@ type CarouselSlideWrapperProps<SlideProps extends CarouselSlideProps> = {
active: boolean;
item: SlideProps;
index: number;
label: string;
} & Pick<CarouselProps<SlideProps>, 'renderItem'>;
const CarouselSlideWrapper = <SlideProps extends CarouselSlideProps>({
@ -211,7 +214,6 @@ const CarouselSlideWrapper = <SlideProps extends CarouselSlideProps>({
renderItem,
item,
index,
label,
}: CarouselSlideWrapperProps<SlideProps>) => {
const handleRef = useCallback(
(instance: HTMLDivElement | null) => {
@ -233,9 +235,7 @@ const CarouselSlideWrapper = <SlideProps extends CarouselSlideProps>({
className={className}
role='group'
aria-roledescription='slide'
aria-label={label}
inert={active ? undefined : ''}
tabIndex={-1}
data-index={index}
>
{children}