Fixed #315

src/components/Button.tsx

@@ -29,6 +29,7 @@ export interface Props {
 
   strokeWidth?: number
   size?: 'S' | 'M' | 'L'
+  fontBold?: boolean
   spacing?: 'XS' | 'S' | 'M' | 'L'
   round?: boolean
   overlay?: boolean
@@ -48,6 +49,7 @@ const Button: React.FC<Props> = ({
   disabled = false,
   strokeWidth,
   size = 'M',
+  fontBold = false,
   spacing = 'S',
   round = false,
   overlay = false,
@@ -122,6 +124,7 @@ const Button: React.FC<Props> = ({
                   StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1),
                 opacity: loading ? 0 : 1
               }}
+              fontWeight={fontBold ? 'Bold' : 'Normal'}
               children={content}
               testID='text'
             />

src/components/Timeline/Shared/Attachment/AltText.tsx

@@ -0,0 +1,38 @@
+import Button from '@components/Button'
+import { useNavigation } from '@react-navigation/native'
+import { StackNavigationProp } from '@react-navigation/stack'
+import { RootStackParamList } from '@utils/navigation/navigators'
+import { StyleConstants } from '@utils/styles/constants'
+
+export interface Props {
+  sensitiveShown: boolean
+  text?: string
+}
+
+const AttachmentAltText: React.FC<Props> = ({ sensitiveShown, text }) => {
+  if (!text) {
+    return null
+  }
+
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
+
+  return !sensitiveShown ? (
+    <Button
+      style={{
+        position: 'absolute',
+        right: StyleConstants.Spacing.S,
+        bottom: StyleConstants.Spacing.S
+      }}
+      overlay
+      size='S'
+      type='text'
+      content='ALT'
+      fontBold
+      onPress={() => {
+        navigation.navigate('Screen-Actions', { type: 'alt_text', text })
+      }}
+    />
+  ) : null
+}
+
+export default AttachmentAltText

src/components/Timeline/Shared/Attachment/Audio.tsx

@@ -8,6 +8,7 @@ import { Audio } from 'expo-av'
 import React, { useCallback, useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Blurhash } from 'react-native-blurhash'
+import AttachmentAltText from './AltText'
 import attachmentAspectRatio from './aspectRatio'
 
 export interface Props {
@@ -127,6 +128,10 @@ const AttachmentAudio: React.FC<Props> = ({
           />
         </View>
       ) : null}
+      <AttachmentAltText
+        sensitiveShown={sensitiveShown}
+        text={audio.description}
+      />
     </View>
   )
 }

src/components/Timeline/Shared/Attachment/Image.tsx

@@ -3,6 +3,7 @@ import GracefullyImage from '@components/GracefullyImage'
 import { StyleConstants } from '@utils/styles/constants'
 import React from 'react'
 import { View } from 'react-native'
+import AttachmentAltText from './AltText'
 import attachmentAspectRatio from './aspectRatio'
 
 export interface Props {
@@ -34,7 +35,9 @@ const AttachmentImage = ({
         uri={{ original: image.preview_url, remote: image.remote_url }}
         blurhash={image.blurhash}
         onPress={() => {
-          analytics('timeline_shared_attachment_image_press', { id: image.id })
+          analytics('timeline_shared_attachment_image_press', {
+            id: image.id
+          })
           navigateToImagesViewer(image.id)
         }}
         style={{
@@ -48,6 +51,10 @@ const AttachmentImage = ({
               : image.meta.original.width / image.meta.original.height
         }}
       />
+      <AttachmentAltText
+        sensitiveShown={sensitiveShown}
+        text={image.description}
+      />
     </View>
   )
 }

src/components/Timeline/Shared/Attachment/Unsupported.tsx

@@ -8,6 +8,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { View } from 'react-native'
 import { Blurhash } from 'react-native-blurhash'
+import AttachmentAltText from './AltText'
 import attachmentAspectRatio from './aspectRatio'
 
 export interface Props {
@@ -75,6 +76,10 @@ const AttachmentUnsupported: React.FC<Props> = ({
           ) : null}
         </>
       ) : null}
+      <AttachmentAltText
+        sensitiveShown={sensitiveShown}
+        text={attachment.description}
+      />
     </View>
   )
 }

src/components/Timeline/Shared/Attachment/Video.tsx

@@ -2,16 +2,11 @@ import Button from '@components/Button'
 import { StyleConstants } from '@utils/styles/constants'
 import { ResizeMode, Video, VideoFullscreenUpdate } from 'expo-av'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import {
-  AppState,
-  AppStateStatus,
-  Pressable,
-  StyleSheet,
-  View
-} from 'react-native'
+import { AppState, AppStateStatus, Pressable, View } from 'react-native'
 import { Blurhash } from 'react-native-blurhash'
 import attachmentAspectRatio from './aspectRatio'
 import analytics from '@components/analytics'
+import AttachmentAltText from './AltText'
 
 export interface Props {
   total: number
@@ -88,10 +83,12 @@ const AttachmentVideo: React.FC<Props> = ({
 
   return (
     <View
-      style={[
-        styles.base,
-        { aspectRatio: attachmentAspectRatio({ total, index }) }
-      ]}
+      style={{
+        flex: 1,
+        flexBasis: '50%',
+        padding: StyleConstants.Spacing.XS / 2,
+        aspectRatio: attachmentAspectRatio({ total, index })
+      }}
     >
       <Video
         accessibilityLabel={video.description}
@@ -127,7 +124,17 @@ const AttachmentVideo: React.FC<Props> = ({
           }
         }}
       />
-      <Pressable style={styles.overlay} onPress={gifv ? playOnPress : null}>
+      <Pressable
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center'
+        }}
+        onPress={gifv ? playOnPress : null}
+      >
         {sensitiveShown ? (
           video.blurhash ? (
             <Blurhash
@@ -149,25 +156,13 @@ const AttachmentVideo: React.FC<Props> = ({
             loading={videoLoading}
           />
         ) : null}
+        <AttachmentAltText
+          sensitiveShown={sensitiveShown}
+          text={video.description}
+        />
       </Pressable>
     </View>
   )
 }
 
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexBasis: '50%',
-    padding: StyleConstants.Spacing.XS / 2
-  },
-  overlay: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-})
-
 export default AttachmentVideo