Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions node_modules
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,18 @@ const TextWithIcon = ({
textStyle,
onLongPress,
isLoading,
accessibilityLabel,
accessibilityHint,
}) => {
const [ltext, setLtext] = useState(text);
useEffect(() => {
setLtext(text);
}, [text]);

const _iconStyle = [styles.icon, iconStyle, iconSize && { fontSize: iconSize }];
// Interactive only when both clickable and wired to a press handler — mirror the
// existing `disabled` condition so screen readers expose the right role/state.
const _interactive = !!(isClickable && onPress);

return (
<View style={styles.container}>
Expand All @@ -31,6 +36,10 @@ const TextWithIcon = ({
disabled={!isClickable || !onPress}
onPress={() => onPress && onPress()}
onLongPress={() => onLongPress && onLongPress()}
accessibilityRole={_interactive ? 'button' : undefined}
accessibilityLabel={accessibilityLabel}
accessibilityHint={accessibilityHint}
accessibilityState={{ disabled: !_interactive }}
Comment thread
greptile-apps[bot] marked this conversation as resolved.
Outdated
>
<View style={[styles.wrapper, wrapperStyle]}>
{isLoading ? (
Expand Down
32 changes: 32 additions & 0 deletions src/components/comment/view/commentView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,14 @@ const CommentView = ({
}
text={_totalVotes}
textStyle={styles.voteCountText}
accessibilityLabel={intl.formatMessage(
{ id: 'post.a11y_votes', defaultMessage: '{count} votes' },
{ count: _totalVotes || 0 },
)}
accessibilityHint={intl.formatMessage({
id: 'post.a11y_voters_hint',
defaultMessage: 'View voters',
})}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
/>

<TextWithIcon
Expand All @@ -226,6 +234,14 @@ const CommentView = ({
onPress={_handleOnReplyPress}
text={childCount || 0}
textStyle={styles.voteCountText}
accessibilityLabel={intl.formatMessage(
{ id: 'post.a11y_comments', defaultMessage: '{count} comments' },
{ count: childCount || 0 },
)}
accessibilityHint={intl.formatMessage({
id: 'post.a11y_reply_hint',
defaultMessage: 'Reply',
})}
/>

{isLoggedIn && (
Expand All @@ -236,6 +252,10 @@ const CommentView = ({
name="gift-outline"
onPress={_handleOnTipPress}
iconType="MaterialCommunityIcons"
accessibilityLabel={intl.formatMessage({
id: 'post.a11y_tip',
defaultMessage: 'Send tip',
})}
/>
)}

Expand All @@ -248,6 +268,10 @@ const CommentView = ({
name="create"
onPress={() => handleOnEditPress && handleOnEditPress(comment)}
iconType="MaterialIcons"
accessibilityLabel={intl.formatMessage({
id: 'post.a11y_edit',
defaultMessage: 'Edit comment',
})}
/>
{!childCount && !_totalVotes && comment.isDeletable && (
<IconButton
Expand All @@ -265,6 +289,10 @@ const CommentView = ({
)
}
iconType="MaterialIcons"
accessibilityLabel={intl.formatMessage({
id: 'post.a11y_delete',
defaultMessage: 'Delete comment',
})}
/>
)}
</Fragment>
Expand All @@ -288,6 +316,10 @@ const CommentView = ({
iconSize={16}
onPress={() => _showSubCommentsToggle()}
text=""
accessibilityLabel={intl.formatMessage({
id: repliesToggle ? 'post.a11y_hide_replies' : 'post.a11y_show_replies',
defaultMessage: repliesToggle ? 'Hide replies' : 'Show replies',
})}
/>
)}
</View>
Expand Down
6 changes: 6 additions & 0 deletions src/components/iconButton/view/iconButtonView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ const IconButton = ({
size,
style,
isLoading,
accessibilityLabel,
accessibilityHint,
}) => (
<Fragment>
<TouchableOpacity
Expand All @@ -33,6 +35,10 @@ const IconButton = ({
underlayColor={backgroundColor || 'white'}
disabled={disabled}
onLongPress={() => !isLoading && onLongPress && onLongPress()}
accessibilityRole={onPress ? 'button' : undefined}
accessibilityLabel={accessibilityLabel}
accessibilityHint={accessibilityHint}
accessibilityState={{ disabled: !!disabled }}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Mark loading icon buttons as disabled for a11y

For callers that pass isLoading without also setting disabled (for example the edit-avatar/profile-cover and snippet delete buttons), onPress is suppressed while loading but this new accessibility state still reports the control as enabled. Screen-reader users can focus an enabled button that does nothing while the spinner is shown; include isLoading in the disabled state or disable the touchable consistently.

Useful? React with 👍 / 👎.

>
{!isLoading ? (
<Icon
Expand Down
37 changes: 36 additions & 1 deletion src/components/postCard/children/postCardActionsPanel.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import get from 'lodash/get';
import { TouchableOpacity, View } from 'react-native';
import { useIntl } from 'react-intl';

// Components
import { TextWithIcon } from '../../basicUIElements';
Expand All @@ -22,6 +23,8 @@ interface Props {
}

const PostCardActionsPanelComponent = ({ content, handleCardInteraction }: Props) => {
const intl = useIntl();

const _onVotersPress = () => {
handleCardInteraction(PostCardActionIds.NAVIGATE, {
name: ROUTES.SCREENS.VOTERS,
Expand Down Expand Up @@ -63,7 +66,19 @@ const PostCardActionsPanelComponent = ({ content, handleCardInteraction }: Props
}
/>

<TouchableOpacity style={styles.commentButton} onPress={_onVotersPress}>
<TouchableOpacity
style={styles.commentButton}
onPress={_onVotersPress}
accessibilityRole="button"
accessibilityLabel={intl.formatMessage(
{ id: 'post.a11y_votes', defaultMessage: '{count} votes' },
{ count: content.stats?.total_votes || 0 },
)}
accessibilityHint={intl.formatMessage({
id: 'post.a11y_voters_hint',
defaultMessage: 'View voters',
})}
>
<TextWithIcon
iconName="heart-outline"
iconStyle={styles.commentIcon}
Expand All @@ -81,6 +96,14 @@ const PostCardActionsPanelComponent = ({ content, handleCardInteraction }: Props
isClickable
text={content.reblogs || ''}
onPress={_onReblogsPress}
accessibilityLabel={intl.formatMessage(
{ id: 'post.a11y_reblogs', defaultMessage: '{count} reblogs' },
{ count: content.reblogs || 0 },
)}
accessibilityHint={intl.formatMessage({
id: 'post.a11y_reblogs_hint',
defaultMessage: 'View reblogs',
})}
/>
<TextWithIcon
iconName="comment-outline"
Expand All @@ -89,13 +112,25 @@ const PostCardActionsPanelComponent = ({ content, handleCardInteraction }: Props
isClickable
text={get(content, 'children', 0)}
onPress={() => handleCardInteraction(PostCardActionIds.REPLY)}
accessibilityLabel={intl.formatMessage(
{ id: 'post.a11y_comments', defaultMessage: '{count} comments' },
{ count: get(content, 'children', 0) },
)}
accessibilityHint={intl.formatMessage({
id: 'post.a11y_reply_hint',
defaultMessage: 'Reply',
})}
/>
<TextWithIcon
iconName="gift-outline"
iconStyle={styles.commentIcon}
iconType="MaterialCommunityIcons"
isClickable
onPress={_onTipPress}
accessibilityLabel={intl.formatMessage({
id: 'post.a11y_tip',
defaultMessage: 'Send tip',
})}
/>
</View>
</View>
Expand Down
4 changes: 4 additions & 0 deletions src/components/postCard/children/postCardHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,10 @@ const PostCardHeaderComponent = ({
name="dots-horizontal"
onPress={() => handleCardInteraction(PostCardActionIds.OPTIONS)}
size={24}
accessibilityLabel={intl.formatMessage({
id: 'post.a11y_post_options',
defaultMessage: 'Post options',
})}
/>
</View>
</View>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,10 @@ class PostHeaderDescription extends PureComponent {
name="dots-horizontal"
onPress={() => handleOnDotPress && handleOnDotPress()}
iconType="MaterialCommunityIcons"
accessibilityLabel={intl.formatMessage({
id: 'post.a11y_post_options',
defaultMessage: 'Post options',
})}
/>
</View>
)}
Expand Down
45 changes: 45 additions & 0 deletions src/components/postView/view/postDisplayView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,14 @@ const PostDisplayView = ({
onPress={handleVotersIconPress}
text={activeVotesCount}
textMarginLeft={20}
accessibilityLabel={intl.formatMessage(
{ id: 'post.a11y_votes', defaultMessage: '{count} votes' },
{ count: activeVotesCount || 0 },
)}
accessibilityHint={intl.formatMessage({
id: 'post.a11y_voters_hint',
defaultMessage: 'View voters',
})}
/>
<TextWithIcon
iconName="repeat"
Expand All @@ -252,6 +260,14 @@ const PostDisplayView = ({
onPress={_handleOnReblogsPress}
text={post?.reblogs ?? 0}
textMarginLeft={20}
accessibilityLabel={intl.formatMessage(
{ id: 'post.a11y_reblogs', defaultMessage: '{count} reblogs' },
{ count: post?.reblogs ?? 0 },
)}
accessibilityHint={intl.formatMessage({
id: 'post.a11y_reblogs_hint',
defaultMessage: 'View reblogs',
})}
/>
{isLoggedIn && (
<TextWithIcon
Expand All @@ -264,6 +280,14 @@ const PostDisplayView = ({
onLongPress={_showQuickReplyModal}
onPress={_scrollToComments}
isLoading={!isLoadedComments}
accessibilityLabel={intl.formatMessage(
{ id: 'post.a11y_comments', defaultMessage: '{count} comments' },
{ count: get(post, 'children', 0) },
)}
accessibilityHint={intl.formatMessage({
id: 'post.a11y_comments_hint',
defaultMessage: 'View comments',
})}
/>
)}
{!isLoggedIn && (
Expand All @@ -274,6 +298,10 @@ const PostDisplayView = ({
isClickable
text={get(post, 'children', 0)}
textMarginLeft={20}
accessibilityLabel={intl.formatMessage(
{ id: 'post.a11y_comments', defaultMessage: '{count} comments' },
{ count: get(post, 'children', 0) },
)}
/>
)}

Expand All @@ -286,6 +314,14 @@ const PostDisplayView = ({
text={tipsQuery.data?.meta?.count || 0}
textMarginLeft={20}
isLoading={tipsQuery.isLoading}
accessibilityLabel={intl.formatMessage(
{ id: 'post.a11y_tips', defaultMessage: '{count} tips' },
{ count: tipsQuery.data?.meta?.count || 0 },
)}
accessibilityHint={intl.formatMessage({
id: 'post.a11y_tip',
defaultMessage: 'Send tip',
})}
/>
</View>
</StickyBar>
Expand All @@ -306,6 +342,7 @@ const PostDisplayView = ({
_handleOnTipPress,
tipsQuery.data?.meta?.count,
tipsQuery.isLoading,
intl,
],
);

Expand Down Expand Up @@ -394,6 +431,14 @@ const PostDisplayView = ({
text={getAbbreviatedNumber(postStatsQuery.data?.visits || 0)}
textMarginLeft={4}
isLoading={postStatsQuery.isLoading}
accessibilityLabel={intl.formatMessage(
{ id: 'post.a11y_views', defaultMessage: '{count} views' },
{ count: postStatsQuery.data?.visits || 0 },
)}
accessibilityHint={intl.formatMessage({
id: 'post.a11y_stats_hint',
defaultMessage: 'View post stats',
})}
/>
</View>
</View>
Expand Down
16 changes: 16 additions & 0 deletions src/config/locales/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -868,6 +868,22 @@
"downvoted": "Downvoted",
"upvote_hint": "Double tap to open vote options",
"payout_details": "Payout details",
"a11y_votes": "{count} votes",
"a11y_voters_hint": "View voters",
"a11y_reblogs": "{count} reblogs",
"a11y_reblogs_hint": "View reblogs",
"a11y_comments": "{count} comments",
"a11y_comments_hint": "View comments",
"a11y_reply_hint": "Reply",
"a11y_tip": "Send tip",
"a11y_tips": "{count} tips",
Comment thread
greptile-apps[bot] marked this conversation as resolved.
Outdated
"a11y_edit": "Edit comment",
"a11y_delete": "Delete comment",
"a11y_show_replies": "Show replies",
"a11y_hide_replies": "Hide replies",
"a11y_post_options": "Post options",
"a11y_views": "{count} views",
"a11y_stats_hint": "View post stats",
"image": "Image",
"reveal_muted": "MUTED\nTap to reveal content",
"in": "in",
Expand Down
Loading