diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2018-08-23 17:26:21 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-08-23 17:26:21 +0200 |
commit | 66dbb59aa16981643e3bfa3f94d441bc3166eab3 (patch) | |
tree | 19aaa54811049fbbe15886cc7446c2c34d25e75c /app/javascript | |
parent | 63484ee17a857ad0c4c33f196bfa8d825621c509 (diff) |
Add aria-label to column regions (#8390)
Fix #4485
Diffstat (limited to 'app/javascript')
15 files changed, 19 insertions, 81 deletions
diff --git a/app/javascript/mastodon/components/column.js b/app/javascript/mastodon/components/column.js index e81236d26..d45387463 100644 --- a/app/javascript/mastodon/components/column.js +++ b/app/javascript/mastodon/components/column.js @@ -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> ); diff --git a/app/javascript/mastodon/features/community_timeline/index.js b/app/javascript/mastodon/features/community_timeline/index.js index 1cd5cf157..48d2b3f68 100644 --- a/app/javascript/mastodon/features/community_timeline/index.js +++ b/app/javascript/mastodon/features/community_timeline/index.js @@ -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} diff --git a/app/javascript/mastodon/features/compose/index.js b/app/javascript/mastodon/features/compose/index.js index df1ec4915..b7394a39e 100644 --- a/app/javascript/mastodon/features/compose/index.js +++ b/app/javascript/mastodon/features/compose/index.js @@ -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 /> } diff --git a/app/javascript/mastodon/features/direct_timeline/index.js b/app/javascript/mastodon/features/direct_timeline/index.js index 2181c75b6..dd289ce56 100644 --- a/app/javascript/mastodon/features/direct_timeline/index.js +++ b/app/javascript/mastodon/features/direct_timeline/index.js @@ -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} diff --git a/app/javascript/mastodon/features/favourited_statuses/index.js b/app/javascript/mastodon/features/favourited_statuses/index.js index 3973ed3cb..55fee88e6 100644 --- a/app/javascript/mastodon/features/favourited_statuses/index.js +++ b/app/javascript/mastodon/features/favourited_statuses/index.js @@ -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)} diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js index 95af8997e..f34ac6b8a 100644 --- a/app/javascript/mastodon/features/getting_started/index.js +++ b/app/javascript/mastodon/features/getting_started/index.js @@ -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> diff --git a/app/javascript/mastodon/features/hashtag_timeline/index.js b/app/javascript/mastodon/features/hashtag_timeline/index.js index 15fca9ab4..b67486f07 100644 --- a/app/javascript/mastodon/features/hashtag_timeline/index.js +++ b/app/javascript/mastodon/features/hashtag_timeline/index.js @@ -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} diff --git a/app/javascript/mastodon/features/home_timeline/index.js b/app/javascript/mastodon/features/home_timeline/index.js index 4e6853c5b..12dab0e44 100644 --- a/app/javascript/mastodon/features/home_timeline/index.js +++ b/app/javascript/mastodon/features/home_timeline/index.js @@ -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} diff --git a/app/javascript/mastodon/features/list_timeline/index.js b/app/javascript/mastodon/features/list_timeline/index.js index 5c40fb758..164669e89 100644 --- a/app/javascript/mastodon/features/list_timeline/index.js +++ b/app/javascript/mastodon/features/list_timeline/index.js @@ -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} diff --git a/app/javascript/mastodon/features/notifications/index.js b/app/javascript/mastodon/features/notifications/index.js index 94a46b833..b7d7f361c 100644 --- a/app/javascript/mastodon/features/notifications/index.js +++ b/app/javascript/mastodon/features/notifications/index.js @@ -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} diff --git a/app/javascript/mastodon/features/public_timeline/index.js b/app/javascript/mastodon/features/public_timeline/index.js index 5f7ac5fc7..6d5c4118d 100644 --- a/app/javascript/mastodon/features/public_timeline/index.js +++ b/app/javascript/mastodon/features/public_timeline/index.js @@ -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} diff --git a/app/javascript/mastodon/features/standalone/community_timeline/index.js b/app/javascript/mastodon/features/standalone/community_timeline/index.js index 629d058a2..c8ae9b304 100644 --- a/app/javascript/mastodon/features/standalone/community_timeline/index.js +++ b/app/javascript/mastodon/features/standalone/community_timeline/index.js @@ -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)} diff --git a/app/javascript/mastodon/features/standalone/public_timeline/index.js b/app/javascript/mastodon/features/standalone/public_timeline/index.js index 1236cb927..115c51d85 100644 --- a/app/javascript/mastodon/features/standalone/public_timeline/index.js +++ b/app/javascript/mastodon/features/standalone/public_timeline/index.js @@ -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)} diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js index e506733b4..98b321dbd 100644 --- a/app/javascript/mastodon/features/status/index.js +++ b/app/javascript/mastodon/features/status/index.js @@ -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={( diff --git a/app/javascript/mastodon/features/trends/index.js b/app/javascript/mastodon/features/trends/index.js deleted file mode 100644 index f33af3e2e..000000000 --- a/app/javascript/mastodon/features/trends/index.js +++ /dev/null @@ -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> - ); - } - -} |