Improve a11y on noty feed (#4842)

zio/stable
Eric Bailey 2024-07-25 18:11:16 -05:00 committed by GitHub
parent 35165e3d9b
commit 043e5cea64
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 18 deletions

View File

@ -206,7 +206,22 @@ let FeedItem = ({
return null
}
let formattedCount = authors.length > 1 ? formatCount(authors.length - 1) : ''
const formattedCount =
authors.length > 1 ? formatCount(authors.length - 1) : ''
const firstAuthorName = sanitizeDisplayName(
authors[0].profile.displayName || authors[0].profile.handle,
)
const niceTimestamp = niceDate(item.notification.indexedAt)
const a11yLabelUsers =
authors.length > 1
? _(msg` and `) +
plural(authors.length - 1, {
one: `${formattedCount} other`,
other: `${formattedCount} others`,
})
: ''
const a11yLabel = `${firstAuthorName}${a11yLabelUsers} ${action} ${niceTimestamp}`
return (
<Link
testID={`feedItem-by-${item.notification.author.handle}`}
@ -223,6 +238,8 @@ let FeedItem = ({
]}
href={itemHref}
noFeedback
accessibilityHint=""
accessibilityLabel={a11yLabel}
accessible={!isAuthorsExpanded}
accessibilityActions={
authors.length > 1
@ -270,16 +287,15 @@ let FeedItem = ({
showDmButton={item.type === 'starterpack-joined'}
/>
<ExpandedAuthorsList visible={isAuthorsExpanded} authors={authors} />
<Text style={[styles.meta, a.self_start]}>
<Text
style={[styles.meta, a.self_start]}
accessibilityHint=""
accessibilityLabel={a11yLabel}>
<TextLink
key={authors[0].href}
style={[pal.text, s.bold]}
href={authors[0].href}
text={forceLTR(
sanitizeDisplayName(
authors[0].profile.displayName || authors[0].profile.handle,
),
)}
text={forceLTR(firstAuthorName)}
disableMismatchWarning
/>
{authors.length > 1 ? (
@ -301,7 +317,7 @@ let FeedItem = ({
{({timeElapsed}) => (
<Text
style={[pal.textLight, styles.pointer]}
title={niceDate(item.notification.indexedAt)}>
title={niceTimestamp}>
{' ' + timeElapsed}
</Text>
)}
@ -453,7 +469,6 @@ function CondensedAuthorsList({
profile={authors[0].profile}
moderation={authors[0].moderation.ui('avatar')}
type={authors[0].profile.associated?.labeler ? 'labeler' : 'user'}
accessible={false}
/>
{showDmButton ? <SayHelloBtn profile={authors[0].profile} /> : null}
</View>
@ -471,7 +486,6 @@ function CondensedAuthorsList({
profile={author.profile}
moderation={author.moderation.ui('avatar')}
type={author.profile.associated?.labeler ? 'labeler' : 'user'}
accessible={false}
/>
</View>
))}

View File

@ -55,7 +55,6 @@ interface PreviewableUserAvatarProps extends BaseUserAvatarProps {
profile: AppBskyActorDefs.ProfileViewBasic
disableHoverCard?: boolean
onBeforePress?: () => void
accessible?: boolean
}
const BLUR_AMOUNT = isWeb ? 5 : 100
@ -412,7 +411,6 @@ let PreviewableUserAvatar = ({
profile,
disableHoverCard,
onBeforePress,
accessible = true,
...rest
}: PreviewableUserAvatarProps): React.ReactNode => {
const {_} = useLingui()
@ -426,12 +424,8 @@ let PreviewableUserAvatar = ({
return (
<ProfileHoverCard did={profile.did} disable={disableHoverCard}>
<Link
label={
accessible
? _(msg`${profile.displayName || profile.handle}'s avatar`)
: undefined
}
accessibilityHint={accessible ? _(msg`Opens this profile`) : undefined}
label={_(msg`${profile.displayName || profile.handle}'s avatar`)}
accessibilityHint={_(msg`Opens this profile`)}
to={makeProfileLink({
did: profile.did,
handle: profile.handle,