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, 31 insertions, 8 deletions

diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx
index ef02e8189..4d21f8e2c 100644
--- a/src/view/screens/Settings.tsx
+++ b/src/view/screens/Settings.tsx
@@ -161,7 +161,9 @@ export const SettingsScreen = withAuthRequired(
             <Link
               href={`/profile/${store.me.handle}`}
               title="Your profile"
-              noFeedback>
+              noFeedback
+              accessibilityLabel={`Signed in as ${store.me.handle}`}
+              accessibilityHint="Double tap to sign out">
               <View style={[pal.view, styles.linkCard]}>
                 <View style={styles.avi}>
                   <UserAvatar size={40} avatar={store.me.avatar} />
@@ -176,7 +178,10 @@ export const SettingsScreen = withAuthRequired(
                 </View>
                 <TouchableOpacity
                   testID="signOutBtn"
-                  onPress={isSwitching ? undefined : onPressSignout}>
+                  onPress={isSwitching ? undefined : onPressSignout}
+                  accessibilityRole="button"
+                  accessibilityLabel="Sign out"
+                  accessibilityHint={`Signs ${store.me.displayName} out of Bluesky`}>
                   <Text type="lg" style={pal.link}>
                     Sign out
                   </Text>
@@ -191,7 +196,10 @@ export const SettingsScreen = withAuthRequired(
               style={[pal.view, styles.linkCard, isSwitching && styles.dimmed]}
               onPress={
                 isSwitching ? undefined : () => onPressSwitchAccount(account)
-              }>
+              }
+              accessibilityRole="button"
+              accessibilityLabel={`Switch to ${account.handle}`}
+              accessibilityHint="Switches the account you are logged in to">
               <View style={styles.avi}>
                 <UserAvatar size={40} avatar={account.aviUrl} />
               </View>
@@ -209,7 +217,10 @@ export const SettingsScreen = withAuthRequired(
           <TouchableOpacity
             testID="switchToNewAccountBtn"
             style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
-            onPress={isSwitching ? undefined : onPressAddAccount}>
+            onPress={isSwitching ? undefined : onPressAddAccount}
+            accessibilityRole="button"
+            accessibilityLabel="Add account"
+            accessibilityHint="Create a new Bluesky account">
             <View style={[styles.iconContainer, pal.btn]}>
               <FontAwesomeIcon
                 icon="plus"
@@ -229,7 +240,10 @@ export const SettingsScreen = withAuthRequired(
           <TouchableOpacity
             testID="inviteFriendBtn"
             style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
-            onPress={isSwitching ? undefined : onPressInviteCodes}>
+            onPress={isSwitching ? undefined : onPressInviteCodes}
+            accessibilityRole="button"
+            accessibilityLabel="Invite"
+            accessibilityHint="Opens invite code list">
             <View
               style={[
                 styles.iconContainer,
@@ -260,7 +274,9 @@ export const SettingsScreen = withAuthRequired(
           <TouchableOpacity
             testID="contentFilteringBtn"
             style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
-            onPress={isSwitching ? undefined : onPressContentFiltering}>
+            onPress={isSwitching ? undefined : onPressContentFiltering}
+            accessibilityHint="Content moderation"
+            accessibilityLabel="Opens configurable content moderation settings">
             <View style={[styles.iconContainer, pal.btn]}>
               <FontAwesomeIcon
                 icon="eye"
@@ -308,7 +324,10 @@ export const SettingsScreen = withAuthRequired(
           <TouchableOpacity
             testID="changeHandleBtn"
             style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
-            onPress={isSwitching ? undefined : onPressChangeHandle}>
+            onPress={isSwitching ? undefined : onPressChangeHandle}
+            accessibilityRole="button"
+            accessibilityLabel="Change handle"
+            accessibilityHint="Choose a new Bluesky username or create">
             <View style={[styles.iconContainer, pal.btn]}>
               <FontAwesomeIcon
                 icon="at"
@@ -327,7 +346,11 @@ export const SettingsScreen = withAuthRequired(
           </Text>
           <TouchableOpacity
             style={[pal.view, styles.linkCard]}
-            onPress={onPressDeleteAccount}>
+            onPress={onPressDeleteAccount}
+            accessible={true}
+            accessibilityRole="button"
+            accessibilityLabel="Delete account"
+            accessibilityHint="Opens modal for account deletion confirmation. Requires email code.">
             <View style={[styles.iconContainer, dangerBg]}>
               <FontAwesomeIcon
                 icon={['far', 'trash-can']}