a11y cleanup for mute lists (#614)

src/view/com/lists/ListItems.tsx

@@ -306,16 +306,16 @@ const ListHeader = observer(
                   <Button
                     type="inverted"
                     label="Unsubscribe"
-                    accessibilityLabel="Unsubscribe from this list"
-                    accessibilityHint="Stops muting the users included in this list"
+                    accessibilityLabel="Unsubscribe"
+                    accessibilityHint=""
                     onPress={onToggleSubscribed}
                   />
                 ) : (
                   <Button
                     type="primary"
                     label="Subscribe & Mute"
-                    accessibilityLabel="Subscribe to this list"
-                    accessibilityHint="Mutes the users included in this list"
+                    accessibilityLabel="Subscribe and mute"
+                    accessibilityHint=""
                     onPress={onToggleSubscribed}
                   />
                 )}
@@ -324,7 +324,7 @@ const ListHeader = observer(
                     type="default"
                     label="Edit List"
                     accessibilityLabel="Edit list"
-                    accessibilityHint="Opens a modal to edit the mutelist"
+                    accessibilityHint=""
                     onPress={onPressEditList}
                   />
                 )}
@@ -333,7 +333,7 @@ const ListHeader = observer(
                     type="default"
                     label="Delete List"
                     accessibilityLabel="Delete list"
-                    accessibilityHint="Deletes the mutelist"
+                    accessibilityHint=""
                     onPress={onPressDeleteList}
                   />
                 )}

src/view/com/modals/ContentFilteringSettings.tsx

@@ -50,7 +50,7 @@ export function Component({}: {}) {
           testID="sendReportBtn"
           onPress={onPressDone}
           accessibilityRole="button"
-          accessibilityLabel="Confirm content filtering settings"
+          accessibilityLabel="Done"
           accessibilityHint="">
           <LinearGradient
             colors={[gradients.blueLight.start, gradients.blueLight.end]}

src/view/com/modals/CreateOrEditMuteList.tsx

@@ -150,7 +150,9 @@ export function Component({
         </View>
         <View style={styles.form}>
           <View>
-            <Text style={[styles.label, pal.text]}>List Name</Text>
+            <Text style={[styles.label, pal.text]} nativeID="list-name">
+              List Name
+            </Text>
             <TextInput
               testID="editNameInput"
               style={[styles.textInput, pal.border, pal.text]}
@@ -160,11 +162,14 @@ export function Component({
               onChangeText={v => setName(enforceLen(v, MAX_NAME))}
               accessible={true}
               accessibilityLabel="Name"
-              accessibilityHint="Set the list's name"
+              accessibilityHint=""
+              accessibilityLabelledBy="list-name"
             />
           </View>
           <View style={s.pb10}>
-            <Text style={[styles.label, pal.text]}>Description</Text>
+            <Text style={[styles.label, pal.text]} nativeID="list-description">
+              Description
+            </Text>
             <TextInput
               testID="editDescriptionInput"
               style={[styles.textArea, pal.border, pal.text]}
@@ -176,7 +181,8 @@ export function Component({
               onChangeText={v => setDescription(enforceLen(v, MAX_DESCRIPTION))}
               accessible={true}
               accessibilityLabel="Description"
-              accessibilityHint="Edit your list's description"
+              accessibilityHint=""
+              accessibilityLabelledBy="list-description"
             />
           </View>
           {isProcessing ? (
@@ -205,7 +211,7 @@ export function Component({
             style={s.mt5}
             onPress={onPressCancel}
             accessibilityRole="button"
-            accessibilityLabel="Cancel creating the mute list"
+            accessibilityLabel="Cancel"
             accessibilityHint=""
             onAccessibilityEscape={onPressCancel}>
             <View style={[styles.btn]}>

src/view/com/modals/ListAddRemoveUser.tsx

@@ -104,7 +104,7 @@ export const Component = observer(
             accessibilityLabel={`${isSelected ? 'Remove from' : 'Add to'} ${
               list.name
             }`}
-            accessibilityHint="Toggle their inclusion in this list"
+            accessibilityHint=""
             onPress={() => onToggleSelected(list.uri)}>
             <View style={styles.listItemAvi}>
               <UserAvatar size={40} avatar={list.avatar} />
@@ -172,8 +172,7 @@ export const Component = observer(
             type="default"
             onPress={onPressCancel}
             style={styles.footerBtn}
-            accessibilityRole="button"
-            accessibilityLabel="Cancel this modal"
+            accessibilityLabel="Cancel"
             accessibilityHint=""
             onAccessibilityEscape={onPressCancel}
             label="Cancel"
@@ -183,8 +182,7 @@ export const Component = observer(
             type="primary"
             onPress={onPressSave}
             style={styles.footerBtn}
-            accessibilityRole="button"
-            accessibilityLabel="Save these changes"
+            accessibilityLabel="Save changes"
             accessibilityHint=""
             onAccessibilityEscape={onPressSave}
             label="Save Changes"

src/view/com/util/forms/Button.tsx

@@ -38,6 +38,7 @@ export function Button({
   accessibilityLabel,
   accessibilityHint,
   accessibilityLabelledBy,
+  onAccessibilityEscape,
 }: React.PropsWithChildren<{
   type?: ButtonType
   label?: string
@@ -48,6 +49,7 @@ export function Button({
   accessibilityLabel?: string
   accessibilityHint?: string
   accessibilityLabelledBy?: string
+  onAccessibilityEscape?: () => void
 }>) {
   const theme = useTheme()
   const typeOuterStyle = choose<ViewStyle, Record<ButtonType, ViewStyle>>(
@@ -142,7 +144,8 @@ export function Button({
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
-      accessibilityLabelledBy={accessibilityLabelledBy}>
+      accessibilityLabelledBy={accessibilityLabelledBy}
+      onAccessibilityEscape={onAccessibilityEscape}>
       {label ? (
         <Text type="button" style={[typeLabelStyle, labelStyle]}>
           {label}

src/view/screens/Moderation.tsx

@@ -51,8 +51,9 @@ export const ModerationScreen = withAuthRequired(
           testID="contentFilteringBtn"
           style={[styles.linkCard, pal.view]}
           onPress={onPressContentFiltering}
+          accessibilityRole="tab"
           accessibilityHint="Content filtering"
-          accessibilityLabel="Opens configurable content filtering settings">
+          accessibilityLabel="">
           <View style={[styles.iconContainer, pal.btn]}>
             <FontAwesomeIcon
               icon="eye"

src/view/screens/ProfileList.tsx

@@ -94,7 +94,7 @@ export const ProfileListScreen = withAuthRequired(
               label="Delete List"
               testID="deleteListBtn"
               accessibilityLabel="Delete list"
-              accessibilityHint="Deletes the mutelist"
+              accessibilityHint=""
               onPress={onPressDeleteList}
             />
           )}
@@ -104,7 +104,7 @@ export const ProfileListScreen = withAuthRequired(
               label="Edit List"
               testID="editListBtn"
               accessibilityLabel="Edit list"
-              accessibilityHint="Opens a modal to edit the mutelist"
+              accessibilityHint=""
               onPress={onPressEditList}
             />
           )}
@@ -113,8 +113,8 @@ export const ProfileListScreen = withAuthRequired(
               type="inverted"
               label="Unsubscribe"
               testID="unsubscribeListBtn"
-              accessibilityLabel="Unsubscribe from this list"
-              accessibilityHint="Stops muting the users included in this list"
+              accessibilityLabel="Unsubscribe from list"
+              accessibilityHint=""
               onPress={onToggleSubscribed}
             />
           ) : (