6 files changed, 79 insertions, 47 deletions

diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js
index e831eb47b..6a8c7645f 100644
--- a/src/components/ui/ImageUpload.js
+++ b/src/components/ui/ImageUpload.js
@@ -55,7 +55,7 @@ export default @observer class ImageUpload extends Component {
         </label>
         <div className="image-upload">
           {(field.value && field.value !== 'delete') || this.state.path ? (
-            <Fragment>
+            <>
               <div
                 className="image-upload__preview"
                 style={{
@@ -80,7 +80,7 @@ export default @observer class ImageUpload extends Component {
                 </button>
                 <div className="image-upload__action-background" />
               </div>
-            </Fragment>
+            </>
           ) : (
             <Dropzone
               ref={(node) => {
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js
index 612399e9f..bd2af2296 100644
--- a/src/components/ui/InfoBar.js
+++ b/src/components/ui/InfoBar.js
@@ -3,11 +3,21 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import Loader from 'react-loader';
+import { defineMessages, intlShape } from 'react-intl';
 
 // import { oneOrManyChildElements } from '../../prop-types';
 import Appear from './effects/Appear';
 
-export default @observer class InfoBar extends Component {
+const messages = defineMessages({
+  hide: {
+    id: 'infobar.hide',
+    defaultMessage: '!!!Hide',
+  },
+});
+
+export default
+@observer
+class InfoBar extends Component {
   static propTypes = {
     // eslint-disable-next-line
     children: PropTypes.any.isRequired,
@@ -32,6 +42,10 @@ export default @observer class InfoBar extends Component {
     onHide: () => null,
   };
 
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   render() {
     const {
       children,
@@ -45,6 +59,8 @@ export default @observer class InfoBar extends Component {
       onHide,
     } = this.props;
 
+    const { intl } = this.context;
+
     let transitionName = 'slideUp';
     if (position === 'top') {
       transitionName = 'slideDown';
@@ -63,11 +79,7 @@ export default @observer class InfoBar extends Component {
         <div className="info-bar__content">
           {children}
           {ctaLabel && (
-            <button
-              type="button"
-              className="info-bar__cta"
-              onClick={onClick}
-            >
+            <button type="button" className="info-bar__cta" onClick={onClick}>
               <Loader
                 loaded={!ctaLoading}
                 lines={10}
@@ -84,6 +96,7 @@ export default @observer class InfoBar extends Component {
             type="button"
             className="info-bar__close mdi mdi-close"
             onClick={onHide}
+            aria-label={intl.formatMessage(messages.hide)}
           />
         )}
       </Appear>
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js
index 0917ee9f0..73b48b957 100644
--- a/src/components/ui/Infobox.js
+++ b/src/components/ui/Infobox.js
@@ -3,8 +3,18 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import Loader from 'react-loader';
+import { defineMessages, intlShape } from 'react-intl';
 
-export default @observer class Infobox extends Component {
+const messages = defineMessages({
+  dismiss: {
+    id: 'infobox.dismiss',
+    defaultMessage: '!!!Dismiss',
+  },
+});
+
+export default
+@observer
+class Infobox extends Component {
   static propTypes = {
     children: PropTypes.any.isRequired, // eslint-disable-line
     icon: PropTypes.string,
@@ -28,6 +38,10 @@ export default @observer class Infobox extends Component {
     onSeen: () => null,
   };
 
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   state = {
     dismissed: false,
   };
@@ -49,6 +63,8 @@ export default @observer class Infobox extends Component {
       onDismiss,
     } = this.props;
 
+    const { intl } = this.context;
+
     if (this.state.dismissed) {
       return null;
     }
@@ -61,18 +77,10 @@ export default @observer class Infobox extends Component {
           'infobox--default': !type,
         })}
       >
-        {icon && (
-          <i className={`mdi mdi-${icon}`} />
-        )}
-        <div className="infobox__content">
-          {children}
-        </div>
+        {icon && <i className={`mdi mdi-${icon}`} />}
+        <div className="infobox__content">{children}</div>
         {ctaLabel && (
-          <button
-            className="infobox__cta"
-            onClick={ctaOnClick}
-            type="button"
-          >
+          <button className="infobox__cta" onClick={ctaOnClick} type="button">
             <Loader
               loaded={!ctaLoading}
               lines={10}
@@ -91,6 +99,7 @@ export default @observer class Infobox extends Component {
               if (onDismiss) onDismiss();
             }}
             className="infobox__delete mdi mdi-close"
+            aria-label={intl.formatMessage(messages.dismiss)}
           />
         )}
       </div>
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js
index 4e3eb4ab8..7417fef1c 100644
--- a/src/components/ui/Input.js
+++ b/src/components/ui/Input.js
@@ -3,10 +3,20 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
+import { defineMessages, intlShape } from 'react-intl';
 
 import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers';
 
-export default @observer class Input extends Component {
+const messages = defineMessages({
+  passwordToggle: {
+    id: 'settings.app.form.passwordToggle',
+    defaultMessage: '!!!Password toggle',
+  },
+});
+
+export default
+@observer
+class Input extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
     className: PropTypes.string,
@@ -28,10 +38,14 @@ export default @observer class Input extends Component {
     suffix: '',
   };
 
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   state = {
     showPassword: false,
     passwordScore: 0,
-  }
+  };
 
   inputElement = null;
 
@@ -68,6 +82,8 @@ export default @observer class Input extends Component {
 
     const { passwordScore } = this.state;
 
+    const { intl } = this.context;
+
     let { type } = field;
     if (type === 'password' && this.state.showPassword) {
       type = 'text';
@@ -82,9 +98,7 @@ export default @observer class Input extends Component {
         })}
       >
         <div className="franz-form__input-wrapper">
-          {prefix && (
-            <span className="franz-form__input-prefix">{prefix}</span>
-          )}
+          {prefix && <span className="franz-form__input-prefix">{prefix}</span>}
           <input
             id={field.id}
             type={type}
@@ -92,15 +106,15 @@ export default @observer class Input extends Component {
             name={field.name}
             value={field.value}
             placeholder={field.placeholder}
-            onChange={e => this.onChange(e)}
+            onChange={(e) => this.onChange(e)}
             onBlur={field.onBlur}
             onFocus={field.onFocus}
-            ref={(element) => { this.inputElement = element; }}
+            ref={(element) => {
+              this.inputElement = element;
+            }}
             disabled={field.disabled}
           />
-          {suffix && (
-            <span className="franz-form__input-suffix">{suffix}</span>
-          )}
+          {suffix && <span className="franz-form__input-suffix">{suffix}</span>}
           {showPasswordToggle && (
             <button
               type="button"
@@ -110,8 +124,11 @@ export default @observer class Input extends Component {
                 'mdi-eye': !this.state.showPassword,
                 'mdi-eye-off': this.state.showPassword,
               })}
-              onClick={() => this.setState(prevState => ({ showPassword: !prevState.showPassword }))}
-              tabIndex="-1"
+              onClick={() => this.setState((prevState) => ({
+                showPassword: !prevState.showPassword,
+              }))}
+              tabIndex={-1}
+              aria-label={intl.formatMessage(messages.passwordToggle)}
             />
           )}
           {scorePassword && (
@@ -128,20 +145,11 @@ export default @observer class Input extends Component {
           )}
         </div>
         {field.label && showLabel && (
-          <label
-            className="franz-form__label"
-            htmlFor={field.name}
-          >
+          <label className="franz-form__label" htmlFor={field.name}>
             {field.label}
           </label>
         )}
-        {field.error && (
-          <div
-            className="franz-form__error"
-          >
-            {field.error}
-          </div>
-        )}
+        {field.error && <div className="franz-form__error">{field.error}</div>}
       </div>
     );
   }
diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js
index 16881a7f7..546b05a4e 100644
--- a/src/components/ui/Tabs/TabItem.js
+++ b/src/components/ui/Tabs/TabItem.js
@@ -11,7 +11,7 @@ export default class TabItem extends Component {
     const { children } = this.props;
 
     return (
-      <Fragment>{children}</Fragment>
+      <>{children}</>
     );
   }
 }
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js
index 196cddc66..7ece29fbe 100644
--- a/src/components/ui/Tabs/Tabs.js
+++ b/src/components/ui/Tabs/Tabs.js
@@ -5,7 +5,9 @@ import classnames from 'classnames';
 
 import { oneOrManyChildElements } from '../../../prop-types';
 
-export default @observer class Tab extends Component {
+export default
+@observer
+class Tab extends Component {
   static propTypes = {
     children: oneOrManyChildElements.isRequired,
     active: PropTypes.number,
@@ -15,7 +17,7 @@ export default @observer class Tab extends Component {
     active: 0,
   };
 
-  componentWillMount() {
+  componentDidMount() {
     this.setState({ active: this.props.active });
   }
 
@@ -25,7 +27,7 @@ export default @observer class Tab extends Component {
 
   render() {
     const { children: childElements } = this.props;
-    const children = childElements.filter(c => !!c);
+    const children = childElements.filter((c) => !!c);
 
     if (children.length === 1) {
       return <div>{children}</div>;