diff options
Diffstat (limited to 'src/view/com/util/images')
-rw-r--r-- | src/view/com/util/images/AutoSizedImage.tsx | 9 | ||||
-rw-r--r-- | src/view/com/util/images/Gallery.tsx | 13 | ||||
-rw-r--r-- | src/view/com/util/images/Image.tsx | 4 | ||||
-rw-r--r-- | src/view/com/util/images/ImageHorzList.tsx | 22 |
4 files changed, 42 insertions, 6 deletions
diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx index 8c31f5614..e6aba46f3 100644 --- a/src/view/com/util/images/AutoSizedImage.tsx +++ b/src/view/com/util/images/AutoSizedImage.tsx @@ -62,12 +62,17 @@ export function AutoSizedImage({ onLongPress={onLongPress} onPressIn={onPressIn} delayPressIn={DELAY_PRESS_IN} - style={[styles.container, style]}> + style={[styles.container, style]} + accessible={true} + accessibilityLabel="Share image" + accessibilityHint="Opens ways of sharing image"> <Image style={[styles.image, {aspectRatio}]} source={uri} accessible={true} // Must set for `accessibilityLabel` to work + accessibilityIgnoresInvertColors accessibilityLabel={alt} + accessibilityHint="" /> {children} </TouchableOpacity> @@ -80,7 +85,9 @@ export function AutoSizedImage({ style={[styles.image, {aspectRatio}]} source={{uri}} accessible={true} // Must set for `accessibilityLabel` to work + accessibilityIgnoresInvertColors accessibilityLabel={alt} + accessibilityHint="" /> {children} </View> diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx index 78ced0668..5b6c3384d 100644 --- a/src/view/com/util/images/Gallery.tsx +++ b/src/view/com/util/images/Gallery.tsx @@ -41,16 +41,25 @@ export const GalleryItem: FC<GalleryItemProps> = ({ delayPressIn={DELAY_PRESS_IN} onPress={() => onPress?.(index)} onPressIn={() => onPressIn?.(index)} - onLongPress={() => onLongPress?.(index)}> + onLongPress={() => onLongPress?.(index)} + accessibilityRole="button" + accessibilityLabel="View image" + accessibilityHint=""> <Image source={{uri: image.thumb}} style={imageStyle} accessible={true} accessibilityLabel={image.alt} + accessibilityHint="" + accessibilityIgnoresInvertColors /> </TouchableOpacity> {image.alt === '' ? null : ( - <Pressable onPress={onPressAltText}> + <Pressable + onPress={onPressAltText} + accessibilityRole="button" + accessibilityLabel="View alt text" + accessibilityHint="Opens modal with alt text"> <Text style={styles.alt}>ALT</Text> </Pressable> )} diff --git a/src/view/com/util/images/Image.tsx b/src/view/com/util/images/Image.tsx index e3d0d7fcc..e779fa378 100644 --- a/src/view/com/util/images/Image.tsx +++ b/src/view/com/util/images/Image.tsx @@ -8,5 +8,7 @@ export function HighPriorityImage({source, ...props}: HighPriorityImageProps) { const updatedSource = { uri: typeof source === 'object' && source ? source.uri : '', } satisfies ImageSource - return <Image source={updatedSource} {...props} /> + return ( + <Image accessibilityIgnoresInvertColors source={updatedSource} {...props} /> + ) } diff --git a/src/view/com/util/images/ImageHorzList.tsx b/src/view/com/util/images/ImageHorzList.tsx index 5c232e0b4..88494bba3 100644 --- a/src/view/com/util/images/ImageHorzList.tsx +++ b/src/view/com/util/images/ImageHorzList.tsx @@ -16,15 +16,33 @@ interface Props { } export function ImageHorzList({images, onPress, style}: Props) { + const numImages = images.length return ( <View style={[styles.flexRow, style]}> {images.map(({thumb, alt}, i) => ( - <TouchableWithoutFeedback key={i} onPress={() => onPress?.(i)}> + <TouchableWithoutFeedback + key={i} + onPress={() => onPress?.(i)} + accessible={true} + accessibilityLabel={`Open image ${i} of ${numImages}`} + accessibilityHint="Opens image in viewer" + accessibilityActions={[{name: 'press', label: 'Press'}]} + onAccessibilityAction={action => { + switch (action.nativeEvent.actionName) { + case 'press': + onPress?.(0) + break + default: + break + } + }}> <Image source={{uri: thumb}} style={styles.image} accessible={true} - accessibilityLabel={alt} + accessibilityIgnoresInvertColors + accessibilityHint={alt} + accessibilityLabel="" /> </TouchableWithoutFeedback> ))} |