Add a11y state
This commit is contained in:
@@ -1,3 +1 @@
|
|||||||
export const CONTAINER_ASPECT_RATIO = 3 / 2
|
|
||||||
export const ITEM_GAP = 8 // tokens.space.sm
|
export const ITEM_GAP = 8 // tokens.space.sm
|
||||||
export const MIN_PEEK = 40
|
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ import {useAnalytics} from '#/analytics'
|
|||||||
import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
|
import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
|
||||||
import {useKeyboardHandlers} from '#/components/images/Gallery/useKeyboardHandlers'
|
import {useKeyboardHandlers} from '#/components/images/Gallery/useKeyboardHandlers'
|
||||||
import {usePointerHandlers} from '#/components/images/Gallery/usePointerHandlers'
|
import {usePointerHandlers} from '#/components/images/Gallery/usePointerHandlers'
|
||||||
import {CONTAINER_ASPECT_RATIO, ITEM_GAP, MIN_PEEK} from '#/components/images/Gallery/const'
|
import {ITEM_GAP} from '#/components/images/Gallery/const'
|
||||||
import {IS_WEB} from '#/env'
|
import {IS_WEB} from '#/env'
|
||||||
|
|
||||||
interface GalleryProps {
|
interface GalleryProps {
|
||||||
@@ -84,8 +84,6 @@ export function Gallery({
|
|||||||
onPressIn,
|
onPressIn,
|
||||||
viewContext,
|
viewContext,
|
||||||
}: GalleryProps) {
|
}: GalleryProps) {
|
||||||
const t = useTheme()
|
|
||||||
const {t: l} = useLingui()
|
|
||||||
const ax = useAnalytics()
|
const ax = useAnalytics()
|
||||||
const {screenReaderEnabled} = useA11y()
|
const {screenReaderEnabled} = useA11y()
|
||||||
const largeAltBadge = useLargeAltBadgeEnabled()
|
const largeAltBadge = useLargeAltBadgeEnabled()
|
||||||
@@ -179,6 +177,33 @@ export function Gallery({
|
|||||||
imageCount: images.length,
|
imageCount: images.length,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
if (screenReaderEnabled) {
|
||||||
|
return (
|
||||||
|
<View style={[a.relative, a.gap_sm]}>
|
||||||
|
{images.map((image, index) => (
|
||||||
|
<AutoSizedImage
|
||||||
|
key={image.thumb}
|
||||||
|
crop={
|
||||||
|
viewContext === PostEmbedViewContext.ThreadHighlighted
|
||||||
|
? 'none'
|
||||||
|
: viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
|
||||||
|
? 'square'
|
||||||
|
: 'constrained'
|
||||||
|
}
|
||||||
|
image={image}
|
||||||
|
onPress={(containerRef, dims) =>
|
||||||
|
onPress?.(index, [containerRef], [dims])
|
||||||
|
}
|
||||||
|
onPressIn={() => onPressIn?.(index)}
|
||||||
|
hideBadge={
|
||||||
|
viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
ref={contentRef}
|
ref={contentRef}
|
||||||
|
|||||||
Reference in New Issue
Block a user