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

a11y label cleanup (#576)

zio/stable
Ollie H 2023-05-03 22:53:49 -07:00 committed by GitHub
parent 0f68e6a6ff
commit 011baa78c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 56 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/view/com/auth/create/CreateAccount.tsx
View File

@ -75,9 +75,7 @@ export const CreateAccount = observer(
<TouchableOpacity <TouchableOpacity
onPress={onPressBackInner} onPress={onPressBackInner}
testID="backBtn" testID="backBtn"
accessibilityRole="button" accessibilityRole="button">
accessibilityLabel="Go back"
accessibilityHint="Navigates to the previous screen">
<Text type="xl" style={pal.link}> <Text type="xl" style={pal.link}>
Back Back
</Text> </Text>
@ -87,9 +85,7 @@ export const CreateAccount = observer(
<TouchableOpacity <TouchableOpacity
testID="nextBtn" testID="nextBtn"
onPress={onPressNext} onPress={onPressNext}
accessibilityRole="button" accessibilityRole="button">
accessibilityLabel="Go to next"
accessibilityHint="Navigates to the next screen">
{model.isProcessing ? ( {model.isProcessing ? (
<ActivityIndicator /> <ActivityIndicator />
) : ( ) : (

24
src/view/com/auth/login/Login.tsx
View File

@ -241,11 +241,7 @@ const ChooseAccountForm = ({
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}> <View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}>
<TouchableOpacity <TouchableOpacity onPress={onPressBack} accessibilityRole="button">
onPress={onPressBack}
accessibilityRole="button"
accessibilityLabel="Go back"
accessibilityHint="Navigates to the previous screen">
<Text type="xl" style={[pal.link, s.pl5]}> <Text type="xl" style={[pal.link, s.pl5]}>
Back Back
</Text> </Text>
@ -454,11 +450,7 @@ const LoginForm = ({
</View> </View>
) : undefined} ) : undefined}
<View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}> <View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}>
<TouchableOpacity <TouchableOpacity onPress={onPressBack} accessibilityRole="button">
onPress={onPressBack}
accessibilityRole="button"
accessibilityLabel="Go back"
accessibilityHint="Navigates to the previous screen">
<Text type="xl" style={[pal.link, s.pl5]}> <Text type="xl" style={[pal.link, s.pl5]}>
Back Back
</Text> </Text>
@ -632,11 +624,7 @@ const ForgotPasswordForm = ({
</View> </View>
) : undefined} ) : undefined}
<View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}> <View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}>
<TouchableOpacity <TouchableOpacity onPress={onPressBack} accessibilityRole="button">
onPress={onPressBack}
accessibilityRole="button"
accessibilityLabel="Go back"
accessibilityHint="Navigates to the previous screen">
<Text type="xl" style={[pal.link, s.pl5]}> <Text type="xl" style={[pal.link, s.pl5]}>
Back Back
</Text> </Text>
@ -794,11 +782,7 @@ const SetNewPasswordForm = ({
</View> </View>
) : undefined} ) : undefined}
<View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}> <View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}>
<TouchableOpacity <TouchableOpacity onPress={onPressBack} accessibilityRole="button">
onPress={onPressBack}
accessibilityRole="button"
accessibilityLabel="Go back"
accessibilityHint="Navigates to the previous screen">
<Text type="xl" style={[pal.link, s.pl5]}> <Text type="xl" style={[pal.link, s.pl5]}>
Back Back
</Text> </Text>

8
src/view/com/lightbox/Lightbox.web.tsx
View File

@ -106,8 +106,8 @@ function LightboxInner({
onPress={onPressLeft} onPress={onPressLeft}
style={[styles.btn, styles.leftBtn]} style={[styles.btn, styles.leftBtn]}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel="Go back" accessibilityLabel="Previous image"
accessibilityHint="Navigates to previous image in viewer"> accessibilityHint="">
<FontAwesomeIcon <FontAwesomeIcon
icon="angle-left" icon="angle-left"
style={styles.icon} style={styles.icon}
@ -120,8 +120,8 @@ function LightboxInner({
onPress={onPressRight} onPress={onPressRight}
style={[styles.btn, styles.rightBtn]} style={[styles.btn, styles.rightBtn]}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel="Go to next" accessibilityLabel="Next image"
accessibilityHint="Navigates to next image in viewer"> accessibilityHint="">
<FontAwesomeIcon <FontAwesomeIcon
icon="angle-right" icon="angle-right"
style={styles.icon} style={styles.icon}

8
src/view/com/post-thread/PostThread.tsx
View File

@ -183,8 +183,8 @@ export const PostThread = observer(function PostThread({
<TouchableOpacity <TouchableOpacity
onPress={onPressBack} onPress={onPressBack}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel="Go back" accessibilityLabel="Back"
accessibilityHint="Navigates to the previous screen"> accessibilityHint="">
<Text type="2xl" style={pal.link}> <Text type="2xl" style={pal.link}>
<FontAwesomeIcon <FontAwesomeIcon
icon="angle-left" icon="angle-left"
@ -217,8 +217,8 @@ export const PostThread = observer(function PostThread({
<TouchableOpacity <TouchableOpacity
onPress={onPressBack} onPress={onPressBack}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel="Go back" accessibilityLabel="Back"
accessibilityHint="Navigates to the previous screen"> accessibilityHint="">
<Text type="2xl" style={pal.link}> <Text type="2xl" style={pal.link}>
<FontAwesomeIcon <FontAwesomeIcon
icon="angle-left" icon="angle-left"

6
src/view/com/profile/ProfileHeader.tsx
View File

@ -458,8 +458,8 @@ const ProfileHeaderLoaded = observer(
onPress={onPressBack} onPress={onPressBack}
hitSlop={BACK_HITSLOP} hitSlop={BACK_HITSLOP}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel="Go back" accessibilityLabel="Back"
accessibilityHint="Navigates to the previous screen"> accessibilityHint="">
<View style={styles.backBtnWrapper}> <View style={styles.backBtnWrapper}>
<BlurView style={styles.backBtn} blurType="dark"> <BlurView style={styles.backBtn} blurType="dark">
<FontAwesomeIcon size={18} icon="angle-left" style={s.white} /> <FontAwesomeIcon size={18} icon="angle-left" style={s.white} />
@ -472,7 +472,7 @@ const ProfileHeaderLoaded = observer(
onPress={onPressAvi} onPress={onPressAvi}
accessibilityRole="image" accessibilityRole="image"
accessibilityLabel={`View ${view.handle}'s avatar`} accessibilityLabel={`View ${view.handle}'s avatar`}
accessibilityHint={`Opens ${view.handle}'s avatar in an image viewer`}> accessibilityHint="">
<View <View
style={[ style={[
pal.view, pal.view,

7
src/view/com/search/HeaderWithInput.tsx
View File

@ -55,8 +55,9 @@ export function HeaderWithInput({
onPress={onPressMenu} onPress={onPressMenu}
hitSlop={MENU_HITSLOP} hitSlop={MENU_HITSLOP}
style={styles.headerMenuBtn} style={styles.headerMenuBtn}
accessibilityLabel="Go back" accessibilityRole="button"
accessibilityHint="Navigates to the previous screen"> accessibilityLabel="Back"
accessibilityHint="">
<UserAvatar size={30} avatar={store.me.avatar} /> <UserAvatar size={30} avatar={store.me.avatar} />
</TouchableOpacity> </TouchableOpacity>
<View <View
@ -84,6 +85,8 @@ export function HeaderWithInput({
onSubmitEditing={onSubmitQuery} onSubmitEditing={onSubmitQuery}
autoFocus={true} autoFocus={true}
accessibilityRole="search" accessibilityRole="search"
accessibilityLabel="Search"
accessibilityHint=""
/> />
{query ? ( {query ? (
<TouchableOpacity <TouchableOpacity

8
src/view/com/util/ViewHeader.tsx
View File

@ -62,12 +62,8 @@ export const ViewHeader = observer(function ({
hitSlop={BACK_HITSLOP} hitSlop={BACK_HITSLOP}
style={canGoBack ? styles.backBtn : styles.backBtnWide} style={canGoBack ? styles.backBtn : styles.backBtnWide}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel={canGoBack ? 'Go back' : 'Go to menu'} accessibilityLabel={canGoBack ? 'Back' : 'Menu'}
accessibilityHint={ accessibilityHint="">
canGoBack
? 'Navigates to the previous screen'
: 'Navigates to the menu'
}>
{canGoBack ? ( {canGoBack ? (
<FontAwesomeIcon <FontAwesomeIcon
size={18} size={18}

4
src/view/screens/Home.tsx
View File

@ -245,8 +245,8 @@ const FeedPage = observer(
onPress={onPressCompose} onPress={onPressCompose}
icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />} icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel="Compose" accessibilityLabel="Compose post"
accessibilityHint="Opens post composer" accessibilityHint=""
/> />
</View> </View>
) )

18
src/view/shell/Drawer.tsx
View File

@ -171,7 +171,7 @@ export const DrawerContent = observer(() => {
} }
label="Search" label="Search"
accessibilityLabel="Search" accessibilityLabel="Search"
accessibilityHint="Search through users and posts" accessibilityHint=""
bold={isAtSearch} bold={isAtSearch}
onPress={onPressSearch} onPress={onPressSearch}
/> />
@ -193,7 +193,7 @@ export const DrawerContent = observer(() => {
} }
label="Home" label="Home"
accessibilityLabel="Home" accessibilityLabel="Home"
accessibilityHint="Navigates to default feed" accessibilityHint=""
bold={isAtHome} bold={isAtHome}
onPress={onPressHome} onPress={onPressHome}
/> />
@ -214,12 +214,8 @@ export const DrawerContent = observer(() => {
) )
} }
label="Notifications" label="Notifications"
accessibilityLabel={ accessibilityLabel="Notifications"
notifications.unreadCountLabel === '1' accessibilityHint={`${store.me.notifications.unreadCountLabel} unread`}
? 'Notifications: 1 unread notification'
: `Notifications: ${notifications.unreadCountLabel} unread notifications`
}
accessibilityHint="Opens notification feed"
count={notifications.unreadCountLabel} count={notifications.unreadCountLabel}
bold={isAtNotifications} bold={isAtNotifications}
onPress={onPressNotifications} onPress={onPressNotifications}
@ -242,7 +238,7 @@ export const DrawerContent = observer(() => {
} }
label="Profile" label="Profile"
accessibilityLabel="Profile" accessibilityLabel="Profile"
accessibilityHint="See profile display name, avatar, description, and other profile items" accessibilityHint=""
onPress={onPressProfile} onPress={onPressProfile}
/> />
<MenuItem <MenuItem
@ -255,7 +251,7 @@ export const DrawerContent = observer(() => {
} }
label="Settings" label="Settings"
accessibilityLabel="Settings" accessibilityLabel="Settings"
accessibilityHint="Manage settings for your account, like handle, content moderation, and app passwords" accessibilityHint=""
onPress={onPressSettings} onPress={onPressSettings}
/> />
</View> </View>
@ -332,7 +328,7 @@ function MenuItem({
testID={`menuItemButton-${label}`} testID={`menuItemButton-${label}`}
style={styles.menuItem} style={styles.menuItem}
onPress={onPress} onPress={onPress}
accessibilityRole="menuitem" accessibilityRole="tab"
accessibilityLabel={accessibilityLabel} accessibilityLabel={accessibilityLabel}
accessibilityHint=""> accessibilityHint="">
<View style={[styles.menuItemIconWrapper]}> <View style={[styles.menuItemIconWrapper]}>

21
src/view/shell/bottom-bar/BottomBar.tsx
View File

@ -94,8 +94,9 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
) )
} }
onPress={onPressHome} onPress={onPressHome}
accessibilityLabel="Go home" accessibilityRole="tab"
accessibilityHint="Navigates to feed home" accessibilityLabel="Home"
accessibilityHint=""
/> />
<Btn <Btn
testID="bottomBarSearchBtn" testID="bottomBarSearchBtn"
@ -116,6 +117,8 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
} }
onPress={onPressSearch} onPress={onPressSearch}
accessibilityRole="search" accessibilityRole="search"
accessibilityLabel="Search"
accessibilityHint=""
/> />
<Btn <Btn
testID="bottomBarNotificationsBtn" testID="bottomBarNotificationsBtn"
@ -136,8 +139,10 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
} }
onPress={onPressNotifications} onPress={onPressNotifications}
notificationCount={store.me.notifications.unreadCountLabel} notificationCount={store.me.notifications.unreadCountLabel}
accessible={true}
accessibilityRole="tab"
accessibilityLabel="Notifications" accessibilityLabel="Notifications"
accessibilityHint="Navigates to notifications" accessibilityHint={`${store.me.notifications.unreadCountLabel} unread`}
/> />
<Btn <Btn
testID="bottomBarProfileBtn" testID="bottomBarProfileBtn"
@ -159,8 +164,9 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
</View> </View>
} }
onPress={onPressProfile} onPress={onPressProfile}
accessibilityRole="tab"
accessibilityLabel="Profile" accessibilityLabel="Profile"
accessibilityHint="Navigates to profile" accessibilityHint=""
/> />
</Animated.View> </Animated.View>
) )
@ -169,7 +175,10 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
interface BtnProps interface BtnProps
extends Pick< extends Pick<
ComponentProps<typeof TouchableOpacity>, ComponentProps<typeof TouchableOpacity>,
'accessibilityRole' | 'accessibilityHint' | 'accessibilityLabel' | 'accessible'
| 'accessibilityRole'
| 'accessibilityHint'
| 'accessibilityLabel'
> { > {
testID?: string testID?: string
icon: JSX.Element icon: JSX.Element
@ -184,6 +193,7 @@ function Btn({
notificationCount, notificationCount,
onPress, onPress,
onLongPress, onLongPress,
accessible,
accessibilityHint, accessibilityHint,
accessibilityLabel, accessibilityLabel,
}: BtnProps) { }: BtnProps) {
@ -194,6 +204,7 @@ function Btn({
onPress={onLongPress ? onPress : undefined} onPress={onLongPress ? onPress : undefined}
onPressIn={onLongPress ? undefined : onPress} onPressIn={onLongPress ? undefined : onPress}
onLongPress={onLongPress} onLongPress={onLongPress}
accessible={accessible}
accessibilityLabel={accessibilityLabel} accessibilityLabel={accessibilityLabel}
accessibilityHint={accessibilityHint}> accessibilityHint={accessibilityHint}>
{notificationCount ? ( {notificationCount ? (

9
src/view/shell/desktop/LeftNav.tsx
View File

@ -66,7 +66,7 @@ function BackBtn() {
style={styles.backBtn} style={styles.backBtn}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel="Go back" accessibilityLabel="Go back"
accessibilityHint="Navigates to the previous screen"> accessibilityHint="">
<FontAwesomeIcon <FontAwesomeIcon
size={24} size={24}
icon="angle-left" icon="angle-left"
@ -102,8 +102,9 @@ const NavItem = observer(
style={styles.navItemWrapper} style={styles.navItemWrapper}
hoverStyle={pal.viewLight} hoverStyle={pal.viewLight}
onPress={onPress} onPress={onPress}
accessibilityRole="tab"
accessibilityLabel={label} accessibilityLabel={label}
accessibilityHint={`Navigates to ${label}`}> accessibilityHint="">
<View style={[styles.navItemIconWrapper]}> <View style={[styles.navItemIconWrapper]}>
{isCurrent ? iconFilled : icon} {isCurrent ? iconFilled : icon}
{typeof count === 'string' && count ? ( {typeof count === 'string' && count ? (
@ -129,8 +130,8 @@ function ComposeBtn() {
style={[styles.newPostBtn]} style={[styles.newPostBtn]}
onPress={onPressCompose} onPress={onPressCompose}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel="New post" accessibilityLabel="Compose post"
accessibilityHint="Opens post composer"> accessibilityHint="">
<View style={styles.newPostBtnIconWrapper}> <View style={styles.newPostBtnIconWrapper}>
<ComposeIcon2 <ComposeIcon2
size={19} size={19}

2
src/view/shell/desktop/Search.tsx
View File

@ -68,6 +68,8 @@ export const DesktopSearch = observer(function DesktopSearch() {
onChangeText={onChangeQuery} onChangeText={onChangeQuery}
onSubmitEditing={onSubmit} onSubmitEditing={onSubmit}
accessibilityRole="search" accessibilityRole="search"
accessibilityLabel="Search"
accessibilityHint=""
/> />
{query ? ( {query ? (
<View style={styles.cancelBtn}> <View style={styles.cancelBtn}>