From 1fc694d488e55087845f29de1fdb11d3140cc771 Mon Sep 17 00:00:00 2001
From: Ansh <anshnanda10@gmail.com>
Date: Thu, 1 Jun 2023 08:47:17 -0700
Subject: [PATCH] [APP-656] make alt text expandable (#821)
* make alt text expandable
* clean code
---
src/view/com/lightbox/Lightbox.web.tsx | 21 ++++++++++++++++++---
1 file changed, 18 insertions(+), 3 deletions(-)
diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx
index 61446519..f6aa26a3 100644
--- a/src/view/com/lightbox/Lightbox.web.tsx
+++ b/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}>