From 0b975c7761c1b6a2f2b0992273cf2b75324859eb Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 15 Oct 2021 18:37:32 -0500
Subject: [PATCH] SubNavigation: add a11y titles

---
 app/soapbox/components/sub_navigation.js | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/sub_navigation.js b/app/soapbox/components/sub_navigation.js
index 4e48f4dc5..33287befa 100644
--- a/app/soapbox/components/sub_navigation.js
+++ b/app/soapbox/components/sub_navigation.js
@@ -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>