diff --git a/app/javascript/flavours/glitch/components/column.js b/app/javascript/flavours/glitch/components/column.js
index 57c4c7a4048..dc87818a519 100644
--- a/app/javascript/flavours/glitch/components/column.js
+++ b/app/javascript/flavours/glitch/components/column.js
@@ -9,6 +9,7 @@ export default class Column extends React.PureComponent {
children: PropTypes.node,
extraClasses: PropTypes.string,
name: PropTypes.string,
+ label: PropTypes.string,
};
scrollTop () {
@@ -42,10 +43,10 @@ export default class Column extends React.PureComponent {
}
render () {
- const { children, extraClasses, name } = this.props;
+ const { children, extraClasses, name, label } = this.props;
return (
-
+
{children}
);
diff --git a/app/javascript/flavours/glitch/components/intersection_observer_article.js b/app/javascript/flavours/glitch/components/intersection_observer_article.js
index f7f6b0a532d..6eeca5598e3 100644
--- a/app/javascript/flavours/glitch/components/intersection_observer_article.js
+++ b/app/javascript/flavours/glitch/components/intersection_observer_article.js
@@ -107,7 +107,7 @@ export default class IntersectionObserverArticle extends ImmutablePureComponent
return (
+
{children && React.cloneElement(children, { hidden: false })}
);
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index f3709f6535d..4d47660c2e1 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -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,
@@ -474,6 +494,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,
@@ -502,6 +528,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'))}
>
diff --git a/app/javascript/flavours/glitch/features/community_timeline/index.js b/app/javascript/flavours/glitch/features/community_timeline/index.js
index b5843ca164c..ddcca2dc098 100644
--- a/app/javascript/flavours/glitch/features/community_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/community_timeline/index.js
@@ -76,7 +76,7 @@ export default class CommunityTimeline extends React.PureComponent {
const pinned = !!columnId;
return (
-
+
+
({
account: state.getIn(['accounts', me]),
@@ -96,7 +102,7 @@ class Drawer extends React.Component {
// The result.
return (
-
+
{multiColumn ? (
+
{
@@ -148,7 +149,7 @@ export default class GettingStarted extends ImmutablePureComponent {
]);
return (
-
+
diff --git a/app/javascript/flavours/glitch/features/hashtag_timeline/index.js b/app/javascript/flavours/glitch/features/hashtag_timeline/index.js
index 8f77ed42b5f..311fabb63d9 100644
--- a/app/javascript/flavours/glitch/features/hashtag_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/hashtag_timeline/index.js
@@ -88,7 +88,7 @@ export default class HashtagTimeline extends React.PureComponent {
const pinned = !!columnId;
return (
-
+
+
+
+
+
+
{
@@ -387,7 +389,7 @@ export default class Status extends ImmutablePureComponent {
};
return (
-
+
-