Merge pull request #98 from tooot-app/main

Nightly 210409

.github/workflows/build.yml

@@ -28,7 +28,6 @@ jobs:
       - name: -- Step 4 -- Install node dependencies
         run: yarn install
       - name: -- Step 5 -- Install native dependencies
-        if: github.ref != 'refs/heads/main'
         run: npx pod-install
       - name: -- Step 6 -- Install ruby dependencies
         run: bundle install

android/app/src/main/java/com/xmflsct/app/tooot/MainActivity.java

@@ -26,7 +26,7 @@ public class MainActivity extends ReactActivity {
 
   @Override
   protected void onCreate(Bundle savedInstanceState) {
-    super.onCreate(savedInstanceState);
+    super.onCreate(null);
     // SplashScreen.show(...) has to be called after super.onCreate(...)
     // Below line is handled by '@expo/configure-splash-screen' command and it's discouraged to modify it manually
     SplashScreen.show(this, SplashScreenImageResizeMode.CONTAIN, ReactRootView.class, false);

fastlane/.gitignore

@@ -5,5 +5,4 @@
 
 /README.md
 /report.xml
-Preview.html
-screenshots
+Preview.html

fastlane/Deliverfile

@@ -0,0 +1,17 @@
+languages(['zh-Hans'])
+
+name({
+  'default' => "tooot"
+})
+keywords({
+  'default' => "Mastodon,tooot,social,decentralized,长毛象,社交,去中心"
+})
+privacy_url({
+  'default' => "https://tooot.app/privacy-policy"
+})
+support_url({
+  'default' => "https://tooot.app"
+})
+
+copyright("#{Time.now.year} ©️ xmflsct")
+primary_category("SOCIAL_NETWORKING")

fastlane/Fastfile

@@ -57,7 +57,7 @@ private_lane :github_release do |options|
     description: "No changelog provided",
     commitish: git_branch,
     is_prerelease: options[:prerelease],
-    upload_assets: ["#{File.expand_path('..', Dir.pwd)}/tooot-#{GITHUB_RELEASE}.apk"]
+    upload_assets: options[:prerelease] ? nil : ["#{File.expand_path('..', Dir.pwd)}/tooot-#{GITHUB_RELEASE}.apk"]
   )
 end
 
@@ -69,6 +69,8 @@ end
 desc "Build and deploy iOS app"
 private_lane :build_ios do
   BUILD_DIRECTORY = "./ios/build"
+  IPA_FILE = "#{BUILD_DIRECTORY}/tooot.ipa"
+  DSYM_FILE = "#{BUILD_DIRECTORY}/tooot.app.dSYM.zip"
 
   update_expo_ios
   setup_ci
@@ -77,17 +79,39 @@ private_lane :build_ios do
   when "candidate"
     prepare_appstore_ios
     match( type: "appstore", readonly: true )
-    build_ios_app( export_method: "app-store", include_symbols: true, include_bitcode: true, silent: true )
+    build_ios_app(
+      export_method: "app-store",
+      include_symbols: true,
+      output_directory: BUILD_DIRECTORY,
+      silent: true
+    )
+    sentry_upload_dsym(
+      org_slug: ENV["SENTRY_ORGANIZATION"],
+      project_slug: ENV["SENTRY_PROJECT"],
+      dsym_path: DSYM_FILE
+    )
     upload_to_testflight(
+      ipa: IPA_FILE,
       demo_account_required: true,
       distribute_external: true,
       groups: "测试用户",
-      changelog: "Ready for testing"
+      changelog: "感谢帮忙测试 tooot 🙏"
     )
   when "release"
     prepare_appstore_ios
     match( type: "appstore", readonly: true )
-    build_ios_app( export_method: "app-store", include_bitcode: true, silent: true )
+    build_ios_app(
+      export_method: "app-store",
+      include_bitcode: true,
+      output_directory: BUILD_DIRECTORY,
+      silent: true
+    )
+    upload_to_app_store(
+      force: true,
+      ipa: IPA_FILE,
+      submit_for_review: true,
+      automatic_release: false
+    )
   else
     if !is_ci
       match( type: "development", readonly: true )
@@ -126,6 +150,27 @@ private_lane :build_android do
       skip_upload_images: true,
       skip_upload_screenshots: true
     )
+  when "release"
+    prepare_playstore_android
+    build_android_app(
+      task: 'clean bundle',
+      build_type: 'release',
+      project_dir: "./android",
+      print_command: false,
+      print_command_output: false,
+      properties: {
+        "expoSDK" => VERSIONS[:expo],
+        "releaseChannel" => RELEASE_CHANNEL,
+        "android.injected.signing.store.file" => "#{File.expand_path('..', Dir.pwd)}/android/tooot.jks",
+        "android.injected.signing.store.password" => ENV["ANDROID_KEYSTORE_PASSWORD"],
+        "android.injected.signing.key.alias" => ENV["ANDROID_KEYSTORE_ALIAS"],
+        "android.injected.signing.key.password" => ENV["ANDROID_KEYSTORE_KEY_PASSWORD"],
+      }
+    )
+    upload_to_play_store(
+      track: "production",
+      skip_upload_changelogs: true
+    )
     build_android_app(
       task: 'assemble',
       build_type: 'release',
@@ -142,7 +187,6 @@ private_lane :build_android do
       }
     )
     sh "mv #{lane_context[SharedValues::GRADLE_APK_OUTPUT_PATH]} #{File.expand_path('..', Dir.pwd)}/tooot-#{GITHUB_RELEASE}.apk"
-  when "release"
   else
     if !is_ci
       build_android_app(

fastlane/metadata/android/en-US/full_description.txt

@@ -0,0 +1 @@
+../../default/description.txt

fastlane/metadata/android/en-US/images/phoneScreenshots/0_65.png

@@ -0,0 +1 @@
+../../../../../screenshots/en_US/0_65.png

fastlane/metadata/android/en-US/images/phoneScreenshots/1_65.png

@@ -0,0 +1 @@
+../../../../../screenshots/en_US/1_65.png

fastlane/metadata/android/en-US/images/phoneScreenshots/2_65.png

@@ -0,0 +1 @@
+../../../../../screenshots/en_US/2_65.png

fastlane/metadata/android/en-US/images/phoneScreenshots/3_65.png

@@ -0,0 +1 @@
+../../../../../screenshots/en_US/3_65.png

fastlane/metadata/android/en-US/short_description.txt

@@ -0,0 +1 @@
+../../default/subtitle.txt

fastlane/metadata/android/zh-CN/full_description.txt

@@ -0,0 +1 @@
+../../zh-Hans/description.txt

fastlane/metadata/android/zh-CN/images/phoneScreenshots/0_65.png

@@ -0,0 +1 @@
+../../../../../screenshots/zh-Hans/0_65.png

fastlane/metadata/android/zh-CN/images/phoneScreenshots/1_65.png

@@ -0,0 +1 @@
+../../../../../screenshots/zh-Hans/1_65.png

fastlane/metadata/android/zh-CN/images/phoneScreenshots/2_65.png

@@ -0,0 +1 @@
+../../../../../screenshots/zh-Hans/2_65.png

fastlane/metadata/android/zh-CN/images/phoneScreenshots/3_65.png

@@ -0,0 +1 @@
+../../../../../screenshots/zh-Hans/3_65.png

fastlane/metadata/android/zh-CN/short_description.txt

@@ -0,0 +1 @@
+../../zh-Hans/subtitle.txt

fastlane/metadata/android/zh-CN/title.txt

@@ -0,0 +1 @@
+tooot

fastlane/metadata/default/description.txt

@@ -0,0 +1,5 @@
+tooot is an open source, simple yet elegant Mastodon mobile client.
+
+A Mastodon (https://joinmastodon.org/) account is required to use this app.
+
+If you have suggestions, please reach out to @tooot@xmflsct.com or support@tooot.ap.

fastlane/metadata/default/release_notes.txt

@@ -0,0 +1 @@
+

fastlane/metadata/default/subtitle.txt

@@ -0,0 +1 @@
+Open source Mastodon client

fastlane/metadata/zh-Hans/description.txt

@@ -0,0 +1,10 @@
+tooot是一个专门为中文用户社区所打造的开源、简洁长毛象客户端。使用此客户端需要已经拥有一个长毛象（https://joinmastodon.org/）账号。
+
+tooot支持：
+- 多账号登录
+- 黑暗或自适应模式
+- 可调整正文字体大小
+- 消息推送
+等功能。
+
+如有使用建议或意见，请联系@tooot@xmflsct.com或者support@tooot.app。

fastlane/metadata/zh-Hans/release_notes.txt

@@ -0,0 +1 @@
+

fastlane/metadata/zh-Hans/subtitle.txt

@@ -0,0 +1 @@
+开源长毛象客户端

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(() => {
-    if (active) {
+  const mainColor = useMemo(() => {
+    if (selected) {
       return theme.blue
+    } else if (overlay) {
+      return theme.primaryOverlay
+    } else if (disabled || loading) {
+      return theme.disabled
     } else {
-      if (overlay) {
-        return theme.primaryOverlay
+      if (destructive) {
+        return theme.red
       } else {
-        if (disabled) {
-          return theme.secondary
-        } else {
-          if (destructive) {
-            return theme.red
-          } else {
-            return theme.primaryDefault
-          }
-        }
+        return theme.primaryDefault
       }
     }
-  }, [mode, disabled])
-  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])
+  }, [mode, disabled, loading, selected])
+
   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,11 +1,13 @@
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useMemo, useRef, useState } from 'react'
 import {
+  AccessibilityProps,
   Image,
   ImageStyle,
   Pressable,
   StyleProp,
   StyleSheet,
+  View,
   ViewStyle
 } from 'react-native'
 import { Blurhash } from 'react-native-blurhash'
@@ -17,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
@@ -35,6 +40,8 @@ export interface Props {
 
 const GracefullyImage = React.memo(
   ({
+    accessibilityLabel,
+    accessibilityHint,
     hidden = false,
     uri,
     blurhash,
@@ -94,13 +101,30 @@ const GracefullyImage = React.memo(
       [source]
     )
     const blurhashView = useMemo(() => {
-      return blurhash && (hidden || !imageLoaded) ? (
-        <Blurhash decodeAsync blurhash={blurhash} style={styles.blurhash} />
-      ) : null
+      if (hidden || !imageLoaded) {
+        if (blurhash) {
+          return (
+            <Blurhash decodeAsync blurhash={blurhash} style={styles.blurhash} />
+          )
+        } else {
+          return (
+            <View
+              style={[styles.blurhash, { backgroundColor: theme.disabled }]}
+            />
+          )
+        }
+      } else {
+        return null
+      }
     }, [hidden, imageLoaded])
 
     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={
-              <Text
-                style={{ color: theme.primaryDefault }}
-                children='https://'
-              />
-            }
+            placeholder='https://'
+            placeholderTextColor={theme.primaryDefault}
           />
           <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,
-    paddingRight: StyleConstants.Spacing.XS
+    ...StyleConstants.FontStyle.M
   },
   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]}>
-        <Text style={[styles.header, { color: theme.primaryDefault }]}>{header}</Text>
+      <View style={[styles.base, style]} accessible>
+        <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 }) =>
-          nativeEvent.state === State.ACTIVE && !loading && onPress && onPress()
-        }
+        onHandlerStateChange={async ({ nativeEvent }) => {
+          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>{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,
@@ -235,7 +236,10 @@ const ParseHTML = React.memo(
         const [expanded, setExpanded] = useState(false)
 
         const onTextLayout = useCallback(({ nativeEvent }) => {
-          if (nativeEvent.lines.length >= numberOfLines + 5) {
+          if (
+            numberOfLines === 0 ||
+            nativeEvent.lines.length >= numberOfLines + 5
+          ) {
             setExpandAllow(true)
           }
         }, [])
@@ -251,6 +255,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,
-          backgroundColor: 'red'
+          marginRight: StyleConstants.Spacing.S
         }}
       />
     )

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/Content.tsx

@@ -39,7 +39,7 @@ const TimelineContent = React.memo(
               emojis={status.emojis}
               mentions={status.mentions}
               tags={status.tags}
-              numberOfLines={1}
+              numberOfLines={0}
               expandHint={t('shared.content.expandHint')}
               disableDetails={disableDetails}
             />

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": {
-        "function": "Favourite toot"
+      "reply": {
+        "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)",
-      "favourited_by": "$t(screenTabs:shared.users.statuses.favourited_by)"
+      "reblogged_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": "Poll option {{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, block, report or share this user"
+      },
       "moved": "User moved",
       "created_at": "Registered on: {{date}}",
       "summary": {

src/i18n/zh-Hans/common.json

@@ -3,6 +3,9 @@
     "apply": "应用",
     "cancel": "取消"
   },
+  "customEmoji": {
+    "accessibilityLabel": "自定义表情{{emoji}}"
+  },
   "message": {
     "success": {
       "message": "{{function}}成功"

src/i18n/zh-Hans/components/timeline.json

@@ -29,19 +29,33 @@
       }
     },
     "actions": {
-      "favourited": {
-        "function": "喜欢嘟文"
+      "reply": {
+        "accessibilityLabel": "回复此嘟文"
       },
       "reblogged": {
+        "accessibilityLabel": "转发此嘟文",
         "function": "转嘟"
       },
+      "favourited": {
+        "accessibilityLabel": "添加此嘟文至喜欢列表",
+        "function": "喜欢嘟文"
+      },
       "bookmarked": {
+        "accessibilityLabel": "添加此嘟文至书签列表",
         "function": "喜欢嘟文"
       }
     },
     "actionsUsers": {
-      "reblogged_by": "$t(screenTabs:shared.users.statuses.reblogged_by)",
-      "favourited_by": "$t(screenTabs:shared.users.statuses.favourited_by)"
+      "reblogged_by": {
+        "accessibilityLabel": "{{count}}用户转嘟了此嘟文",
+        "accessibilityHint": "点击以了解用户",
+        "text": "$t(screenTabs:shared.users.statuses.reblogged_by)"
+      },
+      "favourited_by": {
+        "accessibilityLabel": "{{count}}用户喜欢了此嘟文",
+        "accessibilityHint": "点击以了解用户",
+        "text": "$t(screenTabs:shared.users.statuses.favourited_by)"
+      }
     },
     "attachment": {
       "sensitive": {
@@ -52,13 +66,36 @@
         "button": "尝试远程链接"
       }
     },
+    "avatar": {
+      "accessibilityLabel": "{{name}}的头像",
+      "accessibilityHint": "点击进入{{name}}的页面"
+    },
     "content": {
       "expandHint": "隐藏内容"
     },
     "fullConversation": "阅读全部对话",
     "header": {
       "shared": {
-        "application": "发自于 {{application}}"
+        "account": {
+          "name": {
+            "accessibilityHint": "用户显示名"
+          },
+          "account": {
+            "accessibilityHint": "用户帐户名"
+          }
+        },
+        "application": "发自于 {{application}}",
+        "muted": {
+          "accessibilityLabel": "已静音此嘟文"
+        },
+        "visibility": {
+          "direct": {
+            "accessibilityLabel": "此嘟文是私信"
+          },
+          "private": {
+            "accessibilityLabel": "此嘟文仅关注着可见"
+          }
+        }
       },
       "conversation": {
         "withAccounts": "与",
@@ -67,6 +104,7 @@
         }
       },
       "actions": {
+        "accessibilityHint": "更多关于此条嘟文，例如发布者等",
         "account": {
           "heading": "关于用户",
           "mute": {

src/i18n/zh-Hans/screens/compose.json

@@ -45,15 +45,38 @@
       },
       "footer": {
         "attachments": {
-          "sensitive": "标记附件为敏感内容"
+          "sensitive": "标记附件为敏感内容",
+          "remove": {
+            "accessibilityLabel": "删除已上传的附件，序号{{attachment}}"
+          },
+          "edit": {
+            "accessibilityLabel": "编辑已上传的附件，序号{{attachment}}"
+          },
+          "upload": {
+            "accessibilityLabel": "上传更多附件"
+          }
+        },
+        "emojis": {
+          "accessibilityHint": "点击添加表情符号至嘟文"
         },
         "poll": {
           "option": {
             "placeholder": {
+              "accessibilityLabel": "选项{{index}}",
               "single": "单选项",
               "multiple": "多选项"
             }
           },
+          "quantity": {
+            "reduce": {
+              "accessibilityLabel": "减少至{{amount}}选项",
+              "accessibilityHint": "已达到最低选项数，目前有{{amount}}选项"
+            },
+            "increase": {
+              "accessibilityLabel": "增加至{{amount}}选项",
+              "accessibilityHint": "已达到最高选项数，目前有{{amount}}选项"
+            }
+          },
           "multiple": {
             "heading": "可选项",
             "options": {
@@ -79,6 +102,8 @@
       },
       "actions": {
         "attachment": {
+          "accessibilityLabel": "上传附件",
+          "accessibilityHint": "当有任何附件时，投票功能将被禁用",
           "actions": {
             "options": {
               "library": "从相册上传",
@@ -113,7 +138,12 @@
             }
           }
         },
+        "poll": {
+          "accessibilityLabel": "发起投票",
+          "accessibilityHint": "当启用投票功能时，附件功能将被禁用"
+        },
         "visibility": {
+          "accessibilityLabel": "此嘟文可见性为{{visibility}}",
           "title": "嘟文可见范围",
           "options": {
             "public": "公开",
@@ -122,6 +152,13 @@
             "direct": "私信",
             "cancel": "$t(common:buttons.cancel)"
           }
+        },
+        "spoiler": {
+          "accessibilityLabel": "剧透"
+        },
+        "emoji": {
+          "accessibilityLabel": "添加表情符号",
+          "accessibilityHint": "打开表情选择面板，水平滑动切换页面"
         }
       },
       "drafts": "草稿 ({{count}})",
@@ -131,6 +168,7 @@
       "header": {
         "title": "编辑附件",
         "right": {
+          "accessibilityLabel": "保存编辑附件",
           "failed": {
             "title": "编辑失败",
             "button": "返回重试"
@@ -150,6 +188,7 @@
         "title": "草稿"
       },
       "content": {
+        "accessibilityHint": "已保存的草稿，点击编辑此草稿",
         "textEmpty": "无正文内容"
       }
     }

src/i18n/zh-Hans/screens/imageViewer.json

@@ -1,5 +1,9 @@
 {
   "content": {
+    "actions": {
+      "accessibilityLabel": "更多此图像的操作",
+      "accessibilityHint": "您可以保存或分享此图片"
+    },
     "options": {
       "save": "保存图片",
       "share": "分享图片",

src/i18n/zh-Hans/screens/tabs.json

@@ -17,6 +17,18 @@
       "name": "关于我"
     }
   },
+  "common": {
+    "search": {
+      "accessibilityLabel": "搜索",
+      "accessibilityHint": "搜索标签、用户或嘟文"
+    }
+  },
+  "notifications": {
+    "filter": {
+      "accessibilityLabel": "筛选",
+      "accessibilityHint": "筛选显示的通知类型"
+    }
+  },
   "me": {
     "stacks": {
       "bookmarks": {
@@ -175,6 +187,10 @@
   },
   "shared": {
     "account": {
+      "actions": {
+        "accessibilityLabel": "对用户{{user}} 的操作",
+        "accessibilityHint": "您可以静音、屏蔽、举报或分享此用户"
+      },
       "moved": "账户已迁移",
       "created_at": "注册时间：{{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.tsx

@@ -195,7 +195,7 @@ const ScreenCompose: React.FC<ScreenComposeProp> = ({
     const autoSave = composeState.dirty
       ? setInterval(() => {
           saveDraft()
-        }, 2000)
+        }, 1000)
       : removeDraft()
     return () => autoSave && clearInterval(autoSave)
   }, [composeState])

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.tsx

@@ -21,7 +21,6 @@ const ComposeEditAttachment: React.FC<ScreenComposeEditAttachmentProp> = ({
   },
   navigation
 }) => {
-  console.log('rendering')
   const { t } = useTranslation('screenCompose')
 
   const headerLeft = useCallback(

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 }]}>
-        {t('content.editAttachment.content.imageFocus')}
-      </Text>
+      {screenReaderEnabled ? null : (
+        <Text style={[styles.imageFocusText, { color: theme.primaryDefault }]}>
+          {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 ||
-              0}`
+            `${theAttachment.meta?.focus?.x || 0},${-theAttachment.meta?.focus
+              ?.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 { FlatList, StyleSheet, View } from 'react-native'
+import React, {
+  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.attachments.uploads.length ? <ComposeAttachments /> : null}
+      {composeState.emoji.active ? (
+        <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 { Pressable, SectionList, StyleSheet, Text, View } from 'react-native'
+import React, {
+  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/ImageViewer/save.ts

@@ -0,0 +1,44 @@
+import haptics from '@components/haptics'
+import CameraRoll from '@react-native-community/cameraroll'
+import { FileSystem, Permissions } from 'react-native-unimodules'
+
+const saveIos = async (
+  image: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'][0]
+) => {
+  CameraRoll.save(image.url)
+    .then(() => haptics('Success'))
+    .catch(() => {
+      if (image.remote_url) {
+        CameraRoll.save(image.remote_url)
+          .then(() => haptics('Success'))
+          .catch(() => haptics('Error'))
+      } else {
+        haptics('Error')
+      }
+    })
+}
+
+const saveAndroid = async (
+  image: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'][0]
+) => {
+  const fileUri: string = `${FileSystem.documentDirectory}test.jpg`
+  const downloadedFile: FileSystem.FileSystemDownloadResult = await FileSystem.downloadAsync(
+    image.url,
+    fileUri
+  )
+
+  if (downloadedFile.status != 200) {
+    console.warn('error!')
+  }
+
+  const perm = await Permissions.askAsync(Permissions.MEDIA_LIBRARY)
+  if (perm.status != 'granted') {
+    return
+  }
+
+  CameraRoll.save(downloadedFile.uri)
+    .then(() => haptics('Success'))
+    .catch(() => haptics('Error'))
+}
+
+export { saveIos, saveAndroid }

src/screens/ImagesViewer.tsx

@@ -1,19 +1,11 @@
 import analytics from '@components/analytics'
-import haptics from '@components/haptics'
 import { HeaderCenter, HeaderLeft, HeaderRight } from '@components/Header'
 import { useActionSheet } from '@expo/react-native-action-sheet'
-import CameraRoll from '@react-native-community/cameraroll'
 import { StackScreenProps } from '@react-navigation/stack'
 import { findIndex } from 'lodash'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  PermissionsAndroid,
-  Platform,
-  Share,
-  StatusBar,
-  View
-} from 'react-native'
+import { Platform, Share, StatusBar, View } from 'react-native'
 import {
   SafeAreaProvider,
   useSafeAreaInsets
@@ -23,35 +15,11 @@ import ImageViewer from './ImageViewer/Root'
 const saveImage = async (
   image: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'][0]
 ) => {
-  if (Platform.OS === 'ios') {
-    CameraRoll.save(image.url)
-      .then(() => haptics('Success'))
-      .catch(() => {
-        if (image.remote_url) {
-          CameraRoll.save(image.remote_url)
-            .then(() => haptics('Success'))
-            .catch(() => haptics('Error'))
-        } else {
-          haptics('Error')
-        }
-      })
-  } else if (Platform.OS === 'android') {
-    const hasAndroidPermission = async () => {
-      const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
-
-      const hasPermission = await PermissionsAndroid.check(permission)
-      if (hasPermission) {
-        return true
-      }
-
-      const status = await PermissionsAndroid.request(permission)
-      return status === 'granted'
-    }
-
-    if (!(await hasAndroidPermission())) {
-      return
-    }
-  }
+  const save = require('./ImageViewer/save')
+  Platform.select({
+    ios: save.saveIos(image),
+    android: save.saveAndroid(image)
+  })
 }
 
 const HeaderComponent = React.memo(
@@ -120,6 +88,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