a11y label cleanup (#576)

This commit is contained in:
Ollie H
2023-05-03 22:53:49 -07:00
committed by GitHub
parent 0f68e6a6ff
commit 011baa78c1
12 changed files with 56 additions and 67 deletions
+7 -11
View File
@@ -171,7 +171,7 @@ export const DrawerContent = observer(() => {
}
label="Search"
accessibilityLabel="Search"
accessibilityHint="Search through users and posts"
accessibilityHint=""
bold={isAtSearch}
onPress={onPressSearch}
/>
@@ -193,7 +193,7 @@ export const DrawerContent = observer(() => {
}
label="Home"
accessibilityLabel="Home"
accessibilityHint="Navigates to default feed"
accessibilityHint=""
bold={isAtHome}
onPress={onPressHome}
/>
@@ -214,12 +214,8 @@ export const DrawerContent = observer(() => {
)
}
label="Notifications"
accessibilityLabel={
notifications.unreadCountLabel === '1'
? 'Notifications: 1 unread notification'
: `Notifications: ${notifications.unreadCountLabel} unread notifications`
}
accessibilityHint="Opens notification feed"
accessibilityLabel="Notifications"
accessibilityHint={`${store.me.notifications.unreadCountLabel} unread`}
count={notifications.unreadCountLabel}
bold={isAtNotifications}
onPress={onPressNotifications}
@@ -242,7 +238,7 @@ export const DrawerContent = observer(() => {
}
label="Profile"
accessibilityLabel="Profile"
accessibilityHint="See profile display name, avatar, description, and other profile items"
accessibilityHint=""
onPress={onPressProfile}
/>
<MenuItem
@@ -255,7 +251,7 @@ export const DrawerContent = observer(() => {
}
label="Settings"
accessibilityLabel="Settings"
accessibilityHint="Manage settings for your account, like handle, content moderation, and app passwords"
accessibilityHint=""
onPress={onPressSettings}
/>
</View>
@@ -332,7 +328,7 @@ function MenuItem({
testID={`menuItemButton-${label}`}
style={styles.menuItem}
onPress={onPress}
accessibilityRole="menuitem"
accessibilityRole="tab"
accessibilityLabel={accessibilityLabel}
accessibilityHint="">
<View style={[styles.menuItemIconWrapper]}>
+16 -5
View File
@@ -94,8 +94,9 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
)
}
onPress={onPressHome}
accessibilityLabel="Go home"
accessibilityHint="Navigates to feed home"
accessibilityRole="tab"
accessibilityLabel="Home"
accessibilityHint=""
/>
<Btn
testID="bottomBarSearchBtn"
@@ -116,6 +117,8 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
}
onPress={onPressSearch}
accessibilityRole="search"
accessibilityLabel="Search"
accessibilityHint=""
/>
<Btn
testID="bottomBarNotificationsBtn"
@@ -136,8 +139,10 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
}
onPress={onPressNotifications}
notificationCount={store.me.notifications.unreadCountLabel}
accessible={true}
accessibilityRole="tab"
accessibilityLabel="Notifications"
accessibilityHint="Navigates to notifications"
accessibilityHint={`${store.me.notifications.unreadCountLabel} unread`}
/>
<Btn
testID="bottomBarProfileBtn"
@@ -159,8 +164,9 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
</View>
}
onPress={onPressProfile}
accessibilityRole="tab"
accessibilityLabel="Profile"
accessibilityHint="Navigates to profile"
accessibilityHint=""
/>
</Animated.View>
)
@@ -169,7 +175,10 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
interface BtnProps
extends Pick<
ComponentProps<typeof TouchableOpacity>,
'accessibilityRole' | 'accessibilityHint' | 'accessibilityLabel'
| 'accessible'
| 'accessibilityRole'
| 'accessibilityHint'
| 'accessibilityLabel'
> {
testID?: string
icon: JSX.Element
@@ -184,6 +193,7 @@ function Btn({
notificationCount,
onPress,
onLongPress,
accessible,
accessibilityHint,
accessibilityLabel,
}: BtnProps) {
@@ -194,6 +204,7 @@ function Btn({
onPress={onLongPress ? onPress : undefined}
onPressIn={onLongPress ? undefined : onPress}
onLongPress={onLongPress}
accessible={accessible}
accessibilityLabel={accessibilityLabel}
accessibilityHint={accessibilityHint}>
{notificationCount ? (
+5 -4
View File
@@ -66,7 +66,7 @@ function BackBtn() {
style={styles.backBtn}
accessibilityRole="button"
accessibilityLabel="Go back"
accessibilityHint="Navigates to the previous screen">
accessibilityHint="">
<FontAwesomeIcon
size={24}
icon="angle-left"
@@ -102,8 +102,9 @@ const NavItem = observer(
style={styles.navItemWrapper}
hoverStyle={pal.viewLight}
onPress={onPress}
accessibilityRole="tab"
accessibilityLabel={label}
accessibilityHint={`Navigates to ${label}`}>
accessibilityHint="">
<View style={[styles.navItemIconWrapper]}>
{isCurrent ? iconFilled : icon}
{typeof count === 'string' && count ? (
@@ -129,8 +130,8 @@ function ComposeBtn() {
style={[styles.newPostBtn]}
onPress={onPressCompose}
accessibilityRole="button"
accessibilityLabel="New post"
accessibilityHint="Opens post composer">
accessibilityLabel="Compose post"
accessibilityHint="">
<View style={styles.newPostBtnIconWrapper}>
<ComposeIcon2
size={19}
+2
View File
@@ -68,6 +68,8 @@ export const DesktopSearch = observer(function DesktopSearch() {
onChangeText={onChangeQuery}
onSubmitEditing={onSubmit}
accessibilityRole="search"
accessibilityLabel="Search"
accessibilityHint=""
/>
{query ? (
<View style={styles.cancelBtn}>