matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SubNavigation: add a11y titles

Browse Source
This commit is contained in:
Alex Gleason
2021-10-15 18:37:32 -05:00
parent efd583473a
commit 0b975c7761
1 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/soapbox/components/sub_navigation.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import { injectIntl, defineMessages } from 'react-intl';
import { throttle } from 'lodash';
import Icon from 'soapbox/components/icon';
import IconButton from 'soapbox/components/icon_button';
@ -9,6 +9,11 @@ import classNames from 'classnames';
import Helmet from 'soapbox/components/helmet';
import { openModal } from 'soapbox/actions/modal';
const messages = defineMessages({
back: { id: 'column_back_button.label', defaultMessage: 'Back' },
settings: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
});
const mapDispatchToProps = (dispatch, { settings: Settings }) => {
return {
onOpenSettings() {
@ -18,9 +23,11 @@ const mapDispatchToProps = (dispatch, { settings: Settings }) => {
};
export default @connect(undefined, mapDispatchToProps)
@injectIntl
class SubNavigation extends React.PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
message: PropTypes.string,
settings: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
onOpenSettings: PropTypes.func.isRequired,
@ -85,7 +92,7 @@ class SubNavigation extends React.PureComponent {
}
render() {
const { message, settings: Settings } = this.props;
const { intl, message, settings: Settings } = this.props;
const { scrolled } = this.state;
return (
@ -95,9 +102,11 @@ class SubNavigation extends React.PureComponent {
className='sub-navigation__back'
onClick={this.handleBackClick}
onKeyUp={this.handleBackKeyUp}
aria-label={intl.formatMessage(messages.back)}
title={intl.formatMessage(messages.back)}
>
<Icon src={require('@tabler/icons/icons/arrow-back.svg')} />
<FormattedMessage id='column_back_button.label' defaultMessage='Back' />
{intl.formatMessage(messages.back)}
</button>
{message && (
<div className='sub-navigation__message'>
@ -107,7 +116,11 @@ class SubNavigation extends React.PureComponent {
)}
{Settings && (
<div className='sub-navigation__cog'>
<IconButton src={require('@tabler/icons/icons/settings.svg')} onClick={this.handleOpenSettings} />
<IconButton
src={require('@tabler/icons/icons/settings.svg')}
onClick={this.handleOpenSettings}
title={intl.formatMessage(messages.settings)}
/>
</div>
)}
</div>