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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

18
src/view/shell/Drawer.tsx
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]}>

21
src/view/shell/bottom-bar/BottomBar.tsx
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 ? (

9
src/view/shell/desktop/LeftNav.tsx
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
src/view/shell/desktop/Search.tsx
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}>