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>

1 files changed, 37 insertions, 25 deletions

diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index b4b219023..86f1a3ef3 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -2,7 +2,11 @@ import React from 'react'
 import {observer} from 'mobx-react-lite'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {PressableWithHover} from 'view/com/util/PressableWithHover'
-import {useNavigation, useNavigationState} from '@react-navigation/native'
+import {
+  useLinkProps,
+  useNavigation,
+  useNavigationState,
+} from '@react-navigation/native'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
@@ -59,7 +63,10 @@ function BackBtn() {
     <TouchableOpacity
       testID="viewHeaderBackOrMenuBtn"
       onPress={onPressBack}
-      style={styles.backBtn}>
+      style={styles.backBtn}
+      accessibilityRole="button"
+      accessibilityLabel="Go back"
+      accessibilityHint="Navigates to the previous screen">
       <FontAwesomeIcon
         size={24}
         icon="angle-left"
@@ -86,25 +93,28 @@ const NavItem = observer(
       }
       return getCurrentRoute(state).name
     })
+
     const isCurrent = isTab(currentRouteName, pathName)
+    const {onPress} = useLinkProps({to: href})
 
     return (
       <PressableWithHover
         style={styles.navItemWrapper}
-        hoverStyle={pal.viewLight}>
-        <Link href={href} style={styles.navItem}>
-          <View style={[styles.navItemIconWrapper]}>
-            {isCurrent ? iconFilled : icon}
-            {typeof count === 'string' && count ? (
-              <Text type="button" style={styles.navItemCount}>
-                {count}
-              </Text>
-            ) : null}
-          </View>
-          <Text type="title" style={[isCurrent ? s.bold : s.normal, pal.text]}>
-            {label}
-          </Text>
-        </Link>
+        hoverStyle={pal.viewLight}
+        onPress={onPress}
+        accessibilityLabel={label}
+        accessibilityHint={`Navigates to ${label}`}>
+        <View style={[styles.navItemIconWrapper]}>
+          {isCurrent ? iconFilled : icon}
+          {typeof count === 'string' && count ? (
+            <Text type="button" style={styles.navItemCount}>
+              {count}
+            </Text>
+          ) : null}
+        </View>
+        <Text type="title" style={[isCurrent ? s.bold : s.normal, pal.text]}>
+          {label}
+        </Text>
       </PressableWithHover>
     )
   },
@@ -115,7 +125,12 @@ function ComposeBtn() {
   const onPressCompose = () => store.shell.openComposer({})
 
   return (
-    <TouchableOpacity style={[styles.newPostBtn]} onPress={onPressCompose}>
+    <TouchableOpacity
+      style={[styles.newPostBtn]}
+      onPress={onPressCompose}
+      accessibilityRole="button"
+      accessibilityLabel="New post"
+      accessibilityHint="Opens post composer">
       <View style={styles.newPostBtnIconWrapper}>
         <ComposeIcon2
           size={19}
@@ -202,7 +217,7 @@ const styles = StyleSheet.create({
 
   profileCard: {
     marginVertical: 10,
-    width: 60,
+    width: 90,
     paddingLeft: 12,
   },
 
@@ -215,21 +230,18 @@ const styles = StyleSheet.create({
   },
 
   navItemWrapper: {
-    paddingHorizontal: 12,
-    borderRadius: 8,
-  },
-  navItem: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingTop: 12,
-    paddingBottom: 12,
+    paddingHorizontal: 12,
+    padding: 12,
+    borderRadius: 8,
+    gap: 10,
   },
   navItemIconWrapper: {
     alignItems: 'center',
     justifyContent: 'center',
     width: 28,
     height: 28,
-    marginRight: 10,
     marginTop: 2,
   },
   navItemCount: {