diff --git a/src/components/images/Gallery/index.tsx b/src/components/images/Gallery/index.tsx index a6a929c7c..3eca12538 100644 --- a/src/components/images/Gallery/index.tsx +++ b/src/components/images/Gallery/index.tsx @@ -234,6 +234,7 @@ export function Gallery({ scrollTo, onSettle, imageCount: images.length, + allowButtonDrag: true, }) if (screenReaderEnabled) { diff --git a/src/components/images/Gallery/usePointerHandlers.ts b/src/components/images/Gallery/usePointerHandlers.ts index 661c20b51..236b0e9ef 100644 --- a/src/components/images/Gallery/usePointerHandlers.ts +++ b/src/components/images/Gallery/usePointerHandlers.ts @@ -5,4 +5,5 @@ export function usePointerHandlers(_args: { scrollTo: any onSettle: any imageCount: any + allowButtonDrag?: boolean }) {} diff --git a/src/components/images/Gallery/usePointerHandlers.web.ts b/src/components/images/Gallery/usePointerHandlers.web.ts index b8357599b..ca29df164 100644 --- a/src/components/images/Gallery/usePointerHandlers.web.ts +++ b/src/components/images/Gallery/usePointerHandlers.web.ts @@ -48,6 +48,7 @@ export function usePointerHandlers({ scrollTo, onSettle, imageCount, + allowButtonDrag = false, }: { flatListRef: React.RefObject itemWidthsRef: React.RefObject> @@ -55,6 +56,7 @@ export function usePointerHandlers({ scrollTo: (offset: number) => void onSettle: (index: number) => void imageCount: number + allowButtonDrag?: boolean }) { useEffect(() => { if (imageCount <= 1) return @@ -90,15 +92,15 @@ export function usePointerHandlers({ if (!(target instanceof Element)) return /* - * Don't hijack form controls (volume slider, etc.) or buttons. Without - * this, preventDefault breaks range inputs and drag becomes a carousel - * swipe instead of adjusting the control. + * Don't hijack form controls (volume slider, etc.). Image carousel tiles + * are exposed as accessible buttons, so that carousel opts into using + * buttons as drag surfaces. Post-drag click suppression below keeps a + * swipe from activating the image. */ - if ( - target.closest( - 'input, textarea, select, button, [role="slider"], [role="button"], [data-no-carousel-drag]', - ) - ) { + const blockedSelector = allowButtonDrag + ? 'input, textarea, select, [role="slider"], [data-no-carousel-drag]' + : 'input, textarea, select, button, [role="slider"], [role="button"], [data-no-carousel-drag]' + if (target.closest(blockedSelector)) { return } @@ -357,5 +359,6 @@ export function usePointerHandlers({ scrollTo, onSettle, imageCount, + allowButtonDrag, ]) } diff --git a/src/components/images/ImageLayoutGrid.tsx b/src/components/images/ImageLayoutGrid.tsx index 5b4ba608b..484e89af7 100644 --- a/src/components/images/ImageLayoutGrid.tsx +++ b/src/components/images/ImageLayoutGrid.tsx @@ -34,8 +34,8 @@ export function ImageLayoutGrid({ const gap = isWithinQuote ? (gtMobile ? a.gap_xs : a.gap_2xs) : a.gap_xs return ( - - + + )} - - - - - {isThreadParent && ( - - )} - + {!isCarouselItem && ( + + + + + {isThreadParent && ( + + )} + + )} void + reposterOnly?: boolean }) { const t = useTheme() const {_} = useLingui() @@ -94,7 +96,13 @@ export function PostFeedReason({ a.leading_snug, ]} numberOfLines={1}> - {isOwner ? ( + {reposterOnly ? ( + isOwner ? ( + You + ) : ( + reskeeter + ) + ) : isOwner ? ( Reposted by you ) : ( Reposted by {reskeeter}