feat(a11y): label post action-row + overflow-menu controls for screen readers

src/components/basicUIElements/view/textWithIcon/textWithIconView.tsx

@@ -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}>
@@ -31,6 +36,12 @@ const TextWithIcon = ({
         disabled={!isClickable || !onPress}
         onPress={() => onPress && onPress()}
         onLongPress={() => onLongPress && onLongPress()}
+        accessibilityRole={_interactive ? 'button' : undefined}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        // Only advertise state for actual buttons; decorative/display-only instances
+        // must not announce as "dimmed" (disabled) on VoiceOver/TalkBack.
+        accessibilityState={_interactive ? { disabled: false } : undefined}
       >
         <View style={[styles.wrapper, wrapperStyle]}>
           {isLoading ? (

src/components/comment/view/commentView.tsx

@@ -209,12 +209,27 @@ const CommentView = ({
           iconSize={20}
           wrapperStyle={styles.leftButton}
           iconType="MaterialCommunityIcons"
-          isClickable
+          isClickable={_totalVotes > 0}
           onPress={() =>
             handleOnVotersPress && _totalVotes > 0 && handleOnVotersPress(activeVotes, comment)
           }
           text={_totalVotes}
           textStyle={styles.voteCountText}
+          accessibilityLabel={intl.formatMessage(
+            {
+              id: 'post.a11y_votes',
+              defaultMessage: '{count, plural, one {# vote} other {# votes}}',
+            },
+            { count: _totalVotes || 0 },
+          )}
+          accessibilityHint={
+            _totalVotes > 0
+              ? intl.formatMessage({
+                  id: 'post.a11y_voters_hint',
+                  defaultMessage: 'View voters',
+                })
+              : undefined
+          }
         />
 
         <TextWithIcon
@@ -226,6 +241,17 @@ const CommentView = ({
           onPress={_handleOnReplyPress}
           text={childCount || 0}
           textStyle={styles.voteCountText}
+          accessibilityLabel={intl.formatMessage(
+            {
+              id: 'post.a11y_comments',
+              defaultMessage: '{count, plural, one {# comment} other {# comments}}',
+            },
+            { count: childCount || 0 },
+          )}
+          accessibilityHint={intl.formatMessage({
+            id: 'post.a11y_reply_hint',
+            defaultMessage: 'Reply',
+          })}
         />
 
         {isLoggedIn && (
@@ -236,6 +262,10 @@ const CommentView = ({
             name="gift-outline"
             onPress={_handleOnTipPress}
             iconType="MaterialCommunityIcons"
+            accessibilityLabel={intl.formatMessage({
+              id: 'post.a11y_tip',
+              defaultMessage: 'Send tip',
+            })}
           />
         )}
 
@@ -248,6 +278,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
@@ -265,6 +299,10 @@ const CommentView = ({
                   )
                 }
                 iconType="MaterialIcons"
+                accessibilityLabel={intl.formatMessage({
+                  id: 'post.a11y_delete',
+                  defaultMessage: 'Delete comment',
+                })}
               />
             )}
           </Fragment>
@@ -288,6 +326,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>

src/components/iconButton/view/iconButtonView.tsx

@@ -25,6 +25,8 @@ const IconButton = ({
   size,
   style,
   isLoading,
+  accessibilityLabel,
+  accessibilityHint,
 }) => (
   <Fragment>
     <TouchableOpacity
@@ -33,6 +35,12 @@ const IconButton = ({
       underlayColor={backgroundColor || 'white'}
       disabled={disabled}
       onLongPress={() => !isLoading && onLongPress && onLongPress()}
+      accessibilityRole={onPress ? 'button' : undefined}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      // `isLoading` suppresses onPress, so report it as disabled too — otherwise a
+      // screen reader announces an enabled button that does nothing while spinning.
+      accessibilityState={{ disabled: !!disabled || !!isLoading }}
     >
       {!isLoading ? (
         <Icon

src/components/postCard/children/postCardActionsPanel.tsx

@@ -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';
@@ -22,6 +23,8 @@ interface Props {
 }
 
 const PostCardActionsPanelComponent = ({ content, handleCardInteraction }: Props) => {
+  const intl = useIntl();
+
   const _onVotersPress = () => {
     handleCardInteraction(PostCardActionIds.NAVIGATE, {
       name: ROUTES.SCREENS.VOTERS,
@@ -63,7 +66,22 @@ 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, plural, one {# vote} other {# 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}
@@ -81,6 +99,17 @@ const PostCardActionsPanelComponent = ({ content, handleCardInteraction }: Props
           isClickable
           text={content.reblogs || ''}
           onPress={_onReblogsPress}
+          accessibilityLabel={intl.formatMessage(
+            {
+              id: 'post.a11y_reblogs',
+              defaultMessage: '{count, plural, one {# reblog} other {# reblogs}}',
+            },
+            { count: content.reblogs || 0 },
+          )}
+          accessibilityHint={intl.formatMessage({
+            id: 'post.a11y_reblogs_hint',
+            defaultMessage: 'View reblogs',
+          })}
         />
         <TextWithIcon
           iconName="comment-outline"
@@ -89,13 +118,28 @@ const PostCardActionsPanelComponent = ({ content, handleCardInteraction }: Props
           isClickable
           text={get(content, 'children', 0)}
           onPress={() => handleCardInteraction(PostCardActionIds.REPLY)}
+          accessibilityLabel={intl.formatMessage(
+            {
+              id: 'post.a11y_comments',
+              defaultMessage: '{count, plural, one {# comment} other {# 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>

src/components/postCard/children/postCardHeader.tsx

@@ -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>

src/components/postElements/headerDescription/view/postHeaderDescription.tsx

@@ -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>
               )}

src/components/postView/view/postDisplayView.tsx

@@ -243,6 +243,17 @@ const PostDisplayView = ({
             onPress={handleVotersIconPress}
             text={activeVotesCount}
             textMarginLeft={20}
+            accessibilityLabel={intl.formatMessage(
+              {
+                id: 'post.a11y_votes',
+                defaultMessage: '{count, plural, one {# vote} other {# votes}}',
+              },
+              { count: activeVotesCount || 0 },
+            )}
+            accessibilityHint={intl.formatMessage({
+              id: 'post.a11y_voters_hint',
+              defaultMessage: 'View voters',
+            })}
           />
           <TextWithIcon
             iconName="repeat"
@@ -252,6 +263,17 @@ const PostDisplayView = ({
             onPress={_handleOnReblogsPress}
             text={post?.reblogs ?? 0}
             textMarginLeft={20}
+            accessibilityLabel={intl.formatMessage(
+              {
+                id: 'post.a11y_reblogs',
+                defaultMessage: '{count, plural, one {# reblog} other {# reblogs}}',
+              },
+              { count: post?.reblogs ?? 0 },
+            )}
+            accessibilityHint={intl.formatMessage({
+              id: 'post.a11y_reblogs_hint',
+              defaultMessage: 'View reblogs',
+            })}
           />
           {isLoggedIn && (
             <TextWithIcon
@@ -264,6 +286,17 @@ const PostDisplayView = ({
               onLongPress={_showQuickReplyModal}
               onPress={_scrollToComments}
               isLoading={!isLoadedComments}
+              accessibilityLabel={intl.formatMessage(
+                {
+                  id: 'post.a11y_comments',
+                  defaultMessage: '{count, plural, one {# comment} other {# comments}}',
+                },
+                { count: get(post, 'children', 0) },
+              )}
+              accessibilityHint={intl.formatMessage({
+                id: 'post.a11y_comments_hint',
+                defaultMessage: 'View comments',
+              })}
             />
           )}
           {!isLoggedIn && (
@@ -274,6 +307,13 @@ const PostDisplayView = ({
               isClickable
               text={get(post, 'children', 0)}
               textMarginLeft={20}
+              accessibilityLabel={intl.formatMessage(
+                {
+                  id: 'post.a11y_comments',
+                  defaultMessage: '{count, plural, one {# comment} other {# comments}}',
+                },
+                { count: get(post, 'children', 0) },
+              )}
             />
           )}
 
@@ -286,6 +326,17 @@ const PostDisplayView = ({
             text={tipsQuery.data?.meta?.count || 0}
             textMarginLeft={20}
             isLoading={tipsQuery.isLoading}
+            accessibilityLabel={intl.formatMessage(
+              {
+                id: 'post.a11y_tips',
+                defaultMessage: '{count, plural, one {# tip} other {# tips}}',
+              },
+              { count: tipsQuery.data?.meta?.count || 0 },
+            )}
+            accessibilityHint={intl.formatMessage({
+              id: 'post.a11y_tip',
+              defaultMessage: 'Send tip',
+            })}
           />
         </View>
       </StickyBar>
@@ -306,6 +357,7 @@ const PostDisplayView = ({
       _handleOnTipPress,
       tipsQuery.data?.meta?.count,
       tipsQuery.isLoading,
+      intl,
     ],
   );
 
@@ -394,6 +446,17 @@ const PostDisplayView = ({
                     text={getAbbreviatedNumber(postStatsQuery.data?.visits || 0)}
                     textMarginLeft={4}
                     isLoading={postStatsQuery.isLoading}
+                    accessibilityLabel={intl.formatMessage(
+                      {
+                        id: 'post.a11y_views',
+                        defaultMessage: '{count, plural, one {# view} other {# views}}',
+                      },
+                      { count: postStatsQuery.data?.visits || 0 },
+                    )}
+                    accessibilityHint={intl.formatMessage({
+                      id: 'post.a11y_stats_hint',
+                      defaultMessage: 'View post stats',
+                    })}
                   />
                 </View>
               </View>

src/config/locales/en-US.json

@@ -868,6 +868,22 @@
     "downvoted": "Downvoted",
     "upvote_hint": "Double tap to open vote options",
     "payout_details": "Payout details",
+    "a11y_votes": "{count, plural, one {# vote} other {# votes}}",
+    "a11y_voters_hint": "View voters",
+    "a11y_reblogs": "{count, plural, one {# reblog} other {# reblogs}}",
+    "a11y_reblogs_hint": "View reblogs",
+    "a11y_comments": "{count, plural, one {# comment} other {# comments}}",
+    "a11y_comments_hint": "View comments",
+    "a11y_reply_hint": "Reply",
+    "a11y_tip": "Send tip",
+    "a11y_tips": "{count, plural, one {# tip} other {# tips}}",
+    "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, plural, one {# view} other {# views}}",
+    "a11y_stats_hint": "View post stats",
     "image": "Image",
     "reveal_muted": "MUTED\nTap to reveal content",
     "in": "in",