Refine accessibility

src/components/Account.tsx

@@ -31,6 +31,7 @@ const ComponentAccount: React.FC<Props> = ({
 
   return (
     <Pressable
+      accessibilityRole='button'
       style={[styles.itemDefault, styles.itemAccount]}
       onPress={customOnPress || onPress}
     >

src/components/Button.tsx

@@ -4,6 +4,7 @@ import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect, useMemo, useRef } from 'react'
 import {
+  AccessibilityProps,
   Pressable,
   StyleProp,
   StyleSheet,
@@ -14,15 +15,18 @@ import {
 import { Flow } from 'react-native-animated-spinkit'
 
 export interface Props {
+  accessibilityLabel?: AccessibilityProps['accessibilityLabel']
+  accessibilityHint?: AccessibilityProps['accessibilityHint']
+
   style?: StyleProp<ViewStyle>
 
   type: 'icon' | 'text'
   content: string
 
+  selected?: boolean
   loading?: boolean
   destructive?: boolean
   disabled?: boolean
-  active?: boolean
 
   strokeWidth?: number
   size?: 'S' | 'M' | 'L'
@@ -34,13 +38,15 @@ export interface Props {
 }
 
 const Button: React.FC<Props> = ({
+  accessibilityLabel,
+  accessibilityHint,
   style: customStyle,
   type,
   content,
+  selected,
   loading = false,
   destructive = false,
   disabled = false,
-  active = false,
   strokeWidth,
   size = 'M',
   spacing = 'S',
@@ -57,7 +63,7 @@ const Button: React.FC<Props> = ({
     } else {
       mounted.current = true
     }
-  }, [content, loading, disabled, active])
+  }, [content, loading, disabled])
 
   const loadingSpinkit = useMemo(
     () => (
@@ -68,40 +74,22 @@ const Button: React.FC<Props> = ({
     [mode]
   )
 
-  const colorContent = useMemo(() => {
+  const mainColor = useMemo(() => {
-    if (active) {
+    if (selected) {
       return theme.blue
+    } else if (overlay) {
+      return theme.primaryOverlay
+    } else if (disabled || loading) {
+      return theme.disabled
     } else {
-      if (overlay) {
+      if (destructive) {
-        return theme.primaryOverlay
+        return theme.red
       } else {
-        if (disabled) {
+        return theme.primaryDefault
-          return theme.secondary
-        } else {
-          if (destructive) {
-            return theme.red
-          } else {
-            return theme.primaryDefault
-          }
-        }
       }
     }
-  }, [mode, disabled])
+  }, [mode, disabled, loading, selected])
-  const colorBorder = useMemo(() => {
+
-    if (active) {
-      return theme.blue
-    } else {
-      if (disabled || loading) {
-        return theme.secondary
-      } else {
-        if (destructive) {
-          return theme.red
-        } else {
-          return theme.primaryDefault
-        }
-      }
-    }
-  }, [mode, loading, disabled])
   const colorBackground = useMemo(() => {
     if (overlay) {
       return theme.backgroundOverlayInvert
@@ -117,7 +105,7 @@ const Button: React.FC<Props> = ({
           <>
             <Icon
               name={content}
-              color={colorContent}
+              color={mainColor}
               strokeWidth={strokeWidth}
               style={{ opacity: loading ? 0 : 1 }}
               size={StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1)}
@@ -130,7 +118,7 @@ const Button: React.FC<Props> = ({
           <>
             <Text
               style={{
-                color: colorContent,
+                color: mainColor,
                 fontSize:
                   StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1),
                 fontWeight: destructive
@@ -145,7 +133,7 @@ const Button: React.FC<Props> = ({
           </>
         )
     }
-  }, [mode, content, loading, disabled, active])
+  }, [mode, content, loading, disabled])
 
   enum spacingMapping {
     XS = 'S',
@@ -156,11 +144,20 @@ const Button: React.FC<Props> = ({
 
   return (
     <Pressable
+      accessible
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole='button'
+      accessibilityState={{
+        selected,
+        disabled: disabled || selected,
+        busy: loading
+      }}
       style={[
         styles.button,
         {
           borderWidth: overlay ? 0 : 1,
-          borderColor: colorBorder,
+          borderColor: mainColor,
           backgroundColor: colorBackground,
           paddingVertical: StyleConstants.Spacing[spacing],
           paddingHorizontal:
@@ -171,7 +168,7 @@ const Button: React.FC<Props> = ({
       testID='base'
       onPress={onPress}
       children={children}
-      disabled={disabled || active || loading}
+      disabled={selected || disabled || loading}
     />
   )
 }

src/components/GracefullyImage.tsx

@@ -1,6 +1,7 @@
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useMemo, useRef, useState } from 'react'
 import {
+  AccessibilityProps,
   Image,
   ImageStyle,
   Pressable,
@@ -18,6 +19,9 @@ import { Blurhash } from 'react-native-blurhash'
 // preview, original, remote -> first show preview, then original, if original failed, then remote
 
 export interface Props {
+  accessibilityLabel?: AccessibilityProps['accessibilityLabel']
+  accessibilityHint?: AccessibilityProps['accessibilityHint']
+
   hidden?: boolean
   uri: { preview?: string; original?: string; remote?: string }
   blurhash?: string
@@ -36,6 +40,8 @@ export interface Props {
 
 const GracefullyImage = React.memo(
   ({
+    accessibilityLabel,
+    accessibilityHint,
     hidden = false,
     uri,
     blurhash,
@@ -103,10 +109,7 @@ const GracefullyImage = React.memo(
         } else {
           return (
             <View
-              style={[
+              style={[styles.blurhash, { backgroundColor: theme.disabled }]}
-                styles.blurhash,
-                { backgroundColor: theme.disabled }
-              ]}
             />
           )
         }
@@ -117,6 +120,11 @@ const GracefullyImage = React.memo(
 
     return (
       <Pressable
+        {...(onPress
+          ? { accessibilityRole: 'imagebutton' }
+          : { accessibilityRole: 'image' })}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
         style={[style, dimension, { backgroundColor: theme.shimmerDefault }]}
         {...(onPress
           ? hidden

src/components/Hashtag.tsx

@@ -28,7 +28,11 @@ const ComponentHashtag: React.FC<Props> = ({
   }, [])
 
   return (
-    <Pressable style={styles.itemDefault} onPress={customOnPress || onPress}>
+    <Pressable
+      accessibilityRole='button'
+      style={styles.itemDefault}
+      onPress={customOnPress || onPress}
+    >
       <Text style={[styles.itemHashtag, { color: theme.primaryDefault }]}>
         #{hashtag.name}
       </Text>

src/components/Header/Right.tsx

@@ -2,10 +2,20 @@ import Icon from '@components/Icon'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useMemo } from 'react'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
+import {
+  AccessibilityProps,
+  Pressable,
+  StyleSheet,
+  Text,
+  View
+} from 'react-native'
 import { Flow } from 'react-native-animated-spinkit'
 
 export interface Props {
+  accessibilityLabel?: string
+  accessibilityHint?: string
+  accessibilityState?: AccessibilityProps['accessibilityState']
+
   type?: 'icon' | 'text'
   content: string
   native?: boolean
@@ -18,6 +28,11 @@ export interface Props {
 }
 
 const HeaderRight: React.FC<Props> = ({
+  // Accessibility - Start
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  // Accessibility - End
   type = 'icon',
   content,
   native = true,
@@ -75,6 +90,10 @@ const HeaderRight: React.FC<Props> = ({
 
   return (
     <Pressable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole='button'
+      accessibilityState={accessibilityState}
       onPress={onPress}
       children={children}
       disabled={disabled || loading}

src/components/Icon.tsx

@@ -1,8 +1,10 @@
 import React, { createElement } from 'react'
-import { StyleProp, View, ViewStyle } from 'react-native'
+import { AccessibilityProps, StyleProp, View, ViewStyle } from 'react-native'
 import * as FeatherIcon from 'react-native-feather'
 
 export interface Props {
+  accessibilityLabel?: AccessibilityProps['accessibilityLabel']
+
   name: string
   size: number
   color: string
@@ -12,6 +14,7 @@ export interface Props {
 }
 
 const Icon: React.FC<Props> = ({
+  accessibilityLabel,
   name,
   size,
   color,
@@ -21,6 +24,7 @@ const Icon: React.FC<Props> = ({
 }) => {
   return (
     <View
+      accessibilityLabel={accessibilityLabel}
       style={[
         style,
         {

src/components/Instance.tsx

@@ -1,5 +1,6 @@
 import Button from '@components/Button'
 import Icon from '@components/Icon'
+import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { useAppsQuery } from '@utils/queryHooks/apps'
 import { useInstanceQuery } from '@utils/queryHooks/instance'
 import { getInstances } from '@utils/slices/instancesSlice'
@@ -7,7 +8,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import * as WebBrowser from 'expo-web-browser'
 import { debounce } from 'lodash'
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { RefObject, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   Alert,
@@ -19,6 +20,7 @@ import {
   TextInput,
   View
 } from 'react-native'
+import { ScrollView } from 'react-native-gesture-handler'
 import { useSelector } from 'react-redux'
 import { Placeholder } from 'rn-placeholder'
 import analytics from './analytics'
@@ -26,16 +28,19 @@ import InstanceAuth from './Instance/Auth'
 import InstanceInfo from './Instance/Info'
 
 export interface Props {
+  scrollViewRef?: RefObject<ScrollView>
   disableHeaderImage?: boolean
   goBack?: boolean
 }
 
 const ComponentInstance: React.FC<Props> = ({
+  scrollViewRef,
   disableHeaderImage,
   goBack = false
 }) => {
   const { t } = useTranslation('componentInstance')
   const { mode, theme } = useTheme()
+  const { screenReaderEnabled } = useAccessibility()
 
   const instances = useSelector(getInstances, () => true)
   const [domain, setDomain] = useState<string>()
@@ -139,6 +144,8 @@ const ComponentInstance: React.FC<Props> = ({
       <View style={styles.base}>
         <View style={styles.inputRow}>
           <TextInput
+            accessible={false}
+            accessibilityRole='none'
             style={[
               styles.prefix,
               {
@@ -148,12 +155,8 @@ const ComponentInstance: React.FC<Props> = ({
               }
             ]}
             editable={false}
-            children={
+            placeholder='https://'
-              <Text
+            placeholderTextColor={theme.primaryDefault}
-                style={{ color: theme.primaryDefault }}
-                children='https://'
-              />
-            }
           />
           <TextInput
             style={[
@@ -172,10 +175,14 @@ const ComponentInstance: React.FC<Props> = ({
             keyboardType='url'
             textContentType='URL'
             onSubmitEditing={onSubmitEditing}
-            placeholder={t('server.textInput.placeholder')}
+            placeholder={' ' + t('server.textInput.placeholder')}
             placeholderTextColor={theme.secondary}
             returnKeyType='go'
             keyboardAppearance={mode}
+            {...(scrollViewRef && {
+              onFocus: () =>
+                setTimeout(() => scrollViewRef.current?.scrollToEnd(), 150)
+            })}
           />
           <Button
             type='text'
@@ -229,9 +236,21 @@ const ComponentInstance: React.FC<Props> = ({
               color={theme.secondary}
               style={styles.disclaimerIcon}
             />
-            <Text style={[styles.disclaimerText, { color: theme.secondary }]}>
+            <Text
+              style={[styles.disclaimerText, { color: theme.secondary }]}
+              accessibilityRole='link'
+              onPress={() => {
+                if (screenReaderEnabled) {
+                  analytics('view_privacy')
+                  WebBrowser.openBrowserAsync(
+                    'https://tooot.app/privacy-policy'
+                  )
+                }
+              }}
+            >
               {t('server.disclaimer.base')}
               <Text
+                accessible
                 style={{ color: theme.blue }}
                 onPress={() => {
                   analytics('view_privacy')
@@ -265,8 +284,7 @@ const styles = StyleSheet.create({
   },
   prefix: {
     borderBottomWidth: 1,
-    ...StyleConstants.FontStyle.M,
+    ...StyleConstants.FontStyle.M
-    paddingRight: StyleConstants.Spacing.XS
   },
   textInput: {
     flex: 1,

src/components/Instance/Info.tsx

@@ -16,8 +16,10 @@ const InstanceInfo = React.memo(
     const { theme } = useTheme()
 
     return (
-      <View style={[styles.base, style]}>
+      <View style={[styles.base, style]} accessible>
-        <Text style={[styles.header, { color: theme.primaryDefault }]}>{header}</Text>
+        <Text style={[styles.header, { color: theme.primaryDefault }]}>
+          {header}
+        </Text>
         {content ? (
           <Text style={[styles.content, { color: theme.primaryDefault }]}>
             {content}

src/components/Menu/Container.tsx

@@ -7,7 +7,11 @@ export interface Props {
 }
 
 const MenuContainer: React.FC<Props> = ({ children }) => {
-  return <View style={styles.base}>{children}</View>
+  return (
+    <View style={styles.base}>
+      {children}
+    </View>
+  )
 }
 
 const styles = StyleSheet.create({

src/components/Menu/Row.tsx

@@ -1,4 +1,5 @@
 import Icon from '@components/Icon'
+import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { ColorDefinitions } from '@utils/styles/themes'
@@ -41,6 +42,7 @@ const MenuRow: React.FC<Props> = ({
   onPress
 }) => {
   const { theme } = useTheme()
+  const { screenReaderEnabled } = useAccessibility()
 
   const loadingSpinkit = useMemo(
     () => (
@@ -55,11 +57,22 @@ const MenuRow: React.FC<Props> = ({
   )
 
   return (
-    <View style={styles.base}>
+    <View
+      style={styles.base}
+      accessible
+      accessibilityRole={switchValue ? 'switch' : 'button'}
+      accessibilityState={switchValue ? { checked: switchValue } : undefined}
+    >
       <TapGestureHandler
-        onHandlerStateChange={({ nativeEvent }) =>
+        onHandlerStateChange={async ({ nativeEvent }) => {
-          nativeEvent.state === State.ACTIVE && !loading && onPress && onPress()
+          if (nativeEvent.state === State.ACTIVE && !loading) {
-        }
+            if (screenReaderEnabled && switchOnValueChange) {
+              switchOnValueChange()
+            } else {
+              if (onPress) onPress()
+            }
+          }
+        }}
       >
         <View style={styles.core}>
           <View style={styles.front}>

src/components/Message.tsx

@@ -3,6 +3,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { getTheme } from '@utils/styles/themes'
 import React from 'react'
+import { AccessibilityInfo } from 'react-native'
 import FlashMessage, {
   hideMessage,
   showMessage
@@ -36,6 +37,8 @@ const displayMessage = ({
       mode: 'light' | 'dark'
       type: 'success' | 'error' | 'warning'
     }) => {
+  AccessibilityInfo.announceForAccessibility(message + '.' + description)
+
   enum iconMapping {
     success = 'CheckCircle',
     error = 'XCircle',
@@ -98,7 +101,10 @@ const Message = React.memo(
           ...StyleConstants.FontStyle.M,
           fontWeight: StyleConstants.Font.Weight.Bold
         }}
-        textStyle={{ color: theme.primaryDefault, ...StyleConstants.FontStyle.S }}
+        textStyle={{
+          color: theme.primaryDefault,
+          ...StyleConstants.FontStyle.S
+        }}
         // @ts-ignore
         textProps={{ numberOfLines: 2 }}
       />

src/components/Parse/Emojis.tsx

@@ -4,6 +4,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { adaptiveScale } from '@utils/styles/scaling'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text } from 'react-native'
 import FastImage from 'react-native-fast-image'
 import { useSelector } from 'react-redux'
@@ -27,6 +28,7 @@ const ParseEmojis = React.memo(
     adaptiveSize = false,
     fontBold = false
   }: Props) => {
+    const { t } = useTranslation('componentParse')
     const { reduceMotionEnabled } = useAccessibility()
 
     const adaptiveFontsize = useSelector(getSettingsFontsize)
@@ -69,10 +71,10 @@ const ParseEmojis = React.memo(
                   return emojiShortcode === `:${emoji.shortcode}:`
                 })
                 if (emojiIndex === -1) {
-                  return <Text key={emojiShortcode}>{emojiShortcode}</Text>
+                  return <Text key={emojiShortcode + i}>{emojiShortcode}</Text>
                 } else {
                   if (i === 0) {
-                    return <Text key={emojiShortcode}> </Text>
+                    return <Text key={emojiShortcode + i}> </Text>
                   } else {
                     const uri = reduceMotionEnabled
                       ? emojis[emojiIndex].static_url
@@ -80,7 +82,7 @@ const ParseEmojis = React.memo(
                     if (validUrl.isHttpsUri(uri)) {
                       return (
                         <FastImage
-                          key={emojiShortcode}
+                          key={emojiShortcode + i}
                           source={{ uri }}
                           style={styles.image}
                         />
@@ -91,7 +93,7 @@ const ParseEmojis = React.memo(
                   }
                 }
               } else {
-                return <Text key={str}>{str}</Text>
+                return <Text key={i}>{str}</Text>
               }
             })
         ) : (

src/components/Parse/HTML.tsx

@@ -53,6 +53,7 @@ const renderNode = ({
             : true
           return (
             <Text
+              accessible
               key={index}
               style={{
                 color: theme.blue,
@@ -251,6 +252,7 @@ const ParseHTML = React.memo(
             />
             {expandAllow ? (
               <Pressable
+                accessibilityLabel=''
                 onPress={() => {
                   analytics('status_readmore', { allow: expandAllow, expanded })
                   layoutAnimation()

src/components/Timeline/Default.tsx

@@ -62,6 +62,7 @@ const TimelineDefault: React.FC<Props> = ({
 
   return (
     <Pressable
+      accessible={highlighted ? false : true}
       style={[
         styles.statusView,
         {
@@ -84,6 +85,7 @@ const TimelineDefault: React.FC<Props> = ({
         <TimelineAvatar
           queryKey={disableOnPress ? undefined : queryKey}
           account={actualStatus.account}
+          highlighted={highlighted}
         />
         <TimelineHeaderDefault
           queryKey={disableOnPress ? undefined : queryKey}

src/components/Timeline/Notifications.tsx

@@ -84,7 +84,11 @@ const TimelineNotifications: React.FC<Props> = ({
         }}
       >
         <View style={styles.header}>
-          <TimelineAvatar queryKey={queryKey} account={actualAccount} />
+          <TimelineAvatar
+            queryKey={queryKey}
+            account={actualAccount}
+            highlighted={highlighted}
+          />
           <TimelineHeaderNotification
             queryKey={queryKey}
             notification={notification}

src/components/Timeline/Shared/Actions.tsx

@@ -269,12 +269,28 @@ const TimelineActions: React.FC<Props> = ({
     >
       <View style={styles.actions}>
         <Pressable
+          {...(highlighted
+            ? {
+                accessibilityLabel: t(
+                  'shared.actions.reply.accessibilityLabel'
+                ),
+                accessibilityRole: 'button'
+              }
+            : { accessibilityLabel: '' })}
           style={styles.action}
           onPress={onPressReply}
           children={childrenReply}
         />
 
         <Pressable
+          {...(highlighted
+            ? {
+                accessibilityLabel: t(
+                  'shared.actions.reblogged.accessibilityLabel'
+                ),
+                accessibilityRole: 'button'
+              }
+            : { accessibilityLabel: '' })}
           style={styles.action}
           onPress={onPressReblog}
           children={childrenReblog}
@@ -284,12 +300,28 @@ const TimelineActions: React.FC<Props> = ({
         />
 
         <Pressable
+          {...(highlighted
+            ? {
+                accessibilityLabel: t(
+                  'shared.actions.favourited.accessibilityLabel'
+                ),
+                accessibilityRole: 'button'
+              }
+            : { accessibilityLabel: '' })}
           style={styles.action}
           onPress={onPressFavourite}
           children={childrenFavourite}
         />
 
         <Pressable
+          {...(highlighted
+            ? {
+                accessibilityLabel: t(
+                  'shared.actions.bookmarked.accessibilityLabel'
+                ),
+                accessibilityRole: 'button'
+              }
+            : { accessibilityLabel: '' })}
           style={styles.action}
           onPress={onPressBookmark}
           children={childrenBookmark}

src/components/Timeline/Shared/ActionsUsers.tsx

@@ -28,6 +28,16 @@ const TimelineActionsUsers = React.memo(
       <View style={styles.base}>
         {status.reblogs_count > 0 ? (
           <Text
+            accessibilityLabel={t(
+              'shared.actionsUsers.reblogged_by.accessibilityLabel',
+              {
+                count: status.reblogs_count
+              }
+            )}
+            accessibilityHint={t(
+              'shared.actionsUsers.reblogged_by.accessibilityHint'
+            )}
+            accessibilityRole='button'
             style={[styles.text, { color: theme.secondary }]}
             onPress={() => {
               analytics('timeline_shared_actionsusers_press_boosted', {
@@ -41,13 +51,23 @@ const TimelineActionsUsers = React.memo(
               })
             }}
           >
-            {t('shared.actionsUsers.reblogged_by', {
+            {t('shared.actionsUsers.reblogged_by.text', {
               count: status.reblogs_count
             })}
           </Text>
         ) : null}
         {status.favourites_count > 0 ? (
           <Text
+            accessibilityLabel={t(
+              'shared.actionsUsers.favourited_by.accessibilityLabel',
+              {
+                count: status.reblogs_count
+              }
+            )}
+            accessibilityHint={t(
+              'shared.actionsUsers.favourited_by.accessibilityHint'
+            )}
+            accessibilityRole='button'
             style={[styles.text, { color: theme.secondary }]}
             onPress={() => {
               analytics('timeline_shared_actionsusers_press_boosted', {
@@ -61,7 +81,7 @@ const TimelineActionsUsers = React.memo(
               })
             }}
           >
-            {t('shared.actionsUsers.favourited_by', {
+            {t('shared.actionsUsers.favourited_by.text', {
               count: status.favourites_count
             })}
           </Text>

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

@@ -52,6 +52,7 @@ const AttachmentAudio: React.FC<Props> = ({
 
   return (
     <View
+      accessibilityLabel={audio.description}
       style={[
         styles.base,
         {

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

@@ -23,6 +23,7 @@ const AttachmentImage = React.memo(
     return (
       <View style={styles.base}>
         <GracefullyImage
+          accessibilityLabel={image.description}
           hidden={sensitiveShown}
           uri={{ original: image.preview_url, remote: image.remote_url }}
           blurhash={image.blurhash}

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

@@ -47,7 +47,11 @@ const AttachmentUnsupported: React.FC<Props> = ({
           <Text
             style={[
               styles.text,
-              { color: attachment.blurhash ? theme.backgroundDefault : theme.primaryDefault }
+              {
+                color: attachment.blurhash
+                  ? theme.backgroundDefault
+                  : theme.primaryDefault
+              }
             ]}
           >
             {t('shared.attachment.unsupported.text')}
@@ -58,9 +62,9 @@ const AttachmentUnsupported: React.FC<Props> = ({
               content={t('shared.attachment.unsupported.button')}
               size='S'
               overlay
-              onPress={async () => {
+              onPress={() => {
                 analytics('timeline_shared_attachment_unsupported_press')
-                attachment.remote_url && (await openLink(attachment.remote_url))
+                attachment.remote_url && openLink(attachment.remote_url)
               }}
             />
           ) : null}

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

@@ -62,6 +62,7 @@ const AttachmentVideo: React.FC<Props> = ({
       ]}
     >
       <Video
+        accessibilityLabel={video.description}
         ref={videoPlayer}
         style={{
           width: '100%',

src/components/Timeline/Shared/Avatar.tsx

@@ -5,14 +5,17 @@ import { StackNavigationProp } from '@react-navigation/stack'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 
 export interface Props {
   queryKey?: QueryKeyTimeline
   account: Mastodon.Account
+  highlighted: boolean
 }
 
 const TimelineAvatar = React.memo(
-  ({ queryKey, account }: Props) => {
+  ({ queryKey, account, highlighted }: Props) => {
+    const { t } = useTranslation('componentTimeline')
     const navigation = useNavigation<
       StackNavigationProp<Nav.TabLocalStackParamList>
     >()
@@ -26,6 +29,14 @@ const TimelineAvatar = React.memo(
 
     return (
       <GracefullyImage
+        {...(highlighted && {
+          accessibilityLabel: t('shared.avatar.accessibilityLabel', {
+            name: account.display_name
+          }),
+          accessibilityHint: t('shared.avatar.accessibilityHint', {
+            name: account.display_name
+          })
+        })}
         onPress={onPress}
         uri={{ original: account.avatar_static }}
         dimension={{
@@ -35,8 +46,7 @@ const TimelineAvatar = React.memo(
         style={{
           borderRadius: StyleConstants.Avatar.M,
           overflow: 'hidden',
-          marginRight: StyleConstants.Spacing.S,
+          marginRight: StyleConstants.Spacing.S
-          backgroundColor: 'red'
         }}
       />
     )

src/components/Timeline/Shared/Card.tsx

@@ -18,6 +18,8 @@ const TimelineCard = React.memo(
 
     return (
       <Pressable
+        accessible
+        accessibilityRole='link'
         style={[styles.card, { borderColor: theme.border }]}
         onPress={async () => {
           analytics('timeline_shared_card_press')

src/components/Timeline/Shared/HeaderDefault.tsx

@@ -4,6 +4,7 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { Pressable, StyleSheet, View } from 'react-native'
 import HeaderSharedAccount from './HeaderShared/Account'
 import HeaderSharedApplication from './HeaderShared/Application'
@@ -19,6 +20,7 @@ export interface Props {
 
 const TimelineHeaderDefault = React.memo(
   ({ queryKey, rootQueryKey, status }: Props) => {
+    const { t } = useTranslation('componentTimeline')
     const navigation = useNavigation()
     const { theme } = useTheme()
 
@@ -36,6 +38,7 @@ const TimelineHeaderDefault = React.memo(
 
         {queryKey ? (
           <Pressable
+            accessibilityHint={t('shared.header.actions.accessibilityHint')}
             style={styles.action}
             onPress={() =>
               navigation.navigate('Screen-Actions', {

src/components/Timeline/Shared/HeaderShared/Account.tsx

@@ -2,6 +2,7 @@ import { ParseEmojis } from '@root/components/Parse'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, View } from 'react-native'
 
 export interface Props {
@@ -11,12 +12,19 @@ export interface Props {
 
 const HeaderSharedAccount = React.memo(
   ({ account, withoutName = false }: Props) => {
+    const { t } = useTranslation('componentTimeline')
     const { theme } = useTheme()
 
     return (
       <View style={styles.base}>
         {withoutName ? null : (
-          <Text style={styles.name} numberOfLines={1}>
+          <Text
+            accessibilityHint={t(
+              'shared.header.shared.account.name.accessibilityHint'
+            )}
+            style={styles.name}
+            numberOfLines={1}
+          >
             <ParseEmojis
               content={account.display_name || account.username}
               emojis={account.emojis}
@@ -25,6 +33,9 @@ const HeaderSharedAccount = React.memo(
           </Text>
         )}
         <Text
+          accessibilityHint={t(
+            'shared.header.shared.account.account.accessibilityHint'
+          )}
           style={[styles.acct, { color: theme.secondary }]}
           numberOfLines={1}
         >

src/components/Timeline/Shared/HeaderShared/Application.tsx

@@ -17,6 +17,7 @@ const HeaderSharedApplication = React.memo(
 
     return application && application.name !== 'Web' ? (
       <Text
+        accessibilityRole='link'
         onPress={async () => {
           analytics('timeline_shared_header_application_press', {
             application

src/components/Timeline/Shared/HeaderShared/Muted.tsx

@@ -2,6 +2,7 @@ import Icon from '@components/Icon'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet } from 'react-native'
 
 export interface Props {
@@ -10,10 +11,12 @@ export interface Props {
 
 const HeaderSharedMuted = React.memo(
   ({ muted }: Props) => {
+    const { t } = useTranslation('componentTimeline')
     const { theme } = useTheme()
 
     return muted ? (
       <Icon
+        accessibilityLabel={t('shared.header.shared.muted.accessibilityLabel')}
         name='VolumeX'
         size={StyleConstants.Font.Size.S}
         color={theme.secondary}

src/components/Timeline/Shared/HeaderShared/Visibility.tsx

@@ -2,6 +2,7 @@ import Icon from '@components/Icon'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet } from 'react-native'
 
 export interface Props {
@@ -10,12 +11,16 @@ export interface Props {
 
 const HeaderSharedVisibility = React.memo(
   ({ visibility }: Props) => {
+    const { t } = useTranslation('componentTimeline')
     const { theme } = useTheme()
 
     switch (visibility) {
       case 'private':
         return (
           <Icon
+            accessibilityLabel={t(
+              'shared.header.shared.visibility.private.accessibilityLabel'
+            )}
             name='Lock'
             size={StyleConstants.Font.Size.S}
             color={theme.secondary}
@@ -25,6 +30,9 @@ const HeaderSharedVisibility = React.memo(
       case 'direct':
         return (
           <Icon
+            accessibilityLabel={t(
+              'shared.header.shared.visibility.direct.accessibilityLabel'
+            )}
             name='Mail'
             size={StyleConstants.Font.Size.S}
             color={theme.secondary}

src/i18n/en/common.json

@@ -3,6 +3,9 @@
     "apply": "Apply",
     "cancel": "Cancel"
   },
+  "customEmoji": {
+    "accessibilityLabel": "Custom emoji {{emoji}}"
+  },
   "message": {
     "success": {
       "message": "{{function}} succeed"

src/i18n/en/components/timeline.json

@@ -29,19 +29,33 @@
       }
     },
     "actions": {
-      "favourited": {
+      "reply": {
-        "function": "Favourite toot"
+        "accessibilityLabel": "Reply to this toot"
       },
       "reblogged": {
+        "accessibilityLabel": "Boost this toot",
         "function": "Boost toot"
       },
+      "favourited": {
+        "accessibilityLabel": "Add this toot to favourites",
+        "function": "Favourite toot"
+      },
       "bookmarked": {
+        "accessibilityLabel": "Add this toot to bookmarks",
         "function": "Bookmark toot"
       }
     },
     "actionsUsers": {
-      "reblogged_by": "$t(screenTabs:shared.users.statuses.reblogged_by)",
+      "reblogged_by": {
-      "favourited_by": "$t(screenTabs:shared.users.statuses.favourited_by)"
+        "accessibilityLabel": "{{count}} users have boosted this toot",
+        "accessibilityHint": "Tap to know the users",
+        "text": "$t(screenTabs:shared.users.statuses.reblogged_by)"
+      },
+      "favourited_by": {
+        "accessibilityLabel": "{{count}} users have favourited this toot",
+        "accessibilityHint": "Tap to know the users",
+        "text": "$t(screenTabs:shared.users.statuses.favourited_by)"
+      }
     },
     "attachment": {
       "sensitive": {
@@ -52,13 +66,36 @@
         "button": "Try remote link"
       }
     },
+    "avatar": {
+      "accessibilityLabel": "Avatar of {{name}}",
+      "accessibilityHint": "Tap to go to {{name}}'s page"
+    },
     "content": {
       "expandHint": "hidden content"
     },
     "fullConversation": "Read conversations",
     "header": {
       "shared": {
-        "application": "Tooted with {{application}}"
+        "account": {
+          "name": {
+            "accessibilityHint": "User's display name"
+          },
+          "account": {
+            "accessibilityHint": "User's account"
+          }
+        },
+        "application": "Tooted with {{application}}",
+        "muted": {
+          "accessibilityLabel": "Toot muted"
+        },
+        "visibility": {
+          "direct": {
+            "accessibilityLabel": "Toot is a direct message"
+          },
+          "private": {
+            "accessibilityLabel": "Toot is visible to followers only"
+          }
+        }
       },
       "conversation": {
         "withAccounts": "With",
@@ -67,6 +104,7 @@
         }
       },
       "actions": {
+        "accessibilityHint": "Actions for this toot, such as its posted user, toot itself",
         "account": {
           "heading": "About user",
           "mute": {

src/i18n/en/screens/compose.json

@@ -45,15 +45,38 @@
       },
       "footer": {
         "attachments": {
-          "sensitive": "Mark attachments as sensitive"
+          "sensitive": "Mark attachments as sensitive",
+          "remove": {
+            "accessibilityLabel": "Remove uploaded attachment, number {{attachment}}"
+          },
+          "edit": {
+            "accessibilityLabel": "Edit uploaded attachment, number {{attachment}}"
+          },
+          "upload": {
+            "accessibilityLabel": "Upload more attachments"
+          }
+        },
+        "emojis": {
+          "accessibilityHint": "Tap to add emoji to toot"
         },
         "poll": {
           "option": {
             "placeholder": {
+              "accessibilityLabel": "Field number {{index}}",
               "single": "Single choice",
               "multiple": "Multiple choice"
             }
           },
+          "quantity": {
+            "reduce": {
+              "accessibilityLabel": "Reduce poll options to {{amount}}",
+              "accessibilityHint": "Minimum poll options quantity reached, currently has {{amount}}"
+            },
+            "increase": {
+              "accessibilityLabel": "Increase poll options to {{amount}}",
+              "accessibilityHint": "Maximum poll options quantity reached, currently has {{amount}}"
+            }
+          },
           "multiple": {
             "heading": "Choice type",
             "options": {
@@ -79,6 +102,8 @@
       },
       "actions": {
         "attachment": {
+          "accessibilityLabel": "Upload attachment",
+          "accessibilityHint": "Poll function will be disabled when there is any attachment",
           "actions": {
             "options": {
               "library": "Upload from photo library",
@@ -113,7 +138,12 @@
             }
           }
         },
+        "poll": {
+          "accessibilityLabel": "Add poll",
+          "accessibilityHint": "Attachment function will be disabled when poll is active"
+        },
         "visibility": {
+          "accessibilityLabel": "Toot visibility is {{visibility}}",
           "title": "Toot visibility",
           "options": {
             "public": "Public",
@@ -122,6 +152,13 @@
             "direct": "Direct message",
             "cancel": "$t(common:buttons.cancel)"
           }
+        },
+        "spoiler": {
+          "accessibilityLabel": "Spoiler"
+        },
+        "emoji": {
+          "accessibilityLabel": "Add emoji",
+          "accessibilityHint": "Open emoji selection panel, swipe horizontally to change page"
         }
       },
       "drafts": "Draft ({{count}})",
@@ -131,6 +168,7 @@
       "header": {
         "title": "Edit attachment",
         "right": {
+          "accessibilityLabel": "Save editing attachment",
           "failed": {
             "title": "Editing failed",
             "button": "Try again"
@@ -150,6 +188,7 @@
         "title": "Draft"
       },
       "content": {
+        "accessibilityHint": "Saved draft, tap to edit this draft",
         "textEmpty": "Content empty"
       }
     }

src/i18n/en/screens/imageViewer.json

@@ -1,8 +1,12 @@
 {
   "content": {
+    "actions": {
+      "accessibilityLabel": "More actions of this image",
+      "accessibilityHint": "You can save or share this image"
+    },
     "options": {
       "save": "Save image",
-      "share": "Share iamge",
+      "share": "Share image",
       "cancel": "$t(common:buttons.cancel)"
     },
     "save": {

src/i18n/en/screens/tabs.json

@@ -17,6 +17,18 @@
       "name": "About me"
     }
   },
+  "common": {
+    "search": {
+      "accessibilityLabel": "Search",
+      "accessibilityHint": "Search for hashtags, users or toots"
+    }
+  },
+  "notifications": {
+    "filter": {
+      "accessibilityLabel": "Filter",
+      "accessibilityHint": "Filter shown notifications' types"
+    }
+  },
   "me": {
     "stacks": {
       "bookmarks": {
@@ -175,6 +187,10 @@
   },
   "shared": {
     "account": {
+      "actions": {
+        "accessibilityLabel": "Actions for user {{user}}",
+        "accessibilityHint": "You can mute, blokc, report or share this user"
+      },
       "moved": "User moved",
       "created_at": "Registered on: {{date}}",
       "summary": {

src/screens/Announcements.tsx

@@ -224,7 +224,7 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
             onPress={() => navigation.goBack()}
           />
           <HeaderCenter content={t('screenAnnouncements:heading')} />
-          <View style={{ opacity: 0 }}>
+          <View style={{ opacity: 0 }} accessible={false}>
             <HeaderRight
               content='MoreHorizontal'
               native={false}

src/screens/Compose/DraftsList/Root.tsx

@@ -55,6 +55,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
     ({ item }: { item: ComposeStateDraft }) => {
       return (
         <Pressable
+          accessibilityHint={t('content.draftsList.content.accessibilityHint')}
           style={[styles.draft, { backgroundColor: theme.backgroundDefault }]}
           onPress={async () => {
             setCheckingAttachments(true)
@@ -181,7 +182,10 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
         visible={checkingAttachments}
         children={
           <View
-            style={[styles.modal, { backgroundColor: theme.backgroundOverlayInvert }]}
+            style={[
+              styles.modal,
+              { backgroundColor: theme.backgroundOverlayInvert }
+            ]}
             children={
               <Text
                 children='检查附件在服务器的状态…'

src/screens/Compose/EditAttachment/Image.tsx

@@ -1,3 +1,4 @@
+import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext } from 'react'
@@ -22,6 +23,7 @@ export interface Props {
 const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
   const { t } = useTranslation('screenCompose')
   const { theme } = useTheme()
+  const { screenReaderEnabled } = useAccessibility()
 
   const { composeState, composeDispatch } = useContext(ComposeContext)
   const theAttachmentRemote = composeState.attachments.uploads[index].remote!
@@ -160,9 +162,11 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
           </Animated.View>
         </PanGestureHandler>
       </View>
-      <Text style={[styles.imageFocusText, { color: theme.primaryDefault }]}>
+      {screenReaderEnabled ? null : (
-        {t('content.editAttachment.content.imageFocus')}
+        <Text style={[styles.imageFocusText, { color: theme.primaryDefault }]}>
-      </Text>
+          {t('content.editAttachment.content.imageFocus')}
+        </Text>
+      )}
     </>
   )
 }

src/screens/Compose/EditAttachment/Submit.tsx

@@ -22,6 +22,9 @@ const ComposeEditAttachmentSubmit: React.FC<Props> = ({ index }) => {
 
   return (
     <HeaderRight
+      accessibilityLabel={t(
+        'content.editAttachment.header.right.accessibilityLabel'
+      )}
       type='icon'
       content='Save'
       loading={isSubmitting}
@@ -39,8 +42,8 @@ const ComposeEditAttachmentSubmit: React.FC<Props> = ({ index }) => {
         ) {
           formData.append(
             'focus',
-            `${theAttachment.meta.focus.x || 0},${-theAttachment.meta.focus.y ||
+            `${theAttachment.meta?.focus?.x || 0},${-theAttachment.meta?.focus
-              0}`
+              ?.y || 0}`
           )
         }
 

src/screens/Compose/Root.tsx

@@ -4,8 +4,20 @@ import { useSearchQuery } from '@utils/queryHooks/search'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { forEach, groupBy, sortBy } from 'lodash'
-import React, { useCallback, useContext, useEffect, useMemo } from 'react'
+import React, {
-import { FlatList, StyleSheet, View } from 'react-native'
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef
+} from 'react'
+import {
+  AccessibilityInfo,
+  findNodeHandle,
+  FlatList,
+  StyleSheet,
+  View
+} from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 import ComposeActions from './Root/Actions'
 import ComposePosting from './Posting'
@@ -44,6 +56,15 @@ const ComposeRoot = React.memo(
     const { reduceMotionEnabled } = useAccessibility()
     const { theme } = useTheme()
 
+    const accessibleRefDrafts = useRef(null)
+    const accessibleRefAttachments = useRef(null)
+    const accessibleRefEmojis = useRef(null)
+
+    useEffect(() => {
+      const tagDrafts = findNodeHandle(accessibleRefDrafts.current)
+      tagDrafts && AccessibilityInfo.setAccessibilityFocus(tagDrafts)
+    }, [accessibleRefDrafts.current])
+
     const { composeState, composeDispatch } = useContext(ComposeContext)
 
     const { isFetching, data, refetch } = useSearchQuery({
@@ -106,6 +127,16 @@ const ComposeRoot = React.memo(
       [composeState]
     )
 
+    const ListFooter = useCallback(
+      () => (
+        <ComposeRootFooter
+          accessibleRefAttachments={accessibleRefAttachments}
+          accessibleRefEmojis={accessibleRefEmojis}
+        />
+      ),
+      []
+    )
+
     return (
       <View style={styles.base}>
         <FlatList
@@ -113,14 +144,14 @@ const ComposeRoot = React.memo(
           ListEmptyComponent={listEmpty}
           keyboardShouldPersistTaps='always'
           ListHeaderComponent={ComposeRootHeader}
-          ListFooterComponent={ComposeRootFooter}
+          ListFooterComponent={ListFooter}
           ItemSeparatorComponent={ComponentSeparator}
           // @ts-ignore
           data={data ? data[composeState.tag?.type] : undefined}
           keyExtractor={() => Math.random().toString()}
         />
         <ComposeActions />
-        <ComposeDrafts />
+        <ComposeDrafts accessibleRefDrafts={accessibleRefDrafts} />
         <ComposePosting />
       </View>
     )

src/screens/Compose/Root/Actions.tsx

@@ -164,20 +164,50 @@ const ComposeActions: React.FC = () => {
 
   return (
     <View
+      accessibilityRole='toolbar'
       style={[
         styles.additions,
-        { backgroundColor: theme.backgroundDefault, borderTopColor: theme.border }
+        {
+          backgroundColor: theme.backgroundDefault,
+          borderTopColor: theme.border
+        }
       ]}
     >
       <Pressable
+        accessibilityRole='button'
+        accessibilityLabel={t(
+          'content.root.actions.attachment.accessibilityLabel'
+        )}
+        accessibilityHint={t(
+          'content.root.actions.attachment.accessibilityHint'
+        )}
+        accessibilityState={{
+          disabled: composeState.poll.active
+        }}
+        style={styles.button}
         onPress={attachmentOnPress}
         children={<Icon name='Aperture' size={24} color={attachmentColor} />}
       />
       <Pressable
+        accessibilityRole='button'
+        accessibilityLabel={t('content.root.actions.poll.accessibilityLabel')}
+        accessibilityHint={t('content.root.actions.poll.accessibilityHint')}
+        accessibilityState={{
+          disabled: composeState.attachments.uploads.length ? true : false,
+          expanded: composeState.poll.active
+        }}
+        style={styles.button}
         onPress={pollOnPress}
         children={<Icon name='BarChart2' size={24} color={pollColor} />}
       />
       <Pressable
+        accessibilityRole='button'
+        accessibilityLabel={t(
+          'content.root.actions.visibility.accessibilityLabel',
+          { visibility: composeState.visibility }
+        )}
+        accessibilityState={{ disabled: composeState.visibilityLock }}
+        style={styles.button}
         onPress={visibilityOnPress}
         children={
           <Icon
@@ -190,18 +220,34 @@ const ComposeActions: React.FC = () => {
         }
       />
       <Pressable
+        accessibilityRole='button'
+        accessibilityLabel={t(
+          'content.root.actions.spoiler.accessibilityLabel'
+        )}
+        accessibilityState={{ expanded: composeState.spoiler.active }}
+        style={styles.button}
         onPress={spoilerOnPress}
         children={
           <Icon
             name='AlertTriangle'
             size={24}
             color={
-              composeState.spoiler.active ? theme.primaryDefault : theme.secondary
+              composeState.spoiler.active
+                ? theme.primaryDefault
+                : theme.secondary
             }
           />
         }
       />
       <Pressable
+        accessibilityRole='button'
+        accessibilityLabel={t('content.root.actions.emoji.accessibilityLabel')}
+        accessibilityHint={t('content.root.actions.emoji.accessibilityHint')}
+        accessibilityState={{
+          disabled: composeState.emoji.emojis ? false : true,
+          expanded: composeState.emoji.active
+        }}
+        style={styles.button}
         onPress={emojiOnPress}
         children={<Icon name='Smile' size={24} color={emojiColor} />}
       />
@@ -210,6 +256,12 @@ const ComposeActions: React.FC = () => {
 }
 
 const styles = StyleSheet.create({
+  button: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100%'
+  },
   additions: {
     height: 45,
     borderTopWidth: StyleSheet.hairlineWidth,

src/screens/Compose/Root/Drafts.tsx

@@ -3,13 +3,17 @@ import { useNavigation } from '@react-navigation/native'
 import { getInstanceDrafts } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
-import React, { useContext, useEffect } from 'react'
+import React, { RefObject, useContext, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, View } from 'react-native'
 import { useSelector } from 'react-redux'
 import ComposeContext from '../utils/createContext'
 
-const ComposeDrafts: React.FC = () => {
+export interface Props {
+  accessibleRefDrafts: RefObject<View>
+}
+
+const ComposeDrafts: React.FC<Props> = ({ accessibleRefDrafts }) => {
   const { t } = useTranslation('screenCompose')
   const navigation = useNavigation()
   const { composeState } = useContext(ComposeContext)
@@ -24,6 +28,7 @@ const ComposeDrafts: React.FC = () => {
   if (!composeState.dirty && instanceDrafts?.length) {
     return (
       <View
+        ref={accessibleRefDrafts}
         style={styles.base}
         children={
           <Button

src/screens/Compose/Root/Footer.tsx

@@ -3,15 +3,30 @@ import ComposeEmojis from '@screens/Compose/Root/Footer/Emojis'
 import ComposePoll from '@screens/Compose/Root/Footer/Poll'
 import ComposeReply from '@screens/Compose/Root/Footer/Reply'
 import ComposeContext from '@screens/Compose/utils/createContext'
-import React, { useContext } from 'react'
+import React, { RefObject, useContext } from 'react'
+import { SectionList, View } from 'react-native'
 
-const ComposeRootFooter: React.FC = () => {
+export interface Props {
+  accessibleRefAttachments: RefObject<View>
+  accessibleRefEmojis: RefObject<SectionList>
+}
+
+const ComposeRootFooter: React.FC<Props> = ({
+  accessibleRefAttachments,
+  accessibleRefEmojis
+}) => {
   const { composeState } = useContext(ComposeContext)
 
   return (
     <>
-      {composeState.emoji.active ? <ComposeEmojis /> : null}
+      {composeState.emoji.active ? (
-      {composeState.attachments.uploads.length ? <ComposeAttachments /> : null}
+        <ComposeEmojis accessibleRefEmojis={accessibleRefEmojis} />
+      ) : null}
+      {composeState.attachments.uploads.length ? (
+        <ComposeAttachments
+          accessibleRefAttachments={accessibleRefAttachments}
+        />
+      ) : null}
       {composeState.poll.active ? <ComposePoll /> : null}
       {composeState.replyToStatus ? <ComposeReply /> : null}
     </>

src/screens/Compose/Root/Footer/Attachments.tsx

@@ -8,6 +8,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, {
+  RefObject,
   useCallback,
   useContext,
   useEffect,
@@ -28,9 +29,13 @@ import ComposeContext from '../../utils/createContext'
 import { ExtendedAttachment } from '../../utils/types'
 import addAttachment from './addAttachment'
 
+export interface Props {
+  accessibleRefAttachments: RefObject<View>
+}
+
 const DEFAULT_HEIGHT = 200
 
-const ComposeAttachments: React.FC = () => {
+const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
   const { showActionSheetWithOptions } = useActionSheet()
   const { composeState, composeDispatch } = useContext(ComposeContext)
   const { t } = useTranslation('screenCompose')
@@ -153,6 +158,10 @@ const ComposeAttachments: React.FC = () => {
           ) : (
             <View style={styles.actions}>
               <Button
+                accessibilityLabel={t(
+                  'content.root.footer.attachments.remove.accessibilityLabel',
+                  { attachment: index + 1 }
+                )}
                 type='icon'
                 content='X'
                 spacing='M'
@@ -169,6 +178,10 @@ const ComposeAttachments: React.FC = () => {
                 }}
               />
               <Button
+                accessibilityLabel={t(
+                  'content.root.footer.attachments.edit.accessibilityLabel',
+                  { attachment: index + 1 }
+                )}
                 type='icon'
                 content='Edit'
                 spacing='M'
@@ -192,6 +205,10 @@ const ComposeAttachments: React.FC = () => {
   const listFooter = useMemo(
     () => (
       <Pressable
+        accessible
+        accessibilityLabel={t(
+          'content.root.footer.attachments.upload.accessibilityLabel'
+        )}
         style={[
           styles.container,
           {
@@ -233,7 +250,7 @@ const ComposeAttachments: React.FC = () => {
     []
   )
   return (
-    <View style={styles.base}>
+    <View style={styles.base} ref={accessibleRefAttachments} accessible>
       <Pressable style={styles.sensitive} onPress={sensitiveOnPress}>
         <Icon
           name={composeState.attachments.sensitive ? 'CheckCircle' : 'Circle'}

src/screens/Compose/Root/Footer/Emojis.tsx

@@ -3,14 +3,30 @@ import haptics from '@components/haptics'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback, useContext, useMemo } from 'react'
+import React, {
-import { Pressable, SectionList, StyleSheet, Text, View } from 'react-native'
+  RefObject,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  AccessibilityInfo,
+  findNodeHandle,
+  Pressable,
+  SectionList,
+  StyleSheet,
+  Text,
+  View
+} from 'react-native'
 import FastImage from 'react-native-fast-image'
 import validUrl from 'valid-url'
 import updateText from '../../updateText'
 import ComposeContext from '../../utils/createContext'
 
 const SingleEmoji = ({ emoji }: { emoji: Mastodon.Emoji }) => {
+  const { t } = useTranslation()
   const { reduceMotionEnabled } = useAccessibility()
 
   const { composeState, composeDispatch } = useContext(ComposeContext)
@@ -29,6 +45,12 @@ const SingleEmoji = ({ emoji }: { emoji: Mastodon.Emoji }) => {
     if (validUrl.isHttpsUri(uri)) {
       return (
         <FastImage
+          accessibilityLabel={t('common:customEmoji.accessibilityLabel', {
+            emoji: emoji.shortcode
+          })}
+          accessibilityHint={t(
+            'screenCompose:content.root.footer.emojis.accessibilityHint'
+          )}
           source={{ uri: reduceMotionEnabled ? emoji.static_url : emoji.url }}
           style={styles.emoji}
         />
@@ -42,10 +64,21 @@ const SingleEmoji = ({ emoji }: { emoji: Mastodon.Emoji }) => {
   )
 }
 
-const ComposeEmojis: React.FC = () => {
+export interface Props {
+  accessibleRefEmojis: RefObject<SectionList>
+}
+
+const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
   const { composeState } = useContext(ComposeContext)
   const { theme } = useTheme()
 
+  useEffect(() => {
+    const tagEmojis = findNodeHandle(accessibleRefEmojis.current)
+    if (composeState.emoji.active) {
+      tagEmojis && AccessibilityInfo.setAccessibilityFocus(tagEmojis)
+    }
+  }, [composeState.emoji.active])
+
   const listHeader = useCallback(
     ({ section: { title } }) => (
       <Text style={[styles.group, { color: theme.secondary }]}>{title}</Text>
@@ -73,6 +106,8 @@ const ComposeEmojis: React.FC = () => {
   return (
     <View style={styles.base}>
       <SectionList
+        accessible
+        ref={accessibleRefEmojis}
         horizontal
         keyboardShouldPersistTaps='always'
         sections={composeState.emoji.emojis || []}

src/screens/Compose/Root/Footer/Poll.tsx

@@ -48,6 +48,10 @@ const ComposePoll: React.FC = () => {
                 color={theme.secondary}
               />
               <TextInput
+                accessibilityLabel={t(
+                  'content.root.footer.poll.option.placeholder.accessibilityLabel',
+                  { index: i + 1 }
+                )}
                 keyboardAppearance={mode}
                 {...(i === 0 && firstRender && { autoFocus: true })}
                 style={[
@@ -80,6 +84,19 @@ const ComposePoll: React.FC = () => {
       <View style={styles.controlAmount}>
         <View style={styles.firstButton}>
           <Button
+            {...((total > 2)
+              ? {
+                  accessibilityLabel: t(
+                    'content.root.footer.poll.quantity.reduce.accessibilityLabel',
+                    { amount: total - 1 }
+                  )
+                }
+              : {
+                  accessibilityHint: t(
+                    'content.root.footer.poll.quantity.reduce.accessibilityHint',
+                    { amount: total }
+                  )
+                })}
             onPress={() => {
               analytics('compose_poll_reduce_press')
               total > 2 &&
@@ -95,6 +112,19 @@ const ComposePoll: React.FC = () => {
           />
         </View>
         <Button
+          {...(total < 4
+            ? {
+                accessibilityLabel: t(
+                  'content.root.footer.poll.quantity.increase.accessibilityLabel',
+                  { amount: total + 1 }
+                )
+              }
+            : {
+                accessibilityHint: t(
+                  'content.root.footer.poll.quantity.increase.accessibilityHint',
+                  { amount: total }
+                )
+              })}
           onPress={() => {
             analytics('compose_poll_increase_press')
             total < 4 &&

src/screens/Compose/Root/Header/SpoilerInput.tsx

@@ -1,6 +1,6 @@
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useContext } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, TextInput } from 'react-native'
 import formatText from '../../formatText'
@@ -45,7 +45,6 @@ const ComposeSpoilerInput: React.FC = () => {
           payload: { selection: { start, end } }
         })
       }}
-      ref={composeState.textInputFocus.refs.spoiler}
       scrollEnabled={false}
       onFocus={() =>
         composeDispatch({

src/screens/Compose/utils/initialState.ts

@@ -37,7 +37,7 @@ const composeInitialState: Omit<ComposeState, 'timestamp'> = {
   replyToStatus: undefined,
   textInputFocus: {
     current: 'text',
-    refs: { text: createRef(), spoiler: createRef() }
+    refs: { text: createRef() }
   }
 }
 

src/screens/Compose/utils/types.d.ts

@@ -63,7 +63,7 @@ export type ComposeState = {
   replyToStatus?: Mastodon.Status
   textInputFocus: {
     current: 'text' | 'spoiler'
-    refs: { text: RefObject<TextInput>; spoiler: RefObject<TextInput> }
+    refs: { text: RefObject<TextInput> }
   }
 }
 

src/screens/ImageViewer/components/ImageItem.android.tsx

@@ -98,6 +98,10 @@ const ImageItem = ({
               setImageDimensions
             })}
             style={{ flex: 1 }}
+            imageStyle={{
+              flex: 1,
+              resizeMode: 'stretch'
+            }}
           />
         }
       />

src/screens/ImagesViewer.tsx

@@ -120,6 +120,8 @@ const HeaderComponent = React.memo(
           content={`${currentIndex + 1} / ${imageUrls.length}`}
         />
         <HeaderRight
+          accessibilityLabel={t('content.actions.accessibilityLabel')}
+          accessibilityHint={t('content.actions.accessibilityHint')}
           content='MoreHorizontal'
           native={false}
           background

src/screens/Tabs.tsx

@@ -1,3 +1,4 @@
+import GracefullyImage from '@components/GracefullyImage'
 import haptics from '@components/haptics'
 import Icon from '@components/Icon'
 import {
@@ -67,32 +68,28 @@ const ScreenTabs = React.memo(
             case 'Tab-Notifications':
               return <Icon name='Bell' size={size} color={color} />
             case 'Tab-Me':
-              return instanceActive !== -1 ? (
+              return (
-                <Image
+                <GracefullyImage
-                  source={{
+                  key={instanceAccount?.avatarStatic}
-                    uri: instanceAccount?.avatarStatic
+                  uri={{ original: instanceAccount?.avatarStatic }}
+                  dimension={{
+                    width: size,
+                    height: size
                   }}
                   style={{
-                    width: size,
-                    height: size,
                     borderRadius: size,
+                    overflow: 'hidden',
                     borderWidth: focused ? 2 : 0,
                     borderColor: focused ? theme.secondary : color
                   }}
                 />
-              ) : (
-                <Icon
-                  name={focused ? 'Meh' : 'Smile'}
-                  size={size}
-                  color={!focused ? theme.secondary : color}
-                />
               )
             default:
               return <Icon name='AlertOctagon' size={size} color={color} />
           }
         }
       }),
-      [instanceAccount, instanceActive]
+      [instanceAccount?.avatarStatic, instanceActive]
     )
     const tabBarOptions = useMemo(
       () => ({

src/screens/Tabs/Local.tsx

@@ -37,6 +37,8 @@ const TabLocal = React.memo(
         }),
         headerRight: () => (
           <HeaderRight
+            accessibilityLabel={t('common.search.accessibilityLabel')}
+            accessibilityHint={t('common.search.accessibilityHint')}
             content='Search'
             onPress={() => {
               analytics('search_tap', { page: 'Local' })

src/screens/Tabs/Me/Switch/Root.tsx

@@ -11,7 +11,8 @@ import {
 } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React from 'react'
+import { groupBy } from 'lodash'
+import React, { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
@@ -20,10 +21,10 @@ import { useDispatch, useSelector } from 'react-redux'
 
 interface Props {
   instance: Instance
-  disabled?: boolean
+  selected?: boolean
 }
 
-const AccountButton: React.FC<Props> = ({ instance, disabled = false }) => {
+const AccountButton: React.FC<Props> = ({ instance, selected = false }) => {
   const queryClient = useQueryClient()
   const navigation = useNavigation()
   const dispatch = useDispatch()
@@ -31,10 +32,10 @@ const AccountButton: React.FC<Props> = ({ instance, disabled = false }) => {
   return (
     <Button
       type='text'
-      disabled={disabled}
+      selected={selected}
       style={styles.button}
       content={`@${instance.account.acct}@${instance.uri}${
-        disabled ? ' ✓' : ''
+        selected ? ' ✓' : ''
       }`}
       onPress={() => {
         haptics('Light')
@@ -50,11 +51,17 @@ const AccountButton: React.FC<Props> = ({ instance, disabled = false }) => {
 const ScreenMeSwitchRoot: React.FC = () => {
   const { t } = useTranslation('screenTabs')
   const { theme } = useTheme()
-  const instances = useSelector(getInstances)
+  const instances = useSelector(getInstances, () => true)
-  const instanceActive = useSelector(getInstanceActive)
+  const instanceActive = useSelector(getInstanceActive, () => true)
+
+  const scrollViewRef = useRef<ScrollView>(null)
 
   return (
-    <ScrollView style={styles.base} keyboardShouldPersistTaps='always'>
+    <ScrollView
+      ref={scrollViewRef}
+      style={styles.base}
+      keyboardShouldPersistTaps='always'
+    >
       <View style={[styles.firstSection, { borderBottomColor: theme.border }]}>
         <Text style={[styles.header, { color: theme.primaryDefault }]}>
           {t('me.switch.existing')}
@@ -74,7 +81,7 @@ const ScreenMeSwitchRoot: React.FC = () => {
                     <AccountButton
                       key={index}
                       instance={instance}
-                      disabled={
+                      selected={
                         instance.url === localAccount.url &&
                         instance.token === localAccount.token &&
                         instance.account.id === localAccount.account.id
@@ -90,7 +97,11 @@ const ScreenMeSwitchRoot: React.FC = () => {
         <Text style={[styles.header, { color: theme.primaryDefault }]}>
           {t('me.switch.new')}
         </Text>
-        <ComponentInstance disableHeaderImage goBack />
+        <ComponentInstance
+          scrollViewRef={scrollViewRef}
+          disableHeaderImage
+          goBack
+        />
       </View>
     </ScrollView>
   )

src/screens/Tabs/Notifications.tsx

@@ -34,6 +34,8 @@ const TabNotifications = React.memo(
         }),
         headerRight: () => (
           <HeaderRight
+            accessibilityLabel={t('notifications.filter.accessibilityLabel')}
+            accessibilityHint={t('notifications.filter.accessibilityHint')}
             content='Filter'
             onPress={() => {
               analytics('notificationsfilter_tap')

src/screens/Tabs/Public.tsx

@@ -62,6 +62,8 @@ const TabPublic = React.memo(
         ),
         headerRight: () => (
           <HeaderRight
+            accessibilityLabel={t('common.search.accessibilityLabel')}
+            accessibilityHint={t('common.search.accessibilityHint')}
             content='Search'
             onPress={() => {
               analytics('search_tap', { page: pages[segment].key })

src/screens/Tabs/Shared/Account.tsx

@@ -6,6 +6,7 @@ import { useAccountQuery } from '@utils/queryHooks/account'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useEffect, useMemo, useReducer } from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet, View } from 'react-native'
 import { useSharedValue } from 'react-native-reanimated'
 import AccountAttachments from './Account/Attachments'
@@ -23,6 +24,7 @@ const TabSharedAccount: React.FC<SharedAccountProp> = ({
   },
   navigation
 }) => {
+  const { t, i18n } = useTranslation('screenTabs')
   const { theme } = useTheme()
 
   const { data } = useAccountQuery({ id: account.id })
@@ -38,6 +40,10 @@ const TabSharedAccount: React.FC<SharedAccountProp> = ({
       navigation.setOptions({
         headerRight: () => (
           <HeaderRight
+            accessibilityLabel={t('shared.account.actions.accessibilityLabel', {
+              user: data?.acct
+            })}
+            accessibilityHint={t('shared.account.actions.accessibilityHint')}
             content='MoreHorizontal'
             onPress={() => {
               analytics('bottomsheet_open_press', {
@@ -54,7 +60,7 @@ const TabSharedAccount: React.FC<SharedAccountProp> = ({
         )
       })
     return updateHeaderRight()
-  }, [])
+  }, [i18n.language])
 
   const onScroll = useCallback(({ nativeEvent }) => {
     scrollY.value = nativeEvent.contentOffset.y

src/screens/Tabs/Shared/sharedScreens.tsx

@@ -163,6 +163,7 @@ const sharedScreens = (
                 }
               />
               <TextInput
+                accessibilityRole='search'
                 keyboardAppearance={mode}
                 style={[
                   styles.textInput,

src/utils/accessibility/AccessibilityManager.tsx

@@ -3,46 +3,60 @@ import { AccessibilityInfo } from 'react-native'
 
 type ContextType = {
   reduceMotionEnabled: boolean
+  screenReaderEnabled: boolean
 }
 
 const AccessibilityContext = createContext<ContextType>({
-  reduceMotionEnabled: false
+  reduceMotionEnabled: false,
+  screenReaderEnabled: false
 })
 
 export const useAccessibility = () => useContext(AccessibilityContext)
 
 const AccessibilityManager: React.FC = ({ children }) => {
   const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false)
+  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false)
 
   const handleReduceMotionChanged = (reduceMotionEnabled: boolean) =>
     setReduceMotionEnabled(reduceMotionEnabled)
 
-  const loadReduceMotion = async () => {
+  const handleScreenReaderEnabled = (screenReaderEnabled: boolean) =>
+    setScreenReaderEnabled(screenReaderEnabled)
+
+  const loadAccessibilityInfo = async () => {
     const reduceMotion = await AccessibilityInfo.isReduceMotionEnabled()
+    const screenReader = await AccessibilityInfo.isScreenReaderEnabled()
     setReduceMotionEnabled(reduceMotion)
+    setScreenReaderEnabled(screenReader)
   }
 
   useEffect(() => {
-    loadReduceMotion()
+    loadAccessibilityInfo()
 
     AccessibilityInfo.addEventListener(
       'reduceMotionChanged',
       handleReduceMotionChanged
     )
+    AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      handleScreenReaderEnabled
+    )
 
     return () => {
       AccessibilityInfo.removeEventListener(
         'reduceMotionChanged',
         handleReduceMotionChanged
       )
+      AccessibilityInfo.removeEventListener(
+        'screenReaderChanged',
+        handleScreenReaderEnabled
+      )
     }
   }, [])
 
   return (
     <AccessibilityContext.Provider
-      value={{
+      value={{ reduceMotionEnabled, screenReaderEnabled }}
-        reduceMotionEnabled
-      }}
     >
       {children}
     </AccessibilityContext.Provider>