Improve a11y on noty feed (#4842)
parent
35165e3d9b
commit
043e5cea64
|
@ -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>
|
||||
))}
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue