Use AutoSizedImage for screen reader view

src/components/images/Gallery/index.tsx

@@ -12,6 +12,7 @@ import {type Dimensions} from '#/lib/media/types'
 import {useA11y} from '#/state/a11y'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
 import {atoms as a, useTheme} from '#/alf'
+import {AutoSizedImage} from '#/components/images/AutoSizedImage'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {PostEmbedViewContext} from '#/components/Post/Embed/types'
 import {Text} from '#/components/Typography'
@@ -96,55 +97,26 @@ export function Gallery({
 
   if (screenReaderEnabled) {
     return (
-      <View
+      <View style={[a.relative, a.gap_sm]}>
-        style={[a.rounded_md, a.overflow_hidden]}
-        accessibilityRole="adjustable">
         {images.map((image, index) => (
-          <View
+          <AutoSizedImage
-            key={index}
+            key={image.thumb}
-            ref={containerRefs[index]}
+            crop={
-            collapsable={false}
+              viewContext === PostEmbedViewContext.ThreadHighlighted
-            style={[
+                ? 'none'
-              {aspectRatio: CONTAINER_ASPECT_RATIO},
+                : viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
-              t.atoms.bg_contrast_25,
+                  ? 'square'
-            ]}>
+                  : 'constrained'
-            <Pressable
-              onPress={
-                onPress
-                  ? () =>
-                      onPress(
-                        index,
-                        containerRefs.slice(0, images.length),
-                        thumbDimsRef.current.slice(),
-                      )
-                  : undefined
             }
-              onPressIn={onPressIn ? () => onPressIn(index) : undefined}
+            image={image}
-              accessibilityRole="button"
+            onPress={(containerRef, dims) =>
-              accessibilityLabel={
+              onPress?.(index, [containerRef], [dims])
-                image.alt || l`Image ${index + 1} of ${images.length}`
             }
-              accessibilityHint={l`Opens full image`}
+            onPressIn={() => onPressIn?.(index)}
-              style={[a.flex_1]}>
+            hideBadge={
-              <Image
+              viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
-                source={{uri: image.thumb}}
-                style={[a.flex_1]}
-                contentFit="cover"
-                accessible={true}
-                accessibilityLabel={image.alt}
-                accessibilityHint=""
-                accessibilityIgnoresInvertColors
-                onLoad={e => {
-                  thumbDimsRef.current[index] = {
-                    width: e.source.width,
-                    height: e.source.height,
             }
-                }}
-                loading={index === 0 ? 'eager' : 'lazy'}
           />
-              <MediaInsetBorder />
-            </Pressable>
-          </View>
         ))}
       </View>
     )