cybrespace/mastodon
4
3
Fork 3
Code Issues 7 Pull requests Releases Activity

Add aria-label to column regions (#8390)

Browse source 
Fix #4485
This commit is contained in:
Eugen Rochko 2018-08-23 17:26:21 +02:00 • committed by GitHub
parent 63484ee17a
commit 66dbb59aa1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 19 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/javascript/mastodon/components/column.js
View file

@ -7,6 +7,7 @@ export default class Column extends React.PureComponent {
static propTypes = {
children: PropTypes.node,
label: PropTypes.string,
};
scrollTop () {
@ -40,10 +41,10 @@ export default class Column extends React.PureComponent {
}
render () {
const { children } = this.props;
const { label, children } = this.props;
return (
<div role='region' className='column' ref={this.setRef}>
<div role='region' aria-label={label} className='column' ref={this.setRef}>
{children}
</div>
);

2
app/javascript/mastodon/features/community_timeline/index.js
View file

@ -105,7 +105,7 @@ export default class CommunityTimeline extends React.PureComponent {
const pinned = !!columnId;
return (
<Column ref={this.setRef}>
<Column ref={this.setRef} label={intl.formatMessage(messages.title)}>
<ColumnHeader
icon='users'
active={hasUnread}

3
app/javascript/mastodon/features/compose/index.js
View file

@ -22,6 +22,7 @@ const messages = defineMessages({
community: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' },
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new toot' },
});
const mapStateToProps = (state, ownProps) => ({
@ -95,7 +96,7 @@ export default class Compose extends React.PureComponent {
}
return (
<div className='drawer'>
<div className='drawer' role='region' aria-label={intl.formatMessage(messages.compose)}>
{header}
{(multiColumn || isSearchPage) && <SearchContainer /> }

2
app/javascript/mastodon/features/direct_timeline/index.js
View file

@ -76,7 +76,7 @@ export default class DirectTimeline extends React.PureComponent {
const pinned = !!columnId;
return (
<Column ref={this.setRef}>
<Column ref={this.setRef} label={intl.formatMessage(messages.title)}>
<ColumnHeader
icon='envelope'
active={hasUnread}

2
app/javascript/mastodon/features/favourited_statuses/index.js
View file

@ -72,7 +72,7 @@ export default class Favourites extends ImmutablePureComponent {
const pinned = !!columnId;
return (
<Column ref={this.setRef}>
<Column ref={this.setRef} label={intl.formatMessage(messages.heading)}>
<ColumnHeader
icon='star'
title={intl.formatMessage(messages.heading)}

3
app/javascript/mastodon/features/getting_started/index.js
View file

@ -31,6 +31,7 @@ const messages = defineMessages({
discover: { id: 'navigation_bar.discover', defaultMessage: 'Discover' },
personal: { id: 'navigation_bar.personal', defaultMessage: 'Personal' },
security: { id: 'navigation_bar.security', defaultMessage: 'Security' },
menu: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
});
const mapStateToProps = state => ({
@ -115,7 +116,7 @@ export default class GettingStarted extends ImmutablePureComponent {
}
return (
<Column>
<Column label={intl.formatMessage(messages.menu)}>
{multiColumn && <div className='column-header__wrapper'>
<h1 className='column-header'>
<button>

2
app/javascript/mastodon/features/hashtag_timeline/index.js
View file

@ -89,7 +89,7 @@ export default class HashtagTimeline extends React.PureComponent {
const pinned = !!columnId;
return (
<Column ref={this.setRef}>
<Column ref={this.setRef} label={`#${id}`}>
<ColumnHeader
icon='hashtag'
active={hasUnread}

2
app/javascript/mastodon/features/home_timeline/index.js
View file

@ -98,7 +98,7 @@ export default class HomeTimeline extends React.PureComponent {
const pinned = !!columnId;
return (
<Column ref={this.setRef}>
<Column ref={this.setRef} label={intl.formatMessage(messages.title)}>
<ColumnHeader
icon='home'
active={hasUnread}

2
app/javascript/mastodon/features/list_timeline/index.js
View file

@ -137,7 +137,7 @@ export default class ListTimeline extends React.PureComponent {
}
return (
<Column ref={this.setRef}>
<Column ref={this.setRef} label={title}>
<ColumnHeader
icon='list-ul'
active={hasUnread}

2
app/javascript/mastodon/features/notifications/index.js
View file

@ -165,7 +165,7 @@ export default class Notifications extends React.PureComponent {
);
return (
<Column ref={this.setColumnRef}>
<Column ref={this.setColumnRef} label={intl.formatMessage(messages.title)}>
<ColumnHeader
icon='bell'
active={isUnread}

2
app/javascript/mastodon/features/public_timeline/index.js
View file

@ -112,7 +112,7 @@ export default class PublicTimeline extends React.PureComponent {
const pinned = !!columnId;
return (
<Column ref={this.setRef}>
<Column ref={this.setRef} label={intl.formatMessage(messages.title)}>
<ColumnHeader
icon='globe'
active={hasUnread}

2
app/javascript/mastodon/features/standalone/community_timeline/index.js
View file

@ -51,7 +51,7 @@ export default class CommunityTimeline extends React.PureComponent {
const { intl } = this.props;
return (
<Column ref={this.setRef}>
<Column ref={this.setRef} label={intl.formatMessage(messages.title)}>
<ColumnHeader
icon='users'
title={intl.formatMessage(messages.title)}

2
app/javascript/mastodon/features/standalone/public_timeline/index.js
View file

@ -51,7 +51,7 @@ export default class PublicTimeline extends React.PureComponent {
const { intl } = this.props;
return (
<Column ref={this.setRef}>
<Column ref={this.setRef} label={intl.formatMessage(messages.title)}>
<ColumnHeader
icon='globe'
title={intl.formatMessage(messages.title)}

3
app/javascript/mastodon/features/status/index.js
View file

@ -52,6 +52,7 @@ const messages = defineMessages({
blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' },
hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' },
detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' },
});
const makeMapStateToProps = () => {
@ -404,7 +405,7 @@ export default class Status extends ImmutablePureComponent {
};
return (
<Column>
<Column label={intl.formatMessage(messages.detailedStatus)}>
<ColumnHeader
showBackButton
extraButton={(

66
app/javascript/mastodon/features/trends/index.js
View file

@ -1,66 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import { injectIntl, defineMessages } from 'react-intl';
import Column from '../ui/components/column';
import ColumnHeader from '../../components/column_header';
import Hashtag from '../../components/hashtag';
import classNames from 'classnames';
import { fetchTrends } from '../../actions/trends';
const messages = defineMessages({
title: { id: 'trends.header', defaultMessage: 'Trending now' },
refreshTrends: { id: 'trends.refresh', defaultMessage: 'Refresh trends' },
});
const mapStateToProps = state => ({
trends: state.getIn(['trends', 'items']),
loading: state.getIn(['trends', 'isLoading']),
});
const mapDispatchToProps = dispatch => ({
fetchTrends: () => dispatch(fetchTrends()),
});
@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
export default class Trends extends ImmutablePureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
trends: ImmutablePropTypes.list,
fetchTrends: PropTypes.func.isRequired,
loading: PropTypes.bool,
};
componentDidMount () {
this.props.fetchTrends();
}
handleRefresh = () => {
this.props.fetchTrends();
}
render () {
const { trends, loading, intl } = this.props;
return (
<Column>
<ColumnHeader
icon='fire'
title={intl.formatMessage(messages.title)}
extraButton={(
<button className='column-header__button' title={intl.formatMessage(messages.refreshTrends)} aria-label={intl.formatMessage(messages.refreshTrends)} onClick={this.handleRefresh}><i className={classNames('fa', 'fa-refresh', { 'fa-spin': loading })} /></button>
)}
/>
<div className='scrollable'>
{trends && trends.map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
</div>
</Column>
);
}
}