forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Accessibility fixes: add missing labels, dynamically scale home header (#1516)
* Improve labels
* Dynanically adjust home header to account for font scaling
authored by
Paul Frazee
and committed by
GitHub
b7697f08
88b95df2
+52
-32
+2
-2
src/view/com/posts/FeedItem.tsx
+2
-2
src/view/com/posts/FeedItem.tsx
···
203
203
<Link
204
204
style={styles.includeReason}
205
205
href={makeProfileLink(item.reasonRepost.by)}
206
-
title={sanitizeDisplayName(
206
+
title={`Reposted by ${sanitizeDisplayName(
207
207
item.reasonRepost.by.displayName || item.reasonRepost.by.handle,
208
-
)}>
208
+
)}`}>
209
209
<FontAwesomeIcon
210
210
icon="retweet"
211
211
style={{
+3
-1
src/view/com/profile/ProfileHeader.tsx
+3
-1
src/view/com/profile/ProfileHeader.tsx
···
454
454
{dropdownItems?.length ? (
455
455
<NativeDropdown
456
456
testID="profileHeaderDropdownBtn"
457
-
items={dropdownItems}>
457
+
items={dropdownItems}
458
+
accessibilityLabel="More options"
459
+
accessibilityHint="">
458
460
<View style={[styles.btn, styles.secondaryBtn, pal.btn]}>
459
461
<FontAwesomeIcon icon="ellipsis" size={20} style={[pal.text]} />
460
462
</View>
+3
-1
src/view/com/util/Link.tsx
+3
-1
src/view/com/util/Link.tsx
···
142
142
dataSet,
143
143
title,
144
144
onPress,
145
+
...orgProps
145
146
}: {
146
147
testID?: string
147
148
type?: TypographyVariant
···
190
191
title={title}
191
192
// @ts-ignore web only -prf
192
193
hrefAttrs={hrefAttrs} // hack to get open in new tab to work on safari. without this, safari will open in a new window
193
-
{...props}>
194
+
{...props}
195
+
{...orgProps}>
194
196
{text}
195
197
</Text>
196
198
)
+5
-1
src/view/com/util/UserAvatar.tsx
+5
-1
src/view/com/util/UserAvatar.tsx
···
230
230
231
231
// onSelectNewAvatar is only passed as prop on the EditProfile component
232
232
return onSelectNewAvatar ? (
233
-
<NativeDropdown testID="changeAvatarBtn" items={dropdownItems}>
233
+
<NativeDropdown
234
+
testID="changeAvatarBtn"
235
+
items={dropdownItems}
236
+
accessibilityLabel="Image options"
237
+
accessibilityHint="">
234
238
{avatar ? (
235
239
<HighPriorityImage
236
240
testID="userAvatarImage"
+5
-1
src/view/com/util/UserBanner.tsx
+5
-1
src/view/com/util/UserBanner.tsx
···
106
106
107
107
// setUserBanner is only passed as prop on the EditProfile component
108
108
return onSelectNewBanner ? (
109
-
<NativeDropdown testID="changeBannerBtn" items={dropdownItems}>
109
+
<NativeDropdown
110
+
testID="changeBannerBtn"
111
+
items={dropdownItems}
112
+
accessibilityLabel="Image options"
113
+
accessibilityHint="">
110
114
{banner ? (
111
115
<Image
112
116
testID="userBannerImage"
+5
-1
src/view/screens/CustomFeed.tsx
+5
-1
src/view/screens/CustomFeed.tsx
···
405
405
)}
406
406
</>
407
407
) : null}
408
-
<NativeDropdown testID="feedHeaderDropdownBtn" items={dropdownItems}>
408
+
<NativeDropdown
409
+
testID="feedHeaderDropdownBtn"
410
+
items={dropdownItems}
411
+
accessibilityLabel="More options"
412
+
accessibilityHint="">
409
413
<View
410
414
style={{
411
415
paddingLeft: 12,
+4
-1
src/view/screens/Feeds.tsx
+4
-1
src/view/screens/Feeds.tsx
···
120
120
<Text type="title-lg" style={[pal.text, s.bold]}>
121
121
My Feeds
122
122
</Text>
123
-
<Link href="/settings/saved-feeds">
123
+
<Link
124
+
href="/settings/saved-feeds"
125
+
accessibilityLabel="Edit My Feeds"
126
+
accessibilityHint="">
124
127
<CogIcon strokeWidth={1.5} style={pal.icon} size={28} />
125
128
</Link>
126
129
</View>
+19
-23
src/view/screens/Home.tsx
+19
-23
src/view/screens/Home.tsx
···
1
1
import React from 'react'
2
-
import {FlatList, View} from 'react-native'
2
+
import {FlatList, View, useWindowDimensions} from 'react-native'
3
3
import {useFocusEffect, useIsFocused} from '@react-navigation/native'
4
4
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
5
5
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
···
26
26
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
27
27
import {ComposeIcon2} from 'lib/icons'
28
28
29
-
const HEADER_OFFSET_MOBILE = 78
30
-
const HEADER_OFFSET_TABLET = 50
31
-
const HEADER_OFFSET_DESKTOP = 0
32
29
const POLL_FREQ = 30e3 // 30sec
33
30
34
31
type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
···
160
157
}) {
161
158
const store = useStores()
162
159
const pal = usePalette('default')
163
-
const {isMobile, isTablet, isDesktop} = useWebMediaQueries()
160
+
const {isDesktop} = useWebMediaQueries()
164
161
const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll(store)
165
162
const {screen, track} = useAnalytics()
166
-
const [headerOffset, setHeaderOffset] = React.useState(
167
-
isMobile
168
-
? HEADER_OFFSET_MOBILE
169
-
: isTablet
170
-
? HEADER_OFFSET_TABLET
171
-
: HEADER_OFFSET_DESKTOP,
172
-
)
163
+
const headerOffset = useHeaderOffset()
173
164
const scrollElRef = React.useRef<FlatList>(null)
174
165
const {appState} = useAppState({
175
166
onForeground: () => doPoll(true),
···
214
205
}
215
206
}, [isPageFocused, scrollToTop, feed])
216
207
217
-
// listens for resize events
218
-
React.useEffect(() => {
219
-
setHeaderOffset(
220
-
isMobile
221
-
? HEADER_OFFSET_MOBILE
222
-
: isTablet
223
-
? HEADER_OFFSET_TABLET
224
-
: HEADER_OFFSET_DESKTOP,
225
-
)
226
-
}, [isMobile, isTablet])
227
-
228
208
// fires when page within screen is activated/deactivated
229
209
// - check for latest
230
210
React.useEffect(() => {
···
301
281
type="title-lg"
302
282
href="/settings/home-feed"
303
283
style={{fontWeight: 'bold'}}
284
+
accessibilityLabel="Feed Preferences"
285
+
accessibilityHint=""
304
286
text={
305
287
<FontAwesomeIcon
306
288
icon="sliders"
···
347
329
</View>
348
330
)
349
331
})
332
+
333
+
function useHeaderOffset() {
334
+
const {isDesktop, isTablet} = useWebMediaQueries()
335
+
const {fontScale} = useWindowDimensions()
336
+
if (isDesktop) {
337
+
return 0
338
+
}
339
+
if (isTablet) {
340
+
return 50
341
+
}
342
+
// default text takes 44px, plus 34px of pad
343
+
// scale the 44px by the font scale
344
+
return 34 + 44 * fontScale
345
+
}
+5
-1
src/view/screens/Settings.tsx
+5
-1
src/view/screens/Settings.tsx
···
651
651
]
652
652
return (
653
653
<Pressable accessibilityRole="button" style={s.pl10}>
654
-
<NativeDropdown testID="accountSettingsDropdownBtn" items={items}>
654
+
<NativeDropdown
655
+
testID="accountSettingsDropdownBtn"
656
+
items={items}
657
+
accessibilityLabel="Account options"
658
+
accessibilityHint="">
655
659
<FontAwesomeIcon
656
660
icon="ellipsis-h"
657
661
style={pal.textLight as FontAwesomeIconStyle}