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/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: {

src/view/shell/desktop/RightNav.tsx

@@ -61,7 +61,14 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
       <View>
         <TouchableOpacity
           style={[styles.darkModeToggle]}
-          onPress={onDarkmodePress}>
+          onPress={onDarkmodePress}
+          accessibilityRole="button"
+          accessibilityLabel="Toggle dark mode"
+          accessibilityHint={
+            mode === 'Dark'
+              ? 'Sets display to light mode'
+              : 'Sets display to dark mode'
+          }>
           <View style={[pal.viewLight, styles.darkModeToggleIcon]}>
             <MoonIcon size={18} style={pal.textLight} />
           </View>
@@ -78,13 +85,22 @@ const InviteCodes = observer(() => {
   const store = useStores()
   const pal = usePalette('default')
 
+  const {invitesAvailable} = store.me
+
   const onPress = React.useCallback(() => {
     store.shell.openModal({name: 'invite-codes'})
   }, [store])
   return (
     <TouchableOpacity
       style={[styles.inviteCodes, pal.border]}
-      onPress={onPress}>
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={
+        invitesAvailable === 1
+          ? 'Invite codes: 1 available'
+          : `Invite codes: ${invitesAvailable} available`
+      }
+      accessibilityHint="Opens list of invite codes">
       <FontAwesomeIcon
         icon="ticket"
         style={[

src/view/shell/desktop/Search.tsx

@@ -67,10 +67,16 @@ export const DesktopSearch = observer(function DesktopSearch() {
             onBlur={() => setIsInputFocused(false)}
             onChangeText={onChangeQuery}
             onSubmitEditing={onSubmit}
+            accessibilityRole="search"
           />
           {query ? (
             <View style={styles.cancelBtn}>
-              <TouchableOpacity onPress={onPressCancelSearch}>
+              <TouchableOpacity
+                onPress={onPressCancelSearch}
+                accessibilityRole="button"
+                accessibilityLabel="Cancel search"
+                accessibilityHint="Exits inputting search query"
+                onAccessibilityEscape={onPressCancelSearch}>
                 <Text type="lg" style={[pal.link]}>
                   Cancel
                 </Text>