React Native accessibility (#539)

* React Native accessibility

* First round of changes

* Latest update

* Checkpoint

* Wrap up

* Lint

* Remove unhelpful image hints

* Fix navigation

* Fix rebase and lint

* Mitigate an known issue with the password entry in login

* Fix composer dismiss

* Remove focus on input elements for web

* Remove i and npm

* pls work

* Remove stray declaration

* Regenerate yarn.lock

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/view/com/composer/photos/Gallery.tsx

@@ -107,6 +107,9 @@ export const Gallery = observer(function ({gallery}: Props) {
           <View key={`selected-image-${image.path}`} style={[imageStyle]}>
             <TouchableOpacity
               testID="altTextButton"
+              accessibilityRole="button"
+              accessibilityLabel="Add alt text"
+              accessibilityHint="Opens modal for inputting image alt text"
               onPress={() => {
                 handleAddImageAltText(image)
               }}
@@ -116,6 +119,9 @@ export const Gallery = observer(function ({gallery}: Props) {
             <View style={imageControlsSubgroupStyle}>
               <TouchableOpacity
                 testID="cropPhotoButton"
+                accessibilityRole="button"
+                accessibilityLabel="Crop image"
+                accessibilityHint="Opens modal for cropping image"
                 onPress={() => {
                   handleEditPhoto(image)
                 }}
@@ -128,6 +134,9 @@ export const Gallery = observer(function ({gallery}: Props) {
               </TouchableOpacity>
               <TouchableOpacity
                 testID="removePhotoButton"
+                accessibilityRole="button"
+                accessibilityLabel="Remove image"
+                accessibilityHint=""
                 onPress={() => handleRemovePhoto(image)}
                 style={styles.imageControl}>
                 <FontAwesomeIcon
@@ -144,6 +153,8 @@ export const Gallery = observer(function ({gallery}: Props) {
               source={{
                 uri: image.compressed.path,
               }}
+              accessible={true}
+              accessibilityIgnoresInvertColors
             />
           </View>
         ) : null,

src/view/com/composer/photos/OpenCameraBtn.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback} from 'react'
-import {TouchableOpacity} from 'react-native'
+import {TouchableOpacity, StyleSheet} from 'react-native'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
@@ -7,7 +7,6 @@ import {
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnalytics} from 'lib/analytics'
 import {useStores} from 'state/index'
-import {s} from 'lib/styles'
 import {isDesktopWeb} from 'platform/detection'
 import {openCamera} from 'lib/media/picker'
 import {useCameraPermission} from 'lib/hooks/usePermissions'
@@ -54,8 +53,11 @@ export function OpenCameraBtn({gallery}: Props) {
     <TouchableOpacity
       testID="openCameraButton"
       onPress={onPressTakePicture}
-      style={[s.pl5]}
-      hitSlop={HITSLOP}>
+      style={styles.button}
+      hitSlop={HITSLOP}
+      accessibilityRole="button"
+      accessibilityLabel="Camera"
+      accessibilityHint="Opens camera on device">
       <FontAwesomeIcon
         icon="camera"
         style={pal.link as FontAwesomeIconStyle}
@@ -64,3 +66,9 @@ export function OpenCameraBtn({gallery}: Props) {
     </TouchableOpacity>
   )
 }
+
+const styles = StyleSheet.create({
+  button: {
+    paddingHorizontal: 15,
+  },
+})

src/view/com/composer/photos/SelectPhotoBtn.tsx

@@ -1,12 +1,11 @@
 import React, {useCallback} from 'react'
-import {TouchableOpacity} from 'react-native'
+import {TouchableOpacity, StyleSheet} from 'react-native'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnalytics} from 'lib/analytics'
-import {s} from 'lib/styles'
 import {isDesktopWeb} from 'platform/detection'
 import {usePhotoLibraryPermission} from 'lib/hooks/usePermissions'
 import {GalleryModel} from 'state/models/media/gallery'
@@ -36,8 +35,11 @@ export function SelectPhotoBtn({gallery}: Props) {
     <TouchableOpacity
       testID="openGalleryBtn"
       onPress={onPressSelectPhotos}
-      style={[s.pl5, s.pr20]}
-      hitSlop={HITSLOP}>
+      style={styles.button}
+      hitSlop={HITSLOP}
+      accessibilityRole="button"
+      accessibilityLabel="Gallery"
+      accessibilityHint="Opens device photo gallery">
       <FontAwesomeIcon
         icon={['far', 'image']}
         style={pal.link as FontAwesomeIconStyle}
@@ -46,3 +48,9 @@ export function SelectPhotoBtn({gallery}: Props) {
     </TouchableOpacity>
   )
 }
+
+const styles = StyleSheet.create({
+  button: {
+    paddingHorizontal: 15,
+  },
+})