fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-11-15 11:21:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Give focused status a sensible aria-label for screen readers

Browse source 
Port 248df68c36 to glitch-soc
This commit is contained in:
Thibaut Girka 2018-08-28 12:10:40 +02:00
parent 087dcf720e
commit 530da545a5
2 changed files with 30 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/javascript/flavours/glitch/components/status.js
View file

@ -7,7 +7,7 @@ import StatusIcons from './status_icons';
import StatusContent from './status_content';
import StatusActionBar from './status_action_bar';
import AttachmentList from './attachment_list';
import { FormattedMessage } from 'react-intl';
import { injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { MediaGallery, Video } from 'flavours/glitch/util/async-components';
import { HotKeys } from 'react-hotkeys';
@ -19,6 +19,24 @@ import { autoUnfoldCW } from 'flavours/glitch/util/content_warning';
// to use the progress bar to show download progress
import Bundle from '../features/ui/components/bundle';
export const textForScreenReader = (intl, status, rebloggedByText = false, expanded = false) => {
const displayName = status.getIn(['account', 'display_name']);
const values = [
displayName.length === 0 ? status.getIn(['account', 'acct']).split('@')[0] : displayName,
status.get('spoiler_text') && !expanded ? status.get('spoiler_text') : status.get('search_index').slice(status.get('spoiler_text').length),
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);
}
return values.join(', ');
};
@injectIntl
export default class Status extends ImmutablePureComponent {
static contextTypes = {
@ -52,6 +70,7 @@ export default class Status extends ImmutablePureComponent {
getScrollPosition: PropTypes.func,
updateScrollBottom: PropTypes.func,
expanded: PropTypes.bool,
intl: PropTypes.object.isRequired,
};
state = {
@ -337,6 +356,7 @@ export default class Status extends ImmutablePureComponent {
} = this;
const { router } = this.context;
const {
intl,
status,
account,
settings,
@ -473,6 +493,12 @@ export default class Status extends ImmutablePureComponent {
selectorAttribs[`data-${notifKind}-by`] = `@${account.get('acct')}`;
}
let rebloggedByText;
if (prepend === 'reblog') {
rebloggedByText = intl.formatMessage({ id: 'status.reblogged_by', defaultMessage: '{name} boosted' }, { name: account.get('acct') });
}
const handlers = {
reply: this.handleHotkeyReply,
favourite: this.handleHotkeyFavourite,
@ -501,6 +527,7 @@ export default class Status extends ImmutablePureComponent {
ref={handleRef}
tabIndex='0'
data-featured={featured ? 'true' : null}
aria-label={textForScreenReader(intl, status, rebloggedByText, !status.get('hidden'))}
>
<header className='status__info'>
<span>

3
app/javascript/flavours/glitch/features/status/index.js
View file

@ -39,6 +39,7 @@ import { HotKeys } from 'react-hotkeys';
import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/util/initial_state';
import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from 'flavours/glitch/util/fullscreen';
import { autoUnfoldCW } from 'flavours/glitch/util/content_warning';
import { textForScreenReader } from 'flavours/glitch/components/status';
const messages = defineMessages({
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@ -401,7 +402,7 @@ export default class Status extends ImmutablePureComponent {
{ancestors}
<HotKeys handlers={handlers}>
<div className='focusable' tabIndex='0'>
<div className='focusable' tabIndex='0' aria-label={textForScreenReader(intl, status, false, !status.get('hidden'))}>
<DetailedStatus
status={status}
settings={settings}