forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[APP-656] make alt text expandable (#821)
* make alt text expandable
* clean code
+18
-3
+18
-3
src/view/com/lightbox/Lightbox.web.tsx
+18
-3
src/view/com/lightbox/Lightbox.web.tsx
···
1
-
import React, {useCallback, useEffect} from 'react'
1
+
import React, {useCallback, useEffect, useState} from 'react'
2
2
import {
3
3
Image,
4
4
TouchableOpacity,
5
5
TouchableWithoutFeedback,
6
6
StyleSheet,
7
7
View,
8
+
Pressable,
8
9
} from 'react-native'
9
10
import {observer} from 'mobx-react-lite'
10
11
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
···
61
62
initialIndex: number
62
63
onClose: () => void
63
64
}) {
64
-
const [index, setIndex] = React.useState<number>(initialIndex)
65
+
const [index, setIndex] = useState<number>(initialIndex)
66
+
const [isAltExpanded, setAltExpanded] = useState(false)
65
67
66
68
const canGoLeft = index >= 1
67
69
const canGoRight = index < imgs.length - 1
···
140
142
</TouchableWithoutFeedback>
141
143
{imgs[index].alt ? (
142
144
<View style={styles.footer}>
143
-
<Text style={s.white}>{imgs[index].alt}</Text>
145
+
<Pressable
146
+
accessibilityRole="button"
147
+
accessibilityLabel="Expand alt text"
148
+
accessibilityHint="If alt text is long, toggles alt text expanded state"
149
+
onPress={() => {
150
+
setAltExpanded(!isAltExpanded)
151
+
}}>
152
+
<Text
153
+
style={s.white}
154
+
numberOfLines={isAltExpanded ? 0 : 3}
155
+
ellipsizeMode="tail">
156
+
{imgs[index].alt}
157
+
</Text>
158
+
</Pressable>
144
159
</View>
145
160
) : null}
146
161
<View style={styles.closeBtn}>