zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

a11y cleanup for mute lists (#614)

zio/stable
Ollie H 2023-05-11 14:30:27 -07:00 committed by GitHub
parent ebcd633386
commit c2a8713ff4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/view/com/lists/ListItems.tsx
View File

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

2
src/view/com/modals/ContentFilteringSettings.tsx
View File

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

16
src/view/com/modals/CreateOrEditMuteList.tsx
View File

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

8
src/view/com/modals/ListAddRemoveUser.tsx
View File

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

5
src/view/com/util/forms/Button.tsx
View File

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

3
src/view/screens/Moderation.tsx
View File

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

8
src/view/screens/ProfileList.tsx
View File

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