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

This commit is contained in:
diondiondion 2025-09-22 15:50:29 +02:00 committed by GitHub
commit e473583da0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 25 additions and 18 deletions

View file

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

View file

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