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/lightbox/ImageViewing/components/ImageDefaultHeader.tsx

@@ -20,7 +20,11 @@ const ImageDefaultHeader = ({onRequestClose}: Props) => (
     <TouchableOpacity
       style={styles.closeButton}
       onPress={onRequestClose}
-      hitSlop={HIT_SLOP}>
+      hitSlop={HIT_SLOP}
+      accessibilityRole="button"
+      accessibilityLabel="Close image"
+      accessibilityHint="Closes viewer for header image"
+      onAccessibilityEscape={onRequestClose}>
       <Text style={styles.closeText}>✕</Text>
     </TouchableOpacity>
   </SafeAreaView>

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx

@@ -127,7 +127,8 @@ const ImageItem = ({
         <TouchableWithoutFeedback
           onPress={doubleTapToZoomEnabled ? handleDoubleTap : undefined}
           onLongPress={onLongPressHandler}
-          delayLongPress={delayLongPress}>
+          delayLongPress={delayLongPress}
+          accessibilityRole="image">
           <Animated.Image
             source={imageSrc}
             style={imageStylesWithOpacity}

src/view/com/lightbox/ImageViewing/index.tsx

@@ -112,7 +112,12 @@ function ImageViewing({
   }
 
   return (
-    <SafeAreaView style={styles.screen} onLayout={onLayout} edges={edges}>
+    <SafeAreaView
+      style={styles.screen}
+      onLayout={onLayout}
+      edges={edges}
+      aria-modal
+      accessibilityViewIsModal>
       <ModalsContainer />
       <View style={[styles.container, {opacity, backgroundColor}]}>
         <Animated.View style={[styles.header, {transform: headerTransform}]}>