Update follower/following a11y hints and labels (#755)

* Update follower/following a11y hints and labels

* Update ProfileHeader.tsx

---------

Co-authored-by: Ansh <anshnanda10@gmail.com>
zio/stable
Ollie H 2023-05-30 13:39:50 -07:00 committed by GitHub
parent 09c515d273
commit 234e04c396
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 7 deletions

View File

@ -289,6 +289,9 @@ const ProfileHeaderLoaded = observer(
]) ])
const blockHide = !isMe && (view.viewer.blocking || view.viewer.blockedBy) const blockHide = !isMe && (view.viewer.blocking || view.viewer.blockedBy)
const following = formatCount(view.followsCount)
const followers = formatCount(view.followersCount)
const pluralizedFollowers = pluralize(view.followersCount, 'follower')
return ( return (
<View style={pal.view}> <View style={pal.view}>
@ -394,13 +397,13 @@ const ProfileHeaderLoaded = observer(
style={[s.flexRow, s.mr10]} style={[s.flexRow, s.mr10]}
onPress={onPressFollowers} onPress={onPressFollowers}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel={`Show ${view.handle}'s followers`} accessibilityLabel={`${followers} ${pluralizedFollowers}`}
accessibilityHint={`Shows folks following ${view.handle}`}> accessibilityHint={'Opens followers list'}>
<Text type="md" style={[s.bold, s.mr2, pal.text]}> <Text type="md" style={[s.bold, s.mr2, pal.text]}>
{formatCount(view.followersCount)} {followers}
</Text> </Text>
<Text type="md" style={[pal.textLight]}> <Text type="md" style={[pal.textLight]}>
{pluralize(view.followersCount, 'follower')} {pluralizedFollowers}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
@ -408,10 +411,10 @@ const ProfileHeaderLoaded = observer(
style={[s.flexRow, s.mr10]} style={[s.flexRow, s.mr10]}
onPress={onPressFollows} onPress={onPressFollows}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel={`Show ${view.handle}'s follows`} accessibilityLabel={`${following} following`}
accessibilityHint={`Shows folks followed by ${view.handle}`}> accessibilityHint={'Opens following list'}>
<Text type="md" style={[s.bold, s.mr2, pal.text]}> <Text type="md" style={[s.bold, s.mr2, pal.text]}>
{formatCount(view.followsCount)} {following}
</Text> </Text>
<Text type="md" style={[pal.textLight]}> <Text type="md" style={[pal.textLight]}>
following following