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

src/i18n/en/screens/actions.json

@@ -1,8 +1,7 @@
 {
   "content": {
-    "button": {
-      "apply": "$t(common:buttons.apply)",
-      "cancel": "$t(common:buttons.cancel)"
+    "altText": {
+      "heading": "Alternative Text"
     },
     "notificationsFilter": {
       "heading": "Show notification types",

src/screens/Actions.tsx

@@ -7,7 +7,7 @@ import {
 } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback, useEffect, useMemo } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Dimensions, StyleSheet, View } from 'react-native'
 import {
@@ -30,6 +30,7 @@ import {
 } from 'react-native-safe-area-context'
 import { useSelector } from 'react-redux'
 import ActionsAccount from './Actions/Account'
+import ActionsAltText from './Actions/AltText'
 import ActionsDomain from './Actions/Domain'
 import ActionsNotificationsFilter from './Actions/NotificationsFilter'
 import ActionsShare from './Actions/Share'
@@ -173,6 +174,8 @@ const ScreenActions = ({
         )
       case 'notifications_filter':
         return <ActionsNotificationsFilter />
+      case 'alt_text':
+        return <ActionsAltText text={params.text} />
     }
   }
 

src/screens/Actions/AltText.tsx

@@ -0,0 +1,44 @@
+import Button from '@components/Button'
+import MenuContainer from '@components/Menu/Container'
+import MenuHeader from '@components/Menu/Header'
+import CustomText from '@components/Text'
+import { useNavigation } from '@react-navigation/native'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Dimensions } from 'react-native'
+import { ScrollView } from 'react-native-gesture-handler'
+
+export interface Props {
+  text: string
+}
+
+const ActionsAltText: React.FC<Props> = ({ text }) => {
+  const navigation = useNavigation()
+  const { t } = useTranslation('screenActions')
+  const { colors } = useTheme()
+
+  return (
+    <>
+      <MenuContainer>
+        <MenuHeader heading={t(`content.altText.heading`)} />
+        <ScrollView style={{ maxHeight: Dimensions.get('window').height / 2 }}>
+          <CustomText style={{ color: colors.primaryDefault }}>
+            {text}
+          </CustomText>
+        </ScrollView>
+      </MenuContainer>
+      <Button
+        type='text'
+        content={t('common:buttons.OK')}
+        onPress={() => navigation.goBack()}
+        style={{
+          marginHorizontal: StyleConstants.Spacing.Global.PagePadding * 2
+        }}
+      />
+    </>
+  )
+}
+
+export default ActionsAltText

src/screens/Actions/NotificationsFilter.tsx

@@ -10,7 +10,6 @@ import {
 } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import React, { useMemo } from 'react'
-import { StyleSheet } from 'react-native'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { useQueryClient } from 'react-query'
@@ -100,20 +99,16 @@ const ActionsNotificationsFilter: React.FC = () => {
       </MenuContainer>
       <Button
         type='text'
-        content={t('content.button.apply')}
+        content={t('common:buttons.apply')}
         onPress={() => {
           queryClient.resetQueries(queryKey)
         }}
-        style={styles.button}
+        style={{
+          marginHorizontal: StyleConstants.Spacing.Global.PagePadding * 2
+        }}
       />
     </>
   )
 }
 
-const styles = StyleSheet.create({
-  button: {
-    marginHorizontal: StyleConstants.Spacing.Global.PagePadding * 2
-  }
-})
-
 export default ActionsNotificationsFilter

src/utils/navigation/navigators.ts

@@ -20,6 +20,10 @@ export type RootStackParamList = {
     | {
         type: 'notifications_filter'
       }
+    | {
+        type: 'alt_text'
+        text: string
+      }
   'Screen-Announcements': { showAll: boolean }
   'Screen-Compose':
     | {