[Glitch] Add quote-related info to a post's aria-label

Port e473583da0 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2025-09-22 15:50:29 +02:00
committed by Claire
parent 4ba1ad75e0
commit ba724f80b1
3 changed files with 17 additions and 13 deletions

View File

@@ -36,7 +36,12 @@ import { IconButton } from './icon_button';
const domParser = new DOMParser(); const domParser = new DOMParser();
export const textForScreenReader = (intl, status, rebloggedByText = false, expanded = false) => { const messages = defineMessages({
quote_noun: { id: 'status.quote_noun', defaultMessage: 'Quote', description: 'Quote as a noun' },
quote_cancel: { id: 'status.quote.cancel', defaultMessage: 'Cancel quote' },
});
export const textForScreenReader = ({intl, status, rebloggedByText = false, isQuote = false, expanded = false}) => {
const displayName = status.getIn(['account', 'display_name']); const displayName = status.getIn(['account', 'display_name']);
const spoilerText = status.getIn(['translation', 'spoiler_text']) || status.get('spoiler_text'); const spoilerText = status.getIn(['translation', 'spoiler_text']) || status.get('spoiler_text');
@@ -44,15 +49,14 @@ export const textForScreenReader = (intl, status, rebloggedByText = false, expan
const contentText = domParser.parseFromString(contentHtml, 'text/html').documentElement.textContent; const contentText = domParser.parseFromString(contentHtml, 'text/html').documentElement.textContent;
const values = [ const values = [
isQuote ? intl.formatMessage(messages.quote_noun) : undefined,
displayName.length === 0 ? status.getIn(['account', 'acct']).split('@')[0] : displayName, displayName.length === 0 ? status.getIn(['account', 'acct']).split('@')[0] : displayName,
spoilerText && !expanded ? spoilerText : contentText, spoilerText && !expanded ? 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' }), intl.formatDate(status.get('created_at'), { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }),
status.getIn(['account', 'acct']), status.getIn(['account', 'acct']),
]; rebloggedByText,
].filter(val => !!val);
if (rebloggedByText) {
values.push(rebloggedByText);
}
return values.join(', '); return values.join(', ');
}; };
@@ -73,10 +77,6 @@ export const defaultMediaVisibility = (status, settings) => {
return !status.get('matched_media_filters') && (displayMedia !== 'hide_all' && !status.get('sensitive') || displayMedia === 'show_all'); return !status.get('matched_media_filters') && (displayMedia !== 'hide_all' && !status.get('sensitive') || displayMedia === 'show_all');
}; };
const messages = defineMessages({
quote_cancel: { id: 'status.quote.cancel', defaultMessage: 'Cancel quote' },
});
class Status extends ImmutablePureComponent { class Status extends ImmutablePureComponent {
static contextType = SensitiveMediaContext; static contextType = SensitiveMediaContext;
@@ -688,7 +688,7 @@ class Status extends ImmutablePureComponent {
{...selectorAttribs} {...selectorAttribs}
tabIndex={unfocusable ? null : 0} tabIndex={unfocusable ? null : 0}
data-featured={featured ? 'true' : null} data-featured={featured ? 'true' : null}
aria-label={textForScreenReader(intl, status, rebloggedByText, !status.get('hidden'))} aria-label={textForScreenReader({intl, status, rebloggedByText, isQuote: isQuotedPost, expanded: !status.get('hidden')})}
ref={this.handleRef} ref={this.handleRef}
data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined} data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}
> >

View File

@@ -18,7 +18,11 @@ export const messages = defineMessages({
id: 'status.all_disabled', id: 'status.all_disabled',
defaultMessage: 'Boosts and quotes are 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: { quote_cannot: {
id: 'status.cannot_quote', id: 'status.cannot_quote',
defaultMessage: 'You are not allowed to quote this post', defaultMessage: 'You are not allowed to quote this post',

View File

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