Add alt text support and rework image layout (#503)

* Add alt text support and rework image layout

* Add additional BottomSheet implementation to account for nested Composer modal

* Use mobile gallery layout on mobile web

* Missing key

* Fix lint

* Move altimage modal into the standard modal system

* Fix overflow wrapping of images

* Fixes to the alt-image modal

* Remove unnecessary switch

* Restore old imagelayoutgrid code

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

1 files changed, 28 insertions, 13 deletions

diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx
index 17e3e809b..8c31f5614 100644
--- a/src/view/com/util/images/AutoSizedImage.tsx
+++ b/src/view/com/util/images/AutoSizedImage.tsx
@@ -9,29 +9,33 @@ import {
 import {Image} from 'expo-image'
 import {clamp} from 'lib/numbers'
 import {useStores} from 'state/index'
-import {Dim} from 'lib/media/manip'
+import {Dimensions} from 'lib/media/types'
 
 export const DELAY_PRESS_IN = 500
 const MIN_ASPECT_RATIO = 0.33 // 1/3
 const MAX_ASPECT_RATIO = 5 // 5/1
 
+interface Props {
+  alt?: string
+  uri: string
+  onPress?: () => void
+  onLongPress?: () => void
+  onPressIn?: () => void
+  style?: StyleProp<ViewStyle>
+  children?: React.ReactNode
+}
+
 export function AutoSizedImage({
+  alt,
   uri,
   onPress,
   onLongPress,
   onPressIn,
   style,
   children = null,
-}: {
-  uri: string
-  onPress?: () => void
-  onLongPress?: () => void
-  onPressIn?: () => void
-  style?: StyleProp<ViewStyle>
-  children?: React.ReactNode
-}) {
+}: Props) {
   const store = useStores()
-  const [dim, setDim] = React.useState<Dim | undefined>(
+  const [dim, setDim] = React.useState<Dimensions | undefined>(
     store.imageSizes.get(uri),
   )
   const [aspectRatio, setAspectRatio] = React.useState<number>(
@@ -59,20 +63,31 @@ export function AutoSizedImage({
         onPressIn={onPressIn}
         delayPressIn={DELAY_PRESS_IN}
         style={[styles.container, style]}>
-        <Image style={[styles.image, {aspectRatio}]} source={uri} />
+        <Image
+          style={[styles.image, {aspectRatio}]}
+          source={uri}
+          accessible={true} // Must set for `accessibilityLabel` to work
+          accessibilityLabel={alt}
+        />
         {children}
       </TouchableOpacity>
     )
   }
+
   return (
     <View style={[styles.container, style]}>
-      <Image style={[styles.image, {aspectRatio}]} source={{uri}} />
+      <Image
+        style={[styles.image, {aspectRatio}]}
+        source={{uri}}
+        accessible={true} // Must set for `accessibilityLabel` to work
+        accessibilityLabel={alt}
+      />
       {children}
     </View>
   )
 }
 
-function calc(dim: Dim) {
+function calc(dim: Dimensions) {
   if (dim.width === 0 || dim.height === 0) {
     return 1
   }