From c2a8713ff479beceb24b7b24464b8328cb8f159e Mon Sep 17 00:00:00 2001
From: Ollie H <renahlee@outlook.com>
Date: Thu, 11 May 2023 14:30:27 -0700
Subject: a11y cleanup for mute lists (#614)

---
 src/view/com/lists/ListItems.tsx                 | 12 ++++++------
 src/view/com/modals/ContentFilteringSettings.tsx |  2 +-
 src/view/com/modals/CreateOrEditMuteList.tsx     | 16 +++++++++++-----
 src/view/com/modals/ListAddRemoveUser.tsx        |  8 +++-----
 src/view/com/util/forms/Button.tsx               |  5 ++++-
 src/view/screens/Moderation.tsx                  |  3 ++-
 src/view/screens/ProfileList.tsx                 |  8 ++++----
 7 files changed, 31 insertions(+), 23 deletions(-)

(limited to 'src')

diff --git a/src/view/com/lists/ListItems.tsx b/src/view/com/lists/ListItems.tsx
index 52b728cb9..32cafdb83 100644
--- a/src/view/com/lists/ListItems.tsx
+++ b/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}
                   />
                 )}
diff --git a/src/view/com/modals/ContentFilteringSettings.tsx b/src/view/com/modals/ContentFilteringSettings.tsx
index 5db0ef5a5..91c968684 100644
--- a/src/view/com/modals/ContentFilteringSettings.tsx
+++ b/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]}
diff --git a/src/view/com/modals/CreateOrEditMuteList.tsx b/src/view/com/modals/CreateOrEditMuteList.tsx
index 0970770e2..0c13f243a 100644
--- a/src/view/com/modals/CreateOrEditMuteList.tsx
+++ b/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]}>
diff --git a/src/view/com/modals/ListAddRemoveUser.tsx b/src/view/com/modals/ListAddRemoveUser.tsx
index a2775df9f..91fe67c17 100644
--- a/src/view/com/modals/ListAddRemoveUser.tsx
+++ b/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"
diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx
index 1c9b1cf51..a8f1f363f 100644
--- a/src/view/com/util/forms/Button.tsx
+++ b/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}
diff --git a/src/view/screens/Moderation.tsx b/src/view/screens/Moderation.tsx
index 29ef8b4b2..4c52301cb 100644
--- a/src/view/screens/Moderation.tsx
+++ b/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"
diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx
index a78faaf62..3375c5e64 100644
--- a/src/view/screens/ProfileList.tsx
+++ b/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}
             />
           ) : (
-- 
cgit 1.4.1