Make login form accessible to Password Managers

src/components/ExpensiTextInput/BaseExpensiTextInput.js

@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
 import {
-    Animated, TextInput, View, TouchableWithoutFeedback, Pressable,
+    Animated, View, TouchableWithoutFeedback, Pressable,
 } from 'react-native';
 import Str from 'expensify-common/lib/str';
 import ExpensiTextInputLabel from './ExpensiTextInputLabel';
@@ -12,6 +12,7 @@ import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
 import InlineErrorText from '../InlineErrorText';
 import * as styleConst from './styleConst';
+import TextInputWithName from '../TextInputWithName';
 
 class BaseExpensiTextInput extends Component {
     constructor(props) {
@@ -167,11 +168,12 @@ class BaseExpensiTextInput extends Component {
                                         label={this.props.label}
                                         labelTranslateY={this.state.labelTranslateY}
                                         labelScale={this.state.labelScale}
+                                        for={this.props.nativeID}
                                     />
                                 </>
                             ) : null}
                             <View style={[styles.expensiTextInputAndIconContainer]}>
-                                <TextInput
+                                <TextInputWithName
                                     ref={(ref) => {
                                         if (typeof this.props.innerRef === 'function') { this.props.innerRef(ref); }
                                         this.input = ref;
@@ -189,18 +191,19 @@ class BaseExpensiTextInput extends Component {
                                     onChangeText={this.setValue}
                                     secureTextEntry={this.state.passwordHidden}
                                     onPressOut={this.props.onPress}
+                                    name={this.props.name}
                                 />
                                 {this.props.secureTextEntry && (
-                                <Pressable
-                                    accessibilityRole="button"
-                                    style={styles.secureInputEyeButton}
-                                    onPress={this.togglePasswordVisibility}
-                                >
-                                    <Icon
-                                        src={this.state.passwordHidden ? Expensicons.Eye : Expensicons.EyeDisabled}
-                                        fill={themeColors.icon}
-                                    />
-                                </Pressable>
+                                    <Pressable
+                                        accessibilityRole="button"
+                                        style={styles.secureInputEyeButton}
+                                        onPress={this.togglePasswordVisibility}
+                                    >
+                                        <Icon
+                                            src={this.state.passwordHidden ? Expensicons.Eye : Expensicons.EyeDisabled}
+                                            fill={themeColors.icon}
+                                        />
+                                    </Pressable>
                                 )}
                             </View>
                         </View>

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 */
+    for: PropTypes.string,
+};
+
+const defaultProps = {
+    for: '',
 };
 
-export default propTypes;
+export {
+    propTypes,
+    defaultProps,
+};

src/components/ExpensiTextInput/ExpensiTextInputLabel/index.js

@@ -1,26 +1,39 @@
-import React, {memo} from 'react';
+import React, {PureComponent} from 'react';
 import {Animated} from 'react-native';
 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 {
+    componentDidMount() {
+        if (!this.props.for) {
+            return;
+        }
+        this.label.setNativeProps({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 */
+    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/BaseForm.js

@@ -0,0 +1,16 @@
+import React, {forwardRef} from 'react';
+import {View} from 'react-native';
+import * as ComponentUtils from '../../libs/ComponentUtils';
+
+const BaseForm = forwardRef((props, ref) => (
+    <View
+        accessibilityRole={ComponentUtils.ACCESSIBILITY_ROLE_FORM}
+        accessibilityAutoComplete="on"
+        ref={ref}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    />
+));
+
+BaseForm.displayName = 'BaseForm';
+export default BaseForm;

src/components/Form/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import BaseForm from './BaseForm';
+
+class Form extends React.Component {
+    componentDidMount() {
+        if (!this.form) {
+            return;
+        }
+
+        // Password Managers need these attributes to be able to identify the form elements properly.
+        this.form.setNativeProps({
+            method: 'post',
+            action: '/',
+        });
+    }
+
+    render() {
+        return (
+            <BaseForm
+                ref={el => this.form = el}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...this.props}
+            />
+        );
+    }
+}
+
+export default Form;

src/components/Form/index.native.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import BaseForm from './BaseForm';
+
+// eslint-disable-next-line react/jsx-props-no-spreading
+const Form = props => <BaseForm {...props} />;
+
+Form.displayName = 'Form';
+export default Form;

src/components/TextInputWithName/index.js

@@ -0,0 +1,40 @@
+import _ from 'underscore';
+import React from 'react';
+import {TextInput} from 'react-native';
+import textInputWithNamepropTypes from './textInputWithNamepropTypes';
+
+/**
+ * On web we need to set the native attribute name for accessiblity.
+ */
+class TextInputWithName extends React.Component {
+    componentDidMount() {
+        if (!this.textInput) {
+            return;
+        }
+        if (_.isFunction(this.props.forwardedRef)) {
+            this.props.forwardedRef(this.textInput);
+        }
+
+        if (this.props.name) {
+            this.textInput.setNativeProps({name: this.props.name});
+        }
+    }
+
+    render() {
+        return (
+            <TextInput
+                ref={el => this.textInput = el}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...this.props}
+            />
+        );
+    }
+}
+
+TextInputWithName.propTypes = textInputWithNamepropTypes.propTypes;
+TextInputWithName.defaultProps = textInputWithNamepropTypes.defaultProps;
+
+export default React.forwardRef((props, ref) => (
+    /* eslint-disable-next-line react/jsx-props-no-spreading */
+    <TextInputWithName {...props} forwardedRef={ref} />
+));

src/components/TextInputWithName/index.native.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {TextInput} from 'react-native';
+import textInputWithNamepropTypes from './textInputWithNamepropTypes';
+
+const TextInputWithName = props => (
+    <TextInput
+        ref={props.forwardedRef}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    />
+);
+
+TextInputWithName.propTypes = textInputWithNamepropTypes.propTypes;
+TextInputWithName.defaultProps = textInputWithNamepropTypes.defaultProps;
+TextInputWithName.displayName = 'TextInputWithName';
+
+export default React.forwardRef((props, ref) => (
+    /* eslint-disable-next-line react/jsx-props-no-spreading */
+    <TextInputWithName {...props} forwardedRef={ref} />
+));

src/components/TextInputWithName/textInputWithNamepropTypes.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /** Name attribute for the input */
+    name: PropTypes.string,
+
+    /** A ref to forward to the text input */
+    forwardedRef: PropTypes.func,
+};
+
+const defaultProps = {
+    name: '',
+    forwardedRef: () => {},
+};
+
+export default {
+    propTypes,
+    defaultProps,
+};

src/components/withToggleVisibilityView.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../styles/styles';
+import getComponentDisplayName from '../libs/getComponentDisplayName';
+
+const toggleVisibilityViewPropTypes = {
+    /** Whether the content is visible. */
+    isVisible: PropTypes.bool,
+};
+
+export default function (WrappedComponent) {
+    const WithToggleVisibilityView = props => (
+        <View style={!props.isVisible && styles.visuallyHidden}>
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                ref={props.forwardedRef}
+                isVisible={props.isVisible}
+            />
+        </View>
+    );
+
+    WithToggleVisibilityView.displayName = `WithToggleVisibilityView(${getComponentDisplayName(WrappedComponent)})`;
+    WithToggleVisibilityView.propTypes = {
+        forwardedRef: PropTypes.oneOfType([
+            PropTypes.func,
+            PropTypes.shape({current: PropTypes.instanceOf(React.Component)}),
+        ]),
+
+        /** Whether the content is visible. */
+        isVisible: PropTypes.bool,
+    };
+    WithToggleVisibilityView.defaultProps = {
+        forwardedRef: undefined,
+        isVisible: false,
+    };
+    return React.forwardRef((props, ref) => (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <WithToggleVisibilityView {...props} forwardedRef={ref} />
+    ));
+}
+
+export {
+    toggleVisibilityViewPropTypes,
+};

src/libs/ComponentUtils/index.js

@@ -0,0 +1,10 @@
+/**
+ * Web password field needs `current-password` as autocomplete type which is not supported on native
+ */
+const PASSWORD_AUTOCOMPLETE_TYPE = 'current-password';
+const ACCESSIBILITY_ROLE_FORM = 'form';
+
+export {
+    PASSWORD_AUTOCOMPLETE_TYPE,
+    ACCESSIBILITY_ROLE_FORM,
+};

src/libs/ComponentUtils/index.native.js

@@ -0,0 +1,7 @@
+const PASSWORD_AUTOCOMPLETE_TYPE = 'password';
+const ACCESSIBILITY_ROLE_FORM = 'none';
+
+export {
+    PASSWORD_AUTOCOMPLETE_TYPE,
+    ACCESSIBILITY_ROLE_FORM,
+};