Make login form accessible to Password Managers

src/components/ExpensiTextInput/BaseExpensiTextInput.js

@@ -8,6 +8,7 @@ import ExpensiTextInputLabel from './ExpensiTextInputLabel';
 import * as baseExpensiTextInputPropTypes from './baseExpensiTextInputPropTypes';
 import themeColors from '../../styles/themes/default';
 import styles from '../../styles/styles';
+import * as TextInputUtils from '../../libs/TextInputUtils';
 import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
 import InlineErrorText from '../InlineErrorText';
@@ -37,12 +38,17 @@ class BaseExpensiTextInput extends Component {
     }
 
     componentDidMount() {
-        // We are manually managing focus to prevent this issue: https://github.com/Expensify/App/issues/4514
-        if (!this.props.autoFocus || !this.input) {
+        if (!this.input) {
             return;
         }
 
-        this.input.focus();
+        // We are manually managing focus to prevent this issue: https://github.com/Expensify/App/issues/4514
+        if (this.props.autoFocus) {
+            this.input.focus();
+        }
+        if (this.props.name) {
+            TextInputUtils.setBrowserAttributes(this.input, 'name', this.props.name);
+        }
     }
 
     componentDidUpdate(prevProps) {
@@ -167,6 +173,7 @@ class BaseExpensiTextInput extends Component {
                                         label={this.props.label}
                                         labelTranslateY={this.state.labelTranslateY}
                                         labelScale={this.state.labelScale}
+                                        for={this.props.nativeID}
                                     />
                                 </>
                             ) : null}

src/components/ExpensiTextInput/ExpensiTextInputLabel/expensiTextInputLabelPropTypes.js

@@ -3,13 +3,23 @@ import {Animated} from 'react-native';
 
 const propTypes = {
     /** Label */
-    label: PropTypes.string,
+    label: PropTypes.string.isRequired,
 
     /** Label vertical translate */
     labelTranslateY: PropTypes.instanceOf(Animated.Value).isRequired,
 
     /** Label scale */
     labelScale: PropTypes.instanceOf(Animated.Value).isRequired,
+
+    /** For attribute for label (only Web) */
+    for: PropTypes.string,
+};
+
+const defaultProps = {
+    for: '',
 };
 
-export default propTypes;
+export {
+    propTypes,
+    defaultProps,
+};

src/components/ExpensiTextInput/ExpensiTextInputLabel/index.js

@@ -1,26 +1,45 @@
-import React, {memo} from 'react';
+import React, {PureComponent} from 'react';
 import {Animated} from 'react-native';
+import * as TextInputUtils from '../../../libs/TextInputUtils';
 import styles from '../../../styles/styles';
-import propTypes from './expensiTextInputLabelPropTypes';
+import {propTypes, defaultProps} from './expensiTextInputLabelPropTypes';
 
-const ExpensiTextInputLabel = props => (
-    <Animated.Text
-        style={[
-            styles.expensiTextInputLabel,
-            styles.expensiTextInputLabelDesktop,
-            styles.expensiTextInputLabelTransformation(
-                props.labelTranslateY,
-                0,
-                props.labelScale,
-            ),
-        ]}
-        pointerEvents="none"
-    >
-        {props.label}
-    </Animated.Text>
-);
+class ExpensiTextInputLabel extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.label = null;
+    }
+
+    componentDidMount() {
+        if (!this.props.for) {
+            return;
+        }
+        TextInputUtils.setBrowserAttributes(this.label, 'for', this.props.for);
+    }
+
+    render() {
+        return (
+            <Animated.Text
+                pointerEvents="none"
+                accessibilityRole="label"
+                ref={el => this.label = el}
+                style={[
+                    styles.expensiTextInputLabel,
+                    styles.expensiTextInputLabelDesktop,
+                    styles.expensiTextInputLabelTransformation(
+                        this.props.labelTranslateY,
+                        0,
+                        this.props.labelScale,
+                    ),
+                ]}
+            >
+                {this.props.label}
+            </Animated.Text>
+        );
+    }
+}
 
 ExpensiTextInputLabel.propTypes = propTypes;
-ExpensiTextInputLabel.displayName = 'ExpensiTextInputLabel';
+ExpensiTextInputLabel.defaultProps = defaultProps;
 
-export default memo(ExpensiTextInputLabel);
+export default ExpensiTextInputLabel;

src/components/ExpensiTextInput/ExpensiTextInputLabel/index.native.js

@@ -1,7 +1,7 @@
 import React, {PureComponent} from 'react';
 import {Animated} from 'react-native';
 import styles from '../../../styles/styles';
-import propTypes from './expensiTextInputLabelPropTypes';
+import * as expensiTextInputLabelPropTypes from './expensiTextInputLabelPropTypes';
 import * as styleConst from '../styleConst';
 
 class ExpensiTextInputLabel extends PureComponent {
@@ -36,6 +36,7 @@ class ExpensiTextInputLabel extends PureComponent {
     }
 }
 
-ExpensiTextInputLabel.propTypes = propTypes;
+ExpensiTextInputLabel.propTypes = expensiTextInputLabelPropTypes.propTypes;
+ExpensiTextInputLabel.propTypes = expensiTextInputLabelPropTypes.defaultProps;
 
 export default ExpensiTextInputLabel;

src/components/ExpensiTextInput/baseExpensiTextInputPropTypes.js

@@ -4,6 +4,9 @@ const propTypes = {
     /** Input label */
     label: PropTypes.string,
 
+    /** Name attribute for the input (only Web) */
+    name: PropTypes.string,
+
     /** Input value */
     value: PropTypes.string,
 
@@ -33,6 +36,7 @@ const propTypes = {
 
 const defaultProps = {
     label: '',
+    name: '',
     errorText: '',
     placeholder: '',
     hasError: false,

src/components/Form.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import {View} from 'react-native';
+import * as TextInputUtils from '../libs/TextInputUtils';
+
+class Form extends React.Component {
+    componentDidMount() {
+        // Password Managers need these atributes to be able to identify the form elments properly.
+        TextInputUtils.setBrowserAttributes(this.form, 'method', 'post');
+        TextInputUtils.setBrowserAttributes(this.form, 'action', '/');
+    }
+
+    render() {
+        return (
+            <View
+                accessibilityRole={TextInputUtils.accessibilityRoleForm}
+                accessibilityAutoComplete="on"
+                ref={el => this.form = el}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...this.props}
+            />
+        );
+    }
+}
+
+export default Form;

src/libs/TextInputUtils/index.js

@@ -0,0 +1,26 @@
+/**
+ * Web password field needs `current-password` as autocomplete type which is not supported on native
+ */
+const passwordAutocompleteType = 'current-password';
+const accessibilityRoleForm = 'form';
+
+/**
+ * Used to set attributes on underlying dom node that are only available on web and throws error on native platform.
+ * @param {Object} element
+ * @param {String} attribute
+ * @param {String} value
+ */
+function setBrowserAttributes(element, attribute, value) {
+    if (!element) {
+        return;
+    }
+    element.setNativeProps({
+        [attribute]: value,
+    });
+}
+
+export {
+    passwordAutocompleteType,
+    accessibilityRoleForm,
+    setBrowserAttributes,
+};

src/libs/TextInputUtils/index.native.js

@@ -0,0 +1,13 @@
+const passwordAutocompleteType = 'password';
+const accessibilityRoleForm = 'none';
+
+/**
+ * Skip adding browser only attributes to underlying Nodes which will result in an runtime error.
+ */
+function setBrowserAttributes() {}
+
+export {
+    passwordAutocompleteType,
+    accessibilityRoleForm,
+    setBrowserAttributes,
+};

src/pages/signin/LoginForm.js

@@ -33,19 +33,23 @@ const propTypes = {
         loading: PropTypes.bool,
     }),
 
+    /** Whether the page is visible. */
+    visible: PropTypes.bool,
+
     ...windowDimensionsPropTypes,
 
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     account: {},
+    visible: false,
 };
 
 class LoginForm extends React.Component {
     constructor(props) {
         super(props);
-
+        this.input = null;
         this.onTextInput = this.onTextInput.bind(this);
         this.validateAndSubmitForm = this.validateAndSubmitForm.bind(this);
 
@@ -55,6 +59,25 @@ class LoginForm extends React.Component {
         };
     }
 
+    componentDidMount() {
+        if (!canFocusInputOnScreenFocus() || !this.input) {
+            return;
+        }
+        this.input.focus();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.visible || !this.props.visible) {
+            return;
+        }
+        this.input.focus();
+
+        if (this.state.login) {
+            // eslint-disable-next-line react/no-did-update-set-state
+            this.setState({login: ''});
+        }
+    }
+
     /**
      * Handle text input and clear formError upon text change
      *
@@ -102,19 +125,21 @@ class LoginForm extends React.Component {
 
     render() {
         return (
-            <>
+            <View style={!this.props.visible && styles.visuallyHidden}>
                 <View style={[styles.mt3]}>
                     <ExpensiTextInput
+                        ref={el => this.input = el}
                         label={this.props.translate('loginForm.phoneOrEmail')}
                         value={this.state.login}
-                        autoCompleteType="email"
+                        autoCompleteType="username"
                         textContentType="username"
+                        nativeID="username"
+                        name="username"
                         onChangeText={this.onTextInput}
                         onSubmitEditing={this.validateAndSubmitForm}
                         autoCapitalize="none"
                         autoCorrect={false}
                         keyboardType={getEmailKeyboardType()}
-                        autoFocus={canFocusInputOnScreenFocus()}
                     />
                 </View>
                 {this.state.formError && (
@@ -141,8 +166,7 @@ class LoginForm extends React.Component {
                         onPress={this.validateAndSubmitForm}
                     />
                 </View>
-
-            </>
+            </View>
         );
     }
 }