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

React Native accessibility (#539)

Browse source 
* React Native accessibility

* First round of changes

* Latest update

* Checkpoint

* Wrap up

* Lint

* Remove unhelpful image hints

* Fix navigation

* Fix rebase and lint

* Mitigate an known issue with the password entry in login

* Fix composer dismiss

* Remove focus on input elements for web

* Remove i and npm

* pls work

* Remove stray declaration

* Regenerate yarn.lock

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>
This commit is contained in:
Ollie H 2023-05-01 18:38:47 -07:00 • committed by GitHub
parent c75c888de2
commit 83959c595d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
86 changed files with 2479 additions and 1827 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/view/shell/bottom-bar/BottomBar.tsx
View file

@ -1,4 +1,4 @@
import React from 'react'
import React, {ComponentProps} from 'react'
import {
Animated,
GestureResponderEvent,
@ -94,6 +94,8 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
)
}
onPress={onPressHome}
accessibilityLabel="Go home"
accessibilityHint="Navigates to feed home"
/>
<Btn
testID="bottomBarSearchBtn"
@ -113,6 +115,7 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
)
}
onPress={onPressSearch}
accessibilityRole="search"
/>
<Btn
testID="bottomBarNotificationsBtn"
@ -133,6 +136,8 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
}
onPress={onPressNotifications}
notificationCount={store.me.notifications.unreadCountLabel}
accessibilityLabel="Notifications"
accessibilityHint="Navigates to notifications"
/>
<Btn
testID="bottomBarProfileBtn"
@ -154,31 +159,43 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
</View>
}
onPress={onPressProfile}
accessibilityLabel="Profile"
accessibilityHint="Navigates to profile"
/>
</Animated.View>
)
})
interface BtnProps
extends Pick<
ComponentProps<typeof TouchableOpacity>,
'accessibilityRole' | 'accessibilityHint' | 'accessibilityLabel'
> {
testID?: string
icon: JSX.Element
notificationCount?: string
onPress?: (event: GestureResponderEvent) => void
onLongPress?: (event: GestureResponderEvent) => void
}
function Btn({
testID,
icon,
notificationCount,
onPress,
onLongPress,
}: {
testID?: string
icon: JSX.Element
notificationCount?: string
onPress?: (event: GestureResponderEvent) => void
onLongPress?: (event: GestureResponderEvent) => void
}) {
accessibilityHint,
accessibilityLabel,
}: BtnProps) {
return (
<TouchableOpacity
testID={testID}
style={styles.ctrl}
onPress={onLongPress ? onPress : undefined}
onPressIn={onLongPress ? undefined : onPress}
onLongPress={onLongPress}>
onLongPress={onLongPress}
accessibilityLabel={accessibilityLabel}
accessibilityHint={accessibilityHint}>
{notificationCount ? (
<View style={[styles.notificationCount]}>
<Text style={styles.notificationCountLabel}>{notificationCount}</Text>