about summary refs log tree commit diff
path: root/src/view/com/util/images
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/com/util/images')
-rw-r--r--src/view/com/util/images/AutoSizedImage.tsx9
-rw-r--r--src/view/com/util/images/Gallery.tsx13
-rw-r--r--src/view/com/util/images/Image.tsx4
-rw-r--r--src/view/com/util/images/ImageHorzList.tsx22
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>
       ))}