1 files changed, 28 insertions, 9 deletions

diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js
index 72ba7b2e3..5b3b754fa 100644
--- a/src/components/settings/SettingsLayout.js
+++ b/src/components/settings/SettingsLayout.js
@@ -1,38 +1,55 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
 
 import ErrorBoundary from '../util/ErrorBoundary';
 import { oneOrManyChildElements } from '../../prop-types';
 import Appear from '../ui/effects/Appear';
 
-export default @observer class SettingsLayout extends Component {
+const messages = defineMessages({
+  closeSettings: {
+    id: 'settings.app.closeSettings',
+    defaultMessage: '!!!Close settings',
+  },
+});
+
+export default
+@observer
+class SettingsLayout extends Component {
   static propTypes = {
     navigation: PropTypes.element.isRequired,
     children: oneOrManyChildElements.isRequired,
     closeSettings: PropTypes.func.isRequired,
   };
 
-  componentWillMount() {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  componentDidMount() {
     document.addEventListener('keydown', this.handleKeyDown.bind(this), false);
   }
 
   componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeyDown.bind(this), false);
+    document.removeEventListener(
+      'keydown',
+      this.handleKeyDown.bind(this),
+      false,
+    );
   }
 
   handleKeyDown(e) {
-    if (e.keyCode === 27) { // escape key
+    if (e.keyCode === 27) {
+      // escape key
       this.props.closeSettings();
     }
   }
 
   render() {
-    const {
-      navigation,
-      children,
-      closeSettings,
-    } = this.props;
+    const { navigation, children, closeSettings } = this.props;
+
+    const { intl } = this.context;
 
     return (
       <Appear transitionName="fadeIn-fast">
@@ -42,6 +59,7 @@ export default @observer class SettingsLayout extends Component {
               type="button"
               className="settings-wrapper__action"
               onClick={closeSettings}
+              aria-label={intl.formatMessage(messages.closeSettings)}
             />
             <div className="settings franz-form">
               {navigation}
@@ -50,6 +68,7 @@ export default @observer class SettingsLayout extends Component {
                 type="button"
                 className="settings__close mdi mdi-close"
                 onClick={closeSettings}
+                aria-label={intl.formatMessage(messages.closeSettings)}
               />
             </div>
           </ErrorBoundary>