Comments, improve a11y

src/view/com/util/images/AutoSizedImage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Pressable, View} from 'react-native'
+import {DimensionValue, Pressable, View} from 'react-native'
 import {Image} from 'expo-image'
 import {AppBskyEmbedImages} from '@atproto/api'
 import {msg} from '@lingui/macro'
@@ -46,17 +46,25 @@ export function SquareFramedImage({
   children: React.ReactNode
 }) {
   const t = useTheme()
-  const outerAspectRatio = React.useMemo(() => {
+  /**
-    return Math.min(1 / aspectRatio, 1)
+   * Computed as a % value to apply as `paddingTop`
+   */
+  const outerAspectRatio = React.useMemo<DimensionValue>(() => {
+    // capped to square or shorter
+    const ratio = Math.min(1 / aspectRatio, 1)
+    return `${ratio * 100}%`
   }, [aspectRatio])
+  /**
+   * Computed as a CSS `aspectRatio` value
+   */
   const innerAspectRatio = React.useMemo(() => {
+    // max of 3:4 ratio
     return Math.max(aspectRatio, 0.75)
   }, [aspectRatio])
 
   return (
     <View style={[a.w_full]}>
-      <View
+      <View style={[a.overflow_hidden, {paddingTop: outerAspectRatio}]}>
-        style={[a.overflow_hidden, {paddingTop: `${outerAspectRatio * 100}%`}]}>
         <View style={[a.absolute, a.inset_0, a.flex_row]}>
           <View
             style={[
@@ -113,8 +121,9 @@ export function AutoSizedImage({
         onPress={onPress}
         onLongPress={onLongPress}
         onPressIn={onPressIn}
+        // alt here is what screen readers actually use
         accessibilityLabel={image.alt}
-        accessibilityHint={_(msg`Tap to view fully`)}
+        accessibilityHint={_(msg`Tap to view full image`)}
         style={[
           a.w_full,
           a.rounded_sm,
@@ -133,8 +142,9 @@ export function AutoSizedImage({
           onPress={onPress}
           onLongPress={onLongPress}
           onPressIn={onPressIn}
+          // alt here is what screen readers actually use
           accessibilityLabel={image.alt}
-          accessibilityHint={_(msg`Tap to view fully`)}
+          accessibilityHint={_(msg`Tap to view full image`)}
           style={[a.h_full]}>
           {contents}
           {children}

src/view/com/util/images/Gallery.tsx

@@ -7,7 +7,7 @@ import {useLingui} from '@lingui/react'
 
 import {isWeb} from '#/platform/detection'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 
 type EventFunction = (index: number) => void
 
@@ -28,6 +28,7 @@ export const GalleryItem: FC<GalleryItemProps> = ({
   onPressIn,
   onLongPress,
 }) => {
+  const t = useTheme()
   const {_} = useLingui()
   const largeAltBadge = useLargeAltBadgeEnabled()
   const image = images[index]
@@ -37,13 +38,19 @@ export const GalleryItem: FC<GalleryItemProps> = ({
         onPress={onPress ? () => onPress(index) : undefined}
         onPressIn={onPressIn ? () => onPressIn(index) : undefined}
         onLongPress={onLongPress ? () => onLongPress(index) : undefined}
-        style={a.flex_1}
+        style={[
+          a.flex_1,
+          a.rounded_xs,
+          a.overflow_hidden,
+          t.atoms.bg_contrast_25,
+          imageStyle,
+        ]}
         accessibilityRole="button"
         accessibilityLabel={image.alt || _(msg`Image`)}
         accessibilityHint="">
         <Image
           source={{uri: image.thumb}}
-          style={[a.flex_1, a.rounded_xs, imageStyle]}
+          style={[a.flex_1]}
           accessible={true}
           accessibilityLabel={image.alt}
           accessibilityHint=""