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/notifications/FeedItem.tsx

@@ -123,7 +123,8 @@ export const FeedItem = observer(function ({
         testID={`feedItem-by-${item.author.handle}`}
         href={itemHref}
         title={itemTitle}
-        noFeedback>
+        noFeedback
+        accessible={false}>
         <Post
           uri={item.uri}
           initView={item.additionalPost}
@@ -163,6 +164,7 @@ export const FeedItem = observer(function ({
   }
 
   return (
+    // eslint-disable-next-line
     <Link
       testID={`feedItem-by-${item.author.handle}`}
       style={[
@@ -178,8 +180,11 @@ export const FeedItem = observer(function ({
       ]}
       href={itemHref}
       title={itemTitle}
-      noFeedback>
+      noFeedback
+      accessible={(item.isLike && authors.length === 1) || item.isRepost}>
       <View style={styles.layoutIcon}>
+        {/* TODO: Prevent conditional rendering and move toward composable
+        notifications for clearer accessibility labeling */}
         {icon === 'HeartIconSolid' ? (
           <HeartIconSolid size={28} style={[styles.icon, ...iconStyle]} />
         ) : (
@@ -192,17 +197,18 @@ export const FeedItem = observer(function ({
       </View>
       <View style={styles.layoutContent}>
         <Pressable
-          onPress={authors.length > 1 ? onToggleAuthorsExpanded : () => {}}>
+          onPress={authors.length > 1 ? onToggleAuthorsExpanded : undefined}
+          accessible={false}>
           <CondensedAuthorsList
             visible={!isAuthorsExpanded}
             authors={authors}
             onToggleAuthorsExpanded={onToggleAuthorsExpanded}
           />
           <ExpandedAuthorsList visible={isAuthorsExpanded} authors={authors} />
-          <View style={styles.meta}>
+          <Text style={styles.meta}>
             <TextLink
               key={authors[0].href}
-              style={[pal.text, s.bold, styles.metaItem]}
+              style={[pal.text, s.bold]}
               href={authors[0].href}
               text={sanitizeDisplayName(
                 authors[0].displayName || authors[0].handle,
@@ -210,17 +216,15 @@ export const FeedItem = observer(function ({
             />
             {authors.length > 1 ? (
               <>
-                <Text style={[styles.metaItem, pal.text]}>and</Text>
-                <Text style={[styles.metaItem, pal.text, s.bold]}>
+                <Text style={[pal.text]}> and </Text>
+                <Text style={[pal.text, s.bold]}>
                   {authors.length - 1} {pluralize(authors.length - 1, 'other')}
                 </Text>
               </>
             ) : undefined}
-            <Text style={[styles.metaItem, pal.text]}>{action}</Text>
-            <Text style={[styles.metaItem, pal.textLight]}>
-              {ago(item.indexedAt)}
-            </Text>
-          </View>
+            <Text style={[pal.text]}> {action}</Text>
+            <Text style={[pal.textLight]}> {ago(item.indexedAt)}</Text>
+          </Text>
         </Pressable>
         {item.isLike || item.isRepost || item.isQuote ? (
           <AdditionalPostText additionalPost={item.additionalPost} />
@@ -245,7 +249,10 @@ function CondensedAuthorsList({
       <View style={styles.avis}>
         <TouchableOpacity
           style={styles.expandedAuthorsCloseBtn}
-          onPress={onToggleAuthorsExpanded}>
+          onPress={onToggleAuthorsExpanded}
+          accessibilityRole="button"
+          accessibilityLabel="Hide user list"
+          accessibilityHint="Collapses list of users for a given notification">
           <FontAwesomeIcon
             icon="angle-up"
             size={18}
@@ -276,27 +283,32 @@ function CondensedAuthorsList({
     )
   }
   return (
-    <View style={styles.avis}>
-      {authors.slice(0, MAX_AUTHORS).map(author => (
-        <View key={author.href} style={s.mr5}>
-          <UserAvatar
-            size={35}
-            avatar={author.avatar}
-            moderation={author.moderation.avatar}
-          />
-        </View>
-      ))}
-      {authors.length > MAX_AUTHORS ? (
-        <Text style={[styles.aviExtraCount, pal.textLight]}>
-          +{authors.length - MAX_AUTHORS}
-        </Text>
-      ) : undefined}
-      <FontAwesomeIcon
-        icon="angle-down"
-        size={18}
-        style={[styles.expandedAuthorsCloseBtnIcon, pal.textLight]}
-      />
-    </View>
+    <TouchableOpacity
+      accessibilityLabel="Show users"
+      accessibilityHint="Opens an expanded list of users in this notification"
+      onPress={onToggleAuthorsExpanded}>
+      <View style={styles.avis}>
+        {authors.slice(0, MAX_AUTHORS).map(author => (
+          <View key={author.href} style={s.mr5}>
+            <UserAvatar
+              size={35}
+              avatar={author.avatar}
+              moderation={author.moderation.avatar}
+            />
+          </View>
+        ))}
+        {authors.length > MAX_AUTHORS ? (
+          <Text style={[styles.aviExtraCount, pal.textLight]}>
+            +{authors.length - MAX_AUTHORS}
+          </Text>
+        ) : undefined}
+        <FontAwesomeIcon
+          icon="angle-down"
+          size={18}
+          style={[styles.expandedAuthorsCloseBtnIcon, pal.textLight]}
+        />
+      </View>
+    </TouchableOpacity>
   )
 }
 
@@ -426,9 +438,6 @@ const styles = StyleSheet.create({
     paddingTop: 6,
     paddingBottom: 2,
   },
-  metaItem: {
-    paddingRight: 3,
-  },
   postText: {
     paddingBottom: 5,
     color: colors.black,