[APP-656] make alt text expandable (#821)

* make alt text expandable

* clean code

src/view/com/lightbox/Lightbox.web.tsx

@@ -1,10 +1,11 @@
-import React, {useCallback, useEffect} from 'react'
+import React, {useCallback, useEffect, useState} from 'react'
 import {
   Image,
   TouchableOpacity,
   TouchableWithoutFeedback,
   StyleSheet,
   View,
+  Pressable,
 } from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
@@ -61,7 +62,8 @@ function LightboxInner({
   initialIndex: number
   onClose: () => void
 }) {
-  const [index, setIndex] = React.useState<number>(initialIndex)
+  const [index, setIndex] = useState<number>(initialIndex)
+  const [isAltExpanded, setAltExpanded] = useState(false)
 
   const canGoLeft = index >= 1
   const canGoRight = index < imgs.length - 1
@@ -140,7 +142,20 @@ function LightboxInner({
       </TouchableWithoutFeedback>
       {imgs[index].alt ? (
         <View style={styles.footer}>
-          <Text style={s.white}>{imgs[index].alt}</Text>
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Expand alt text"
+            accessibilityHint="If alt text is long, toggles alt text expanded state"
+            onPress={() => {
+              setAltExpanded(!isAltExpanded)
+            }}>
+            <Text
+              style={s.white}
+              numberOfLines={isAltExpanded ? 0 : 3}
+              ellipsizeMode="tail">
+              {imgs[index].alt}
+            </Text>
+          </Pressable>
         </View>
       ) : null}
       <View style={styles.closeBtn}>