Make login form accessible to Password Managers

src/components/ExpensiTextInput/BaseExpensiTextInput.js

@@ -8,6 +8,7 @@ import ExpensiTextInputLabel from './ExpensiTextInputLabel';
 import {propTypes, defaultProps} from './baseExpensiTextInputPropTypes';
 import themeColors from '../../styles/themes/default';
 import styles from '../../styles/styles';
+import {setBrowserAttributes} from '../../libs/TextInputUtils';
 import InlineErrorText from '../InlineErrorText';
 
 const ACTIVE_LABEL_TRANSLATE_Y = -12;
@@ -42,10 +43,17 @@ class BaseExpensiTextInput extends Component {
     }
 
     componentDidMount() {
+        if (!this.input) {
+            return;
+        }
+
         // We are manually managing focus to prevent this issue: https://github.com/Expensify/App/issues/4514
-        if (this.props.autoFocus && this.input) {
+        if (this.props.autoFocus) {
             this.input.focus();
         }
+        if (this.props.name) {
+            setBrowserAttributes(this.input, 'name', this.props.name);
+        }
     }
 
     componentDidUpdate(prevProps) {
@@ -150,6 +158,9 @@ class BaseExpensiTextInput extends Component {
             innerRef,
             autoFocus,
             multiline,
+
+            // Only present for Web
+            name,
             ...inputProps
         } = this.props;
 
@@ -184,6 +195,7 @@ class BaseExpensiTextInput extends Component {
                                         }
                                         labelTranslateY={this.state.labelTranslateY}
                                         labelScale={this.state.labelScale}
+                                        for={this.props.nativeID}
                                     />
                                 </>
                             ) : null}

src/components/ExpensiTextInput/ExpensiTextInputLabel/expensiTextInputLabelPropTypes.js

@@ -3,7 +3,7 @@ import {Animated} from 'react-native';
 
 const propTypes = {
     /** Label */
-    label: PropTypes.string,
+    label: PropTypes.string.isRequired,
 
     /** Label vertical translate */
     labelTranslateY: PropTypes.instanceOf(Animated.Value).isRequired,
@@ -13,6 +13,16 @@ const propTypes = {
 
     /** 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,31 +1,44 @@
-import React, {memo} from 'react';
+import React, {PureComponent} from 'react';
 import {Animated} from 'react-native';
+import {setBrowserAttributes} from '../../../libs/TextInputUtils';
 import styles from '../../../styles/styles';
-import propTypes from './expensiTextInputLabelPropTypes';
+import {propTypes, defaultProps} from './expensiTextInputLabelPropTypes';
 
-const ExpensiTextInputLabel = ({
-    label,
-    labelTranslateY,
-    labelTranslateX,
-    labelScale,
-}) => (
-    <Animated.Text
-        style={[
-            styles.expensiTextInputLabel,
-            styles.expensiTextInputLabelDesktop,
-            styles.expensiTextInputLabelTransformation(
-                labelTranslateY,
-                labelTranslateX,
-                labelScale,
-            ),
-        ]}
-        pointerEvents="none"
-    >
-        {label}
-    </Animated.Text>
-);
+class ExpensiTextInputLabel extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.label = null;
+    }
+
+    componentDidMount() {
+        if (this.props.for) {
+            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,
+                        this.props.labelTranslateX,
+                        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, {memo} from 'react';
 import {Animated} from 'react-native';
 import styles from '../../../styles/styles';
-import propTypes from './expensiTextInputLabelPropTypes';
+import {propTypes, defaultProps} from './expensiTextInputLabelPropTypes';
 
 const ExpensiTextInputLabel = ({
     label,
@@ -24,6 +24,7 @@ const ExpensiTextInputLabel = ({
 );
 
 ExpensiTextInputLabel.propTypes = propTypes;
+ExpensiTextInputLabel.propTypes = defaultProps;
 ExpensiTextInputLabel.displayName = 'ExpensiTextInputLabel';
 
 export default memo(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,
 
@@ -36,6 +39,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 {accessibilityRoleForm, setBrowserAttributes} from '../libs/TextInputUtils';
+
+class Form extends React.Component {
+    componentDidMount() {
+        setBrowserAttributes(this.form, 'method', 'post');
+        setBrowserAttributes(this.form, 'action', '/');
+    }
+
+    render() {
+        return (
+            <View
+                accessibilityRole={accessibilityRoleForm}
+                accessibilityAutoComplete="on"
+                ref={el => this.form = el}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...this.props}
+            />
+        );
+    }
+}
+
+Form.displayName = 'Form';
+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

@@ -32,19 +32,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);
 
@@ -54,6 +58,23 @@ class LoginForm extends React.Component {
         };
     }
 
+    componentDidMount() {
+        if (canFocusInputOnScreenFocus() && this.input) {
+            this.input.focus();
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        if (!prevProps.visible && this.props.visible) {
+            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
      *
@@ -98,19 +119,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()}
                         translateX={-18}
                     />
                 </View>
@@ -138,8 +161,7 @@ class LoginForm extends React.Component {
                         onPress={this.validateAndSubmitForm}
                     />
                 </View>
-
-            </>
+            </View>
         );
     }
 }