Improve accessibility for navigation on web (#6120)
* improve accessibility for bottom bar tabs * improve a11y for left nav * group main content into <main> * use flex_1 rather than absoluteFill
This commit is contained in:
Samuel Newman
@@ -200,7 +200,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
|
||||
accessibilityLabel={_(msg`Chat`)}
|
||||
accessibilityHint={
|
||||
numUnreadMessages.count > 0
|
||||
? `${numUnreadMessages.numUnread} unread`
|
||||
? _(msg`${numUnreadMessages.numUnread} unread items`)
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
@@ -227,7 +227,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
|
||||
accessibilityHint={
|
||||
numUnreadNotifications === ''
|
||||
? ''
|
||||
: `${numUnreadNotifications} unread`
|
||||
: _(msg`${numUnreadNotifications} unread items`)
|
||||
}
|
||||
/>
|
||||
<Btn
|
||||
|
||||
@@ -1,18 +1,14 @@
|
||||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import Animated from 'react-native-reanimated'
|
||||
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {useNavigationState} from '@react-navigation/native'
|
||||
|
||||
import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform'
|
||||
import {usePalette} from '#/lib/hooks/usePalette'
|
||||
import {clamp} from '#/lib/numbers'
|
||||
import {getCurrentRoute, isTab} from '#/lib/routes/helpers'
|
||||
import {makeProfileLink} from '#/lib/routes/links'
|
||||
import {CommonNavigatorParams} from '#/lib/routes/types'
|
||||
import {s} from '#/lib/styles'
|
||||
import {useUnreadMessageCount} from '#/state/queries/messages/list-converations'
|
||||
import {useUnreadNotifications} from '#/state/queries/notifications/unread'
|
||||
import {useSession} from '#/state/session'
|
||||
@@ -23,6 +19,7 @@ import {Link} from '#/view/com/util/Link'
|
||||
import {Text} from '#/view/com/util/text/Text'
|
||||
import {Logo} from '#/view/icons/Logo'
|
||||
import {Logotype} from '#/view/icons/Logotype'
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import {
|
||||
Bell_Filled_Corner0_Rounded as BellFilled,
|
||||
Bell_Stroke2_Corner0_Rounded as Bell,
|
||||
@@ -46,8 +43,7 @@ import {styles} from './BottomBarStyles'
|
||||
export function BottomBarWeb() {
|
||||
const {_} = useLingui()
|
||||
const {hasSession, currentAccount} = useSession()
|
||||
const pal = usePalette('default')
|
||||
const safeAreaInsets = useSafeAreaInsets()
|
||||
const t = useTheme()
|
||||
const footerMinimalShellTransform = useMinimalShellFooterTransform()
|
||||
const {requestSwitchToAccount} = useLoggedOutViewControls()
|
||||
const closeAllActiveElements = useCloseAllActiveElements()
|
||||
@@ -69,12 +65,12 @@ export function BottomBarWeb() {
|
||||
|
||||
return (
|
||||
<Animated.View
|
||||
role="navigation"
|
||||
style={[
|
||||
styles.bottomBar,
|
||||
styles.bottomBarWeb,
|
||||
pal.view,
|
||||
pal.border,
|
||||
{paddingBottom: clamp(safeAreaInsets.bottom, 15, 30)},
|
||||
t.atoms.bg,
|
||||
t.atoms.border_contrast_low,
|
||||
footerMinimalShellTransform,
|
||||
]}>
|
||||
{hasSession ? (
|
||||
@@ -84,8 +80,9 @@ export function BottomBarWeb() {
|
||||
const Icon = isActive ? HomeFilled : Home
|
||||
return (
|
||||
<Icon
|
||||
aria-hidden={true}
|
||||
width={iconWidth + 1}
|
||||
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
|
||||
style={[styles.ctrlIcon, t.atoms.text, styles.homeIcon]}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
@@ -95,8 +92,9 @@ export function BottomBarWeb() {
|
||||
const Icon = isActive ? MagnifyingGlassFilled : MagnifyingGlass
|
||||
return (
|
||||
<Icon
|
||||
aria-hidden={true}
|
||||
width={iconWidth + 2}
|
||||
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
|
||||
style={[styles.ctrlIcon, t.atoms.text, styles.searchIcon]}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
@@ -104,43 +102,41 @@ export function BottomBarWeb() {
|
||||
|
||||
{hasSession && (
|
||||
<>
|
||||
<NavItem routeName="Messages" href="/messages">
|
||||
<NavItem
|
||||
routeName="Messages"
|
||||
href="/messages"
|
||||
badge={
|
||||
unreadMessageCount.count > 0
|
||||
? unreadMessageCount.numUnread
|
||||
: undefined
|
||||
}>
|
||||
{({isActive}) => {
|
||||
const Icon = isActive ? MessageFilled : Message
|
||||
return (
|
||||
<>
|
||||
<Icon
|
||||
width={iconWidth - 1}
|
||||
style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
|
||||
/>
|
||||
{unreadMessageCount.count > 0 && (
|
||||
<View style={styles.notificationCount}>
|
||||
<Text style={styles.notificationCountLabel}>
|
||||
{unreadMessageCount.numUnread}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
<Icon
|
||||
aria-hidden={true}
|
||||
width={iconWidth - 1}
|
||||
style={[
|
||||
styles.ctrlIcon,
|
||||
t.atoms.text,
|
||||
styles.messagesIcon,
|
||||
]}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
</NavItem>
|
||||
<NavItem routeName="Notifications" href="/notifications">
|
||||
<NavItem
|
||||
routeName="Notifications"
|
||||
href="/notifications"
|
||||
badge={notificationCountStr}>
|
||||
{({isActive}) => {
|
||||
const Icon = isActive ? BellFilled : Bell
|
||||
return (
|
||||
<>
|
||||
<Icon
|
||||
width={iconWidth}
|
||||
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
|
||||
/>
|
||||
{notificationCountStr !== '' && (
|
||||
<View style={styles.notificationCount}>
|
||||
<Text style={styles.notificationCountLabel}>
|
||||
{notificationCountStr}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
<Icon
|
||||
aria-hidden={true}
|
||||
width={iconWidth}
|
||||
style={[styles.ctrlIcon, t.atoms.text, styles.bellIcon]}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
</NavItem>
|
||||
@@ -158,8 +154,13 @@ export function BottomBarWeb() {
|
||||
const Icon = isActive ? UserCircleFilled : UserCircle
|
||||
return (
|
||||
<Icon
|
||||
aria-hidden={true}
|
||||
width={iconWidth}
|
||||
style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
|
||||
style={[
|
||||
styles.ctrlIcon,
|
||||
t.atoms.text,
|
||||
styles.profileIcon,
|
||||
]}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
@@ -184,7 +185,7 @@ export function BottomBarWeb() {
|
||||
<View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}>
|
||||
<Logo width={32} />
|
||||
<View style={{paddingTop: 4}}>
|
||||
<Logotype width={80} fill={pal.text.color} />
|
||||
<Logotype width={80} fill={t.atoms.text.color} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -193,7 +194,7 @@ export function BottomBarWeb() {
|
||||
onPress={showCreateAccount}
|
||||
accessibilityHint={_(msg`Sign up`)}
|
||||
accessibilityLabel={_(msg`Sign up`)}>
|
||||
<Text type="md" style={[{color: 'white'}, s.bold]}>
|
||||
<Text type="md" style={[{color: 'white'}, a.font_bold]}>
|
||||
<Trans>Sign up</Trans>
|
||||
</Text>
|
||||
</Button>
|
||||
@@ -203,7 +204,7 @@ export function BottomBarWeb() {
|
||||
onPress={showSignIn}
|
||||
accessibilityHint={_(msg`Sign in`)}
|
||||
accessibilityLabel={_(msg`Sign in`)}>
|
||||
<Text type="md" style={[pal.text, s.bold]}>
|
||||
<Text type="md" style={[t.atoms.text, a.font_bold]}>
|
||||
<Trans>Sign in</Trans>
|
||||
</Text>
|
||||
</Button>
|
||||
@@ -219,7 +220,9 @@ const NavItem: React.FC<{
|
||||
children: (props: {isActive: boolean}) => React.ReactChild
|
||||
href: string
|
||||
routeName: string
|
||||
}> = ({children, href, routeName}) => {
|
||||
badge?: string
|
||||
}> = ({children, href, routeName, badge}) => {
|
||||
const {_} = useLingui()
|
||||
const {currentAccount} = useSession()
|
||||
const currentRoute = useNavigationState(state => {
|
||||
if (!state) {
|
||||
@@ -235,8 +238,21 @@ const NavItem: React.FC<{
|
||||
: isTab(currentRoute.name, routeName)
|
||||
|
||||
return (
|
||||
<Link href={href} style={styles.ctrl} navigationAction="navigate">
|
||||
<Link
|
||||
href={href}
|
||||
style={[styles.ctrl, a.pb_lg]}
|
||||
navigationAction="navigate"
|
||||
aria-role="link"
|
||||
aria-label={routeName}
|
||||
accessible={true}>
|
||||
{children({isActive})}
|
||||
{!!badge && (
|
||||
<View
|
||||
style={styles.notificationCount}
|
||||
aria-label={_(msg`${badge} unread items`)}>
|
||||
<Text style={styles.notificationCountLabel}>{badge}</Text>
|
||||
</View>
|
||||
)}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user