1 files changed, 31 insertions, 23 deletions

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>
     );
   }