Add quote-related info to a post's aria-label (#36169)

app/javascript/mastodon/components/status.jsx

@@ -39,7 +39,18 @@ import { IconButton } from './icon_button';
 
 const domParser = new DOMParser();
 
-export const textForScreenReader = (intl, status, rebloggedByText = false) => {
+const messages = defineMessages({
+  public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
+  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Quiet public' },
+  private_short: { id: 'privacy.private.short', defaultMessage: 'Followers' },
+  direct_short: { id: 'privacy.direct.short', defaultMessage: 'Specific people' },
+  edited: { id: 'status.edited', defaultMessage: 'Edited {date}' },
+  quote_noun: { id: 'status.quote_noun', defaultMessage: 'Quote', description: 'Quote as a noun' },
+  contains_quote: { id: 'status.contains_quote', defaultMessage: 'Contains quote' },
+  quote_cancel: { id: 'status.quote.cancel', defaultMessage: 'Cancel quote' },
+});
+
+export const textForScreenReader = ({intl, status, rebloggedByText = false, isQuote = false}) => {
   const displayName = status.getIn(['account', 'display_name']);
 
   const spoilerText = status.getIn(['translation', 'spoiler_text']) || status.get('spoiler_text');
@@ -47,15 +58,14 @@ export const textForScreenReader = (intl, status, rebloggedByText = false) => {
   const contentText = domParser.parseFromString(contentHtml, 'text/html').documentElement.textContent;
 
   const values = [
+    isQuote ? intl.formatMessage(messages.quote_noun) : undefined,
     displayName.length === 0 ? status.getIn(['account', 'acct']).split('@')[0] : displayName,
     spoilerText && status.get('hidden') ? spoilerText : contentText,
+    !!status.get('quote') ? intl.formatMessage(messages.contains_quote) : undefined,
     intl.formatDate(status.get('created_at'), { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }),
     status.getIn(['account', 'acct']),
-  ];
-
-  if (rebloggedByText) {
-    values.push(rebloggedByText);
-  }
+    rebloggedByText,
+  ].filter(val => !!val);
 
   return values.join(', ');
 };
@@ -72,15 +82,6 @@ export const defaultMediaVisibility = (status) => {
   return !status.get('matched_media_filters') && (displayMedia !== 'hide_all' && !status.get('sensitive') || displayMedia === 'show_all');
 };
 
-const messages = defineMessages({
-  public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
-  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Quiet public' },
-  private_short: { id: 'privacy.private.short', defaultMessage: 'Followers' },
-  direct_short: { id: 'privacy.direct.short', defaultMessage: 'Specific people' },
-  edited: { id: 'status.edited', defaultMessage: 'Edited {date}' },
-  quote_cancel: { id: 'status.quote.cancel', defaultMessage: 'Cancel quote' },
-});
-
 class Status extends ImmutablePureComponent {
 
   static contextType = SensitiveMediaContext;
@@ -554,7 +555,7 @@ class Status extends ImmutablePureComponent {
 
     return (
       <Hotkeys handlers={handlers} focusable={!unfocusable}>
-        <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, focusable: !this.props.muted })} tabIndex={this.props.muted || unfocusable ? null : 0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader(intl, status, rebloggedByText)} ref={this.handleRef} data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}>
+        <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, focusable: !this.props.muted })} tabIndex={this.props.muted || unfocusable ? null : 0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader({intl, status, rebloggedByText, isQuote: isQuotedPost})} ref={this.handleRef} data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}>
           {!skipPrepend && prepend}
 
           <div

app/javascript/mastodon/components/status/boost_button_utils.ts

@@ -18,7 +18,11 @@ export const messages = defineMessages({
     id: 'status.all_disabled',
     defaultMessage: 'Boosts and quotes are disabled',
   },
-  quote: { id: 'status.quote', defaultMessage: 'Quote' },
+  quote: {
+    id: 'status.quote',
+    defaultMessage: 'Quote',
+    description: 'Quote as a verb (e.g. Quote this post)',
+  },
   quote_cannot: {
     id: 'status.cannot_quote',
     defaultMessage: 'You are not allowed to quote this post',

app/javascript/mastodon/features/status/index.jsx

@@ -591,7 +591,7 @@ class Status extends ImmutablePureComponent {
             {ancestors}
 
             <Hotkeys handlers={handlers}>
-              <div className={classNames('focusable', 'detailed-status__wrapper', `detailed-status__wrapper-${status.get('visibility')}`)} tabIndex={0} aria-label={textForScreenReader(intl, status, false)} ref={this.setStatusRef}>
+              <div className={classNames('focusable', 'detailed-status__wrapper', `detailed-status__wrapper-${status.get('visibility')}`)} tabIndex={0} aria-label={textForScreenReader({intl, status})} ref={this.setStatusRef}>
                 <DetailedStatus
                   key={`details-${status.get('id')}`}
                   status={status}

app/javascript/mastodon/locales/en.json

@@ -864,6 +864,7 @@
   "status.cancel_reblog_private": "Unboost",
   "status.cannot_quote": "You are not allowed to quote this post",
   "status.cannot_reblog": "This post cannot be boosted",
+  "status.contains_quote": "Contains quote",
   "status.context.load_new_replies": "New replies available",
   "status.context.loading": "Checking for more replies",
   "status.continued_thread": "Continued thread",
@@ -903,6 +904,7 @@
   "status.quote_error.revoked": "Post removed by author",
   "status.quote_followers_only": "Only followers can quote this post",
   "status.quote_manual_review": "Author will manually review",
+  "status.quote_noun": "Quote",
   "status.quote_policy_change": "Change who can quote",
   "status.quote_post_author": "Quoted a post by @{name}",
   "status.quote_private": "Private posts cannot be quoted",