forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Improve a11y on noty feed (#4842)
authored by
Eric Bailey
and committed by
GitHub
043e5cea
35165e3d
+26
-18
+24
-10
src/view/com/notifications/FeedItem.tsx
+24
-10
src/view/com/notifications/FeedItem.tsx
···
206
206
return null
207
207
}
208
208
209
-
let formattedCount = authors.length > 1 ? formatCount(authors.length - 1) : ''
209
+
const formattedCount =
210
+
authors.length > 1 ? formatCount(authors.length - 1) : ''
211
+
const firstAuthorName = sanitizeDisplayName(
212
+
authors[0].profile.displayName || authors[0].profile.handle,
213
+
)
214
+
const niceTimestamp = niceDate(item.notification.indexedAt)
215
+
const a11yLabelUsers =
216
+
authors.length > 1
217
+
? _(msg` and `) +
218
+
plural(authors.length - 1, {
219
+
one: `${formattedCount} other`,
220
+
other: `${formattedCount} others`,
221
+
})
222
+
: ''
223
+
const a11yLabel = `${firstAuthorName}${a11yLabelUsers} ${action} ${niceTimestamp}`
224
+
210
225
return (
211
226
<Link
212
227
testID={`feedItem-by-${item.notification.author.handle}`}
···
223
238
]}
224
239
href={itemHref}
225
240
noFeedback
241
+
accessibilityHint=""
242
+
accessibilityLabel={a11yLabel}
226
243
accessible={!isAuthorsExpanded}
227
244
accessibilityActions={
228
245
authors.length > 1
···
270
287
showDmButton={item.type === 'starterpack-joined'}
271
288
/>
272
289
<ExpandedAuthorsList visible={isAuthorsExpanded} authors={authors} />
273
-
<Text style={[styles.meta, a.self_start]}>
290
+
<Text
291
+
style={[styles.meta, a.self_start]}
292
+
accessibilityHint=""
293
+
accessibilityLabel={a11yLabel}>
274
294
<TextLink
275
295
key={authors[0].href}
276
296
style={[pal.text, s.bold]}
277
297
href={authors[0].href}
278
-
text={forceLTR(
279
-
sanitizeDisplayName(
280
-
authors[0].profile.displayName || authors[0].profile.handle,
281
-
),
282
-
)}
298
+
text={forceLTR(firstAuthorName)}
283
299
disableMismatchWarning
284
300
/>
285
301
{authors.length > 1 ? (
···
301
317
{({timeElapsed}) => (
302
318
<Text
303
319
style={[pal.textLight, styles.pointer]}
304
-
title={niceDate(item.notification.indexedAt)}>
320
+
title={niceTimestamp}>
305
321
{' ' + timeElapsed}
306
322
</Text>
307
323
)}
···
453
469
profile={authors[0].profile}
454
470
moderation={authors[0].moderation.ui('avatar')}
455
471
type={authors[0].profile.associated?.labeler ? 'labeler' : 'user'}
456
-
accessible={false}
457
472
/>
458
473
{showDmButton ? <SayHelloBtn profile={authors[0].profile} /> : null}
459
474
</View>
···
471
486
profile={author.profile}
472
487
moderation={author.moderation.ui('avatar')}
473
488
type={author.profile.associated?.labeler ? 'labeler' : 'user'}
474
-
accessible={false}
475
489
/>
476
490
</View>
477
491
))}
+2
-8
src/view/com/util/UserAvatar.tsx
+2
-8
src/view/com/util/UserAvatar.tsx
···
55
55
profile: AppBskyActorDefs.ProfileViewBasic
56
56
disableHoverCard?: boolean
57
57
onBeforePress?: () => void
58
-
accessible?: boolean
59
58
}
60
59
61
60
const BLUR_AMOUNT = isWeb ? 5 : 100
···
412
411
profile,
413
412
disableHoverCard,
414
413
onBeforePress,
415
-
accessible = true,
416
414
...rest
417
415
}: PreviewableUserAvatarProps): React.ReactNode => {
418
416
const {_} = useLingui()
···
426
424
return (
427
425
<ProfileHoverCard did={profile.did} disable={disableHoverCard}>
428
426
<Link
429
-
label={
430
-
accessible
431
-
? _(msg`${profile.displayName || profile.handle}'s avatar`)
432
-
: undefined
433
-
}
434
-
accessibilityHint={accessible ? _(msg`Opens this profile`) : undefined}
427
+
label={_(msg`${profile.displayName || profile.handle}'s avatar`)}
428
+
accessibilityHint={_(msg`Opens this profile`)}
435
429
to={makeProfileLink({
436
430
did: profile.did,
437
431
handle: profile.handle,