forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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
authored by
Samuel Newman
and committed by
GitHub
b0c5a37d
97721163
+169
-69
+2
-2
src/view/shell/bottom-bar/BottomBar.tsx
+2
-2
src/view/shell/bottom-bar/BottomBar.tsx
···
200
200
accessibilityLabel={_(msg`Chat`)}
201
201
accessibilityHint={
202
202
numUnreadMessages.count > 0
203
-
? `${numUnreadMessages.numUnread} unread`
203
+
? _(msg`${numUnreadMessages.numUnread} unread items`)
204
204
: ''
205
205
}
206
206
/>
···
227
227
accessibilityHint={
228
228
numUnreadNotifications === ''
229
229
? ''
230
-
: `${numUnreadNotifications} unread`
230
+
: _(msg`${numUnreadNotifications} unread items`)
231
231
}
232
232
/>
233
233
<Btn
+61
-45
src/view/shell/bottom-bar/BottomBarWeb.tsx
+61
-45
src/view/shell/bottom-bar/BottomBarWeb.tsx
···
1
1
import React from 'react'
2
2
import {View} from 'react-native'
3
3
import Animated from 'react-native-reanimated'
4
-
import {useSafeAreaInsets} from 'react-native-safe-area-context'
5
4
import {msg, Trans} from '@lingui/macro'
6
5
import {useLingui} from '@lingui/react'
7
6
import {useNavigationState} from '@react-navigation/native'
8
7
9
8
import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform'
10
-
import {usePalette} from '#/lib/hooks/usePalette'
11
-
import {clamp} from '#/lib/numbers'
12
9
import {getCurrentRoute, isTab} from '#/lib/routes/helpers'
13
10
import {makeProfileLink} from '#/lib/routes/links'
14
11
import {CommonNavigatorParams} from '#/lib/routes/types'
15
-
import {s} from '#/lib/styles'
16
12
import {useUnreadMessageCount} from '#/state/queries/messages/list-converations'
17
13
import {useUnreadNotifications} from '#/state/queries/notifications/unread'
18
14
import {useSession} from '#/state/session'
···
23
19
import {Text} from '#/view/com/util/text/Text'
24
20
import {Logo} from '#/view/icons/Logo'
25
21
import {Logotype} from '#/view/icons/Logotype'
22
+
import {atoms as a, useTheme} from '#/alf'
26
23
import {
27
24
Bell_Filled_Corner0_Rounded as BellFilled,
28
25
Bell_Stroke2_Corner0_Rounded as Bell,
···
46
43
export function BottomBarWeb() {
47
44
const {_} = useLingui()
48
45
const {hasSession, currentAccount} = useSession()
49
-
const pal = usePalette('default')
50
-
const safeAreaInsets = useSafeAreaInsets()
46
+
const t = useTheme()
51
47
const footerMinimalShellTransform = useMinimalShellFooterTransform()
52
48
const {requestSwitchToAccount} = useLoggedOutViewControls()
53
49
const closeAllActiveElements = useCloseAllActiveElements()
···
69
65
70
66
return (
71
67
<Animated.View
68
+
role="navigation"
72
69
style={[
73
70
styles.bottomBar,
74
71
styles.bottomBarWeb,
75
-
pal.view,
76
-
pal.border,
77
-
{paddingBottom: clamp(safeAreaInsets.bottom, 15, 30)},
72
+
t.atoms.bg,
73
+
t.atoms.border_contrast_low,
78
74
footerMinimalShellTransform,
79
75
]}>
80
76
{hasSession ? (
···
84
80
const Icon = isActive ? HomeFilled : Home
85
81
return (
86
82
<Icon
83
+
aria-hidden={true}
87
84
width={iconWidth + 1}
88
-
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
85
+
style={[styles.ctrlIcon, t.atoms.text, styles.homeIcon]}
89
86
/>
90
87
)
91
88
}}
···
95
92
const Icon = isActive ? MagnifyingGlassFilled : MagnifyingGlass
96
93
return (
97
94
<Icon
95
+
aria-hidden={true}
98
96
width={iconWidth + 2}
99
-
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
97
+
style={[styles.ctrlIcon, t.atoms.text, styles.searchIcon]}
100
98
/>
101
99
)
102
100
}}
···
104
102
105
103
{hasSession && (
106
104
<>
107
-
<NavItem routeName="Messages" href="/messages">
105
+
<NavItem
106
+
routeName="Messages"
107
+
href="/messages"
108
+
badge={
109
+
unreadMessageCount.count > 0
110
+
? unreadMessageCount.numUnread
111
+
: undefined
112
+
}>
108
113
{({isActive}) => {
109
114
const Icon = isActive ? MessageFilled : Message
110
115
return (
111
-
<>
112
-
<Icon
113
-
width={iconWidth - 1}
114
-
style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
115
-
/>
116
-
{unreadMessageCount.count > 0 && (
117
-
<View style={styles.notificationCount}>
118
-
<Text style={styles.notificationCountLabel}>
119
-
{unreadMessageCount.numUnread}
120
-
</Text>
121
-
</View>
122
-
)}
123
-
</>
116
+
<Icon
117
+
aria-hidden={true}
118
+
width={iconWidth - 1}
119
+
style={[
120
+
styles.ctrlIcon,
121
+
t.atoms.text,
122
+
styles.messagesIcon,
123
+
]}
124
+
/>
124
125
)
125
126
}}
126
127
</NavItem>
127
-
<NavItem routeName="Notifications" href="/notifications">
128
+
<NavItem
129
+
routeName="Notifications"
130
+
href="/notifications"
131
+
badge={notificationCountStr}>
128
132
{({isActive}) => {
129
133
const Icon = isActive ? BellFilled : Bell
130
134
return (
131
-
<>
132
-
<Icon
133
-
width={iconWidth}
134
-
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
135
-
/>
136
-
{notificationCountStr !== '' && (
137
-
<View style={styles.notificationCount}>
138
-
<Text style={styles.notificationCountLabel}>
139
-
{notificationCountStr}
140
-
</Text>
141
-
</View>
142
-
)}
143
-
</>
135
+
<Icon
136
+
aria-hidden={true}
137
+
width={iconWidth}
138
+
style={[styles.ctrlIcon, t.atoms.text, styles.bellIcon]}
139
+
/>
144
140
)
145
141
}}
146
142
</NavItem>
···
158
154
const Icon = isActive ? UserCircleFilled : UserCircle
159
155
return (
160
156
<Icon
157
+
aria-hidden={true}
161
158
width={iconWidth}
162
-
style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
159
+
style={[
160
+
styles.ctrlIcon,
161
+
t.atoms.text,
162
+
styles.profileIcon,
163
+
]}
163
164
/>
164
165
)
165
166
}}
···
184
185
<View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}>
185
186
<Logo width={32} />
186
187
<View style={{paddingTop: 4}}>
187
-
<Logotype width={80} fill={pal.text.color} />
188
+
<Logotype width={80} fill={t.atoms.text.color} />
188
189
</View>
189
190
</View>
190
191
···
193
194
onPress={showCreateAccount}
194
195
accessibilityHint={_(msg`Sign up`)}
195
196
accessibilityLabel={_(msg`Sign up`)}>
196
-
<Text type="md" style={[{color: 'white'}, s.bold]}>
197
+
<Text type="md" style={[{color: 'white'}, a.font_bold]}>
197
198
<Trans>Sign up</Trans>
198
199
</Text>
199
200
</Button>
···
203
204
onPress={showSignIn}
204
205
accessibilityHint={_(msg`Sign in`)}
205
206
accessibilityLabel={_(msg`Sign in`)}>
206
-
<Text type="md" style={[pal.text, s.bold]}>
207
+
<Text type="md" style={[t.atoms.text, a.font_bold]}>
207
208
<Trans>Sign in</Trans>
208
209
</Text>
209
210
</Button>
···
219
220
children: (props: {isActive: boolean}) => React.ReactChild
220
221
href: string
221
222
routeName: string
222
-
}> = ({children, href, routeName}) => {
223
+
badge?: string
224
+
}> = ({children, href, routeName, badge}) => {
225
+
const {_} = useLingui()
223
226
const {currentAccount} = useSession()
224
227
const currentRoute = useNavigationState(state => {
225
228
if (!state) {
···
235
238
: isTab(currentRoute.name, routeName)
236
239
237
240
return (
238
-
<Link href={href} style={styles.ctrl} navigationAction="navigate">
241
+
<Link
242
+
href={href}
243
+
style={[styles.ctrl, a.pb_lg]}
244
+
navigationAction="navigate"
245
+
aria-role="link"
246
+
aria-label={routeName}
247
+
accessible={true}>
239
248
{children({isActive})}
249
+
{!!badge && (
250
+
<View
251
+
style={styles.notificationCount}
252
+
aria-label={_(msg`${badge} unread items`)}>
253
+
<Text style={styles.notificationCountLabel}>{badge}</Text>
254
+
</View>
255
+
)}
240
256
</Link>
241
257
)
242
258
}