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>

4 files changed, 32 insertions, 7 deletions

diff --git a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx
index 6880008e4..84e5f90fb 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx
+++ b/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>
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
index 12d37e283..658735724 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
+++ b/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}
diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx
index c10d57b37..531df129e 100644
--- a/src/view/com/lightbox/ImageViewing/index.tsx
+++ b/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}]}>
diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx
index c17356d94..1d4a9c215 100644
--- a/src/view/com/lightbox/Lightbox.web.tsx
+++ b/src/view/com/lightbox/Lightbox.web.tsx
@@ -89,13 +89,25 @@ function LightboxInner({
 
   return (
     <View style={styles.mask}>
-      <TouchableWithoutFeedback onPress={onClose}>
+      <TouchableWithoutFeedback
+        onPress={onClose}
+        accessibilityRole="button"
+        accessibilityLabel="Close image viewer"
+        accessibilityHint="Exits image view"
+        onAccessibilityEscape={onClose}>
         <View style={styles.imageCenterer}>
-          <Image source={imgs[index]} style={styles.image} />
+          <Image
+            accessibilityIgnoresInvertColors
+            source={imgs[index]}
+            style={styles.image}
+          />
           {canGoLeft && (
             <TouchableOpacity
               onPress={onPressLeft}
-              style={[styles.btn, styles.leftBtn]}>
+              style={[styles.btn, styles.leftBtn]}
+              accessibilityRole="button"
+              accessibilityLabel="Go back"
+              accessibilityHint="Navigates to previous image in viewer">
               <FontAwesomeIcon
                 icon="angle-left"
                 style={styles.icon}
@@ -106,7 +118,10 @@ function LightboxInner({
           {canGoRight && (
             <TouchableOpacity
               onPress={onPressRight}
-              style={[styles.btn, styles.rightBtn]}>
+              style={[styles.btn, styles.rightBtn]}
+              accessibilityRole="button"
+              accessibilityLabel="Go to next"
+              accessibilityHint="Navigates to next image in viewer">
               <FontAwesomeIcon
                 icon="angle-right"
                 style={styles.icon}