Fix form accessibility 2/4

src/components/Form.js

@@ -1,6 +1,6 @@
 import lodashGet from 'lodash/get';
 import React from 'react';
-import {View, ScrollView} from 'react-native';
+import {ScrollView, StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
@@ -10,8 +10,10 @@ import * as FormActions from '../libs/actions/FormActions';
 import * as ErrorUtils from '../libs/ErrorUtils';
 import styles from '../styles/styles';
 import FormAlertWithSubmitButton from './FormAlertWithSubmitButton';
+import FormSubmit from './FormSubmit';
 import SafeAreaConsumer from './SafeAreaConsumer';
 import ScrollViewWithContext from './ScrollViewWithContext';
+import stylePropTypes from '../styles/stylePropTypes';
 
 const propTypes = {
     /** A unique Onyx key identifying the form */
@@ -67,6 +69,9 @@ const propTypes = {
      */
     scrollContextEnabled: PropTypes.bool,
 
+    /** Container styles */
+    style: stylePropTypes,
+
     ...withLocalizePropTypes,
 };
 
@@ -81,6 +86,7 @@ const defaultProps = {
     isSubmitActionDangerous: false,
     scrollToOverflowEnabled: false,
     scrollContextEnabled: false,
+    style: [],
 };
 
 class Form extends React.Component {
@@ -273,7 +279,7 @@ class Form extends React.Component {
 
     render() {
         const scrollViewContent = safeAreaPaddingBottomStyle => (
-            <View style={[this.props.style, safeAreaPaddingBottomStyle]}>
+            <FormSubmit style={StyleSheet.flatten([this.props.style, safeAreaPaddingBottomStyle])} onSubmit={this.submit}>
                 {this.childrenWrapperWithProps(this.props.children)}
                 {this.props.isSubmitButtonVisible && (
                 <FormAlertWithSubmitButton
@@ -298,9 +304,10 @@ class Form extends React.Component {
                     containerStyles={[styles.mh0, styles.mt5, styles.flex1]}
                     enabledWhenOffline={this.props.enabledWhenOffline}
                     isSubmitActionDangerous={this.props.isSubmitActionDangerous}
+                    disablePressOnEnter
                 />
                 )}
-            </View>
+            </FormSubmit>
         );
 
         return (

src/components/FormAlertWithSubmitButton.js

@@ -36,6 +36,9 @@ const propTypes = {
     /** Should the button be enabled when offline */
     enabledWhenOffline: PropTypes.bool,
 
+    /** Disable press on enter for submit button */
+    disablePressOnEnter: PropTypes.bool,
+
     /** Whether the form submit action is dangerous */
     isSubmitActionDangerous: PropTypes.bool,
 };
@@ -48,6 +51,7 @@ const defaultProps = {
     isLoading: false,
     onFixTheErrorsLinkPressed: () => {},
     enabledWhenOffline: false,
+    disablePressOnEnter: false,
     isSubmitActionDangerous: false,
 };
 
@@ -70,7 +74,7 @@ const FormAlertWithSubmitButton = props => (
         ) : (
             <Button
                 success
-                pressOnEnter
+                pressOnEnter={!props.disablePressOnEnter}
                 text={props.buttonText}
                 onPress={props.onSubmit}
                 isDisabled={props.isDisabled}

src/components/FormSubmit/formSubmitPropTypes.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import stylePropTypes from '../../styles/stylePropTypes';
+
+const propTypes = {
+    /* A function to execute when form is submitted with ENTER */
+    onSubmit: PropTypes.func.isRequired,
+
+    /** Children to wrap with FormSubmit. */
+    children: PropTypes.node.isRequired,
+
+    /** Container styles */
+    style: stylePropTypes,
+};
+
+const defaultProps = {
+    style: [],
+};
+
+export {propTypes, defaultProps};

src/components/FormSubmit/index.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import lodashGet from 'lodash/get';
+import {View} from 'react-native';
+import * as formSubmitPropTypes from './formSubmitPropTypes';
+
+// This is a wrapper component to handle the ENTER key press, and submit the form.
+class FormSubmit extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.submitForm = this.submitForm.bind(this);
+    }
+
+    /**
+     * Calls the submit callback when ENTER is pressed on a form element.
+     * @param {Object} event
+     */
+
+    submitForm(event) {
+        // ENTER is pressed with modifier key, do not submit the form
+        if (event.shiftKey || event.key !== 'Enter') {
+            return;
+        }
+
+        const tagName = lodashGet(event, 'target.tagName', '');
+
+        // ENTER is pressed on INPUT or SELECT element, call the submit callback.
+        if (tagName === 'INPUT' || tagName === 'SELECT') {
+            this.props.onSubmit();
+            return;
+        }
+
+        // Pressing Enter on TEXTAREA element adds a new line. When `dataset.submitOnEnter` prop is passed, call the submit callback.
+        if (tagName === 'TEXTAREA' && lodashGet(event, 'target.dataset.submitOnEnter', 'false') === 'true') {
+            this.props.onSubmit();
+            return;
+        }
+
+        // ENTER is pressed on checkbox element, call the submit callback.
+        if (lodashGet(event, 'target.role') === 'checkbox') {
+            this.props.onSubmit();
+        }
+    }
+
+    render() {
+        return (
+
+            // React-native-web prevents event bubbling on TextInput for key presses
+            // https://github.com/necolas/react-native-web/blob/fa47f80d34ee6cde2536b2a2241e326f84b633c4/packages/react-native-web/src/exports/TextInput/index.js#L272
+            // Thus use capture phase.
+            <View onKeyDownCapture={this.submitForm} style={this.props.style}>{this.props.children}</View>
+        );
+    }
+}
+
+FormSubmit.propTypes = formSubmitPropTypes.propTypes;
+FormSubmit.defaultProps = formSubmitPropTypes.defaultProps;
+
+export default FormSubmit;

src/components/FormSubmit/index.native.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import {View} from 'react-native';
+import * as formSubmitPropTypes from './formSubmitPropTypes';
+
+const FormSubmit = props => <View style={props.style}>{props.children}</View>;
+
+FormSubmit.propTypes = formSubmitPropTypes.propTypes;
+FormSubmit.defaultProps = formSubmitPropTypes.defaultProps;
+FormSubmit.displayName = 'FormSubmit';
+
+export default FormSubmit;

src/components/TextInput/BaseTextInput.js

@@ -301,6 +301,11 @@ class BaseTextInput extends Component {
                                         keyboardType={getSecureEntryKeyboardType(this.props.keyboardType, this.props.secureTextEntry, this.state.passwordHidden)}
                                         value={this.state.value}
                                         selection={this.state.selection}
+
+                                        // FormSubmit Enter key handler does not have access to direct props.
+                                        // `dataset.submitOnEnter` is used to indicate that pressing Enter on this input should call the submit callback.
+                                        dataSet={{submitOnEnter: this.props.multiline && this.props.submitOnEnter}}
+
                                     />
                                     {this.props.secureTextEntry && (
                                         <Checkbox

src/components/TextInput/baseTextInputPropTypes.js

@@ -70,6 +70,9 @@ const propTypes = {
 
     /** Whether we should wait before focusing the TextInput, useful when using transitions  */
     shouldDelayFocus: PropTypes.bool,
+
+    /** Indicate whether pressing Enter on multiline input is allowed to submit the form. */
+    submitOnEnter: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -101,6 +104,7 @@ const defaultProps = {
     prefixCharacter: '',
     onInputChange: () => {},
     shouldDelayFocus: false,
+    submitOnEnter: false,
 };
 
 export {propTypes, defaultProps};

src/pages/SetPasswordPage.js

@@ -19,6 +19,7 @@ import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import compose from '../libs/compose';
 import NewPasswordForm from './settings/NewPasswordForm';
 import FormAlertWithSubmitButton from '../components/FormAlertWithSubmitButton';
+import FormSubmit from '../components/FormSubmit';
 import * as ErrorUtils from '../libs/ErrorUtils';
 import OfflineIndicator from '../components/OfflineIndicator';
 
@@ -99,26 +100,26 @@ class SetPasswordPage extends Component {
                     shouldShowWelcomeText
                     welcomeText={this.props.translate('setPasswordPage.passwordFormTitle')}
                 >
-                    <View style={[styles.mb4]}>
-                        {/* The prop onSubmitEditing is required, but it needs to stay as a no-op because the form is submitted and validated from the button below */}
-                        <NewPasswordForm
-                            onSubmitEditing={() => {}}
-                            password={this.state.password}
-                            updatePassword={password => this.setState({password})}
-                            updateIsFormValid={isValid => this.setState({isFormValid: isValid})}
-                        />
-                    </View>
-                    <View>
-                        <FormAlertWithSubmitButton
-                            buttonText={buttonText}
-                            isLoading={this.props.account.isLoading}
-                            onSubmit={this.validateAndSubmitForm}
-                            containerStyles={[styles.mb2, styles.mh0]}
-                            message={error}
-                            isAlertVisible={!_.isEmpty(error)}
-                            isDisabled={!this.state.isFormValid}
-                        />
-                    </View>
+                    <FormSubmit onSubmit={this.validateAndSubmitForm}>
+                        <View style={[styles.mb4]}>
+                            <NewPasswordForm
+                                password={this.state.password}
+                                updatePassword={password => this.setState({password})}
+                                updateIsFormValid={isValid => this.setState({isFormValid: isValid})}
+                            />
+                        </View>
+                        <View>
+                            <FormAlertWithSubmitButton
+                                buttonText={buttonText}
+                                isLoading={this.props.account.isLoading}
+                                onSubmit={this.validateAndSubmitForm}
+                                containerStyles={[styles.mb2, styles.mh0]}
+                                message={error}
+                                isAlertVisible={!_.isEmpty(error)}
+                                isDisabled={!this.state.isFormValid}
+                            />
+                        </View>
+                    </FormSubmit>
                     <OfflineIndicator containerStyles={[styles.mv1]} />
                 </SignInPageLayout>
             </SafeAreaView>

src/pages/settings/NewPasswordForm.js

@@ -20,8 +20,6 @@ const propTypes = {
     /** Callback function called with boolean value for if the password form is valid  */
     updateIsFormValid: PropTypes.func.isRequired,
 
-    /** Callback function for when form is submitted  */
-    onSubmitEditing: PropTypes.func.isRequired,
     ...withLocalizePropTypes,
 };
 
@@ -78,7 +76,6 @@ class NewPasswordForm extends React.Component {
                     value={this.props.password}
                     onChangeText={password => this.props.updatePassword(password)}
                     onBlur={() => this.onBlurNewPassword()}
-                    onSubmitEditing={() => this.props.onSubmitEditing()}
                 />
                 <Text
                     style={[

src/pages/workspace/WorkspaceInvitePage.js

@@ -14,6 +14,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import * as Policy from '../../libs/actions/Policy';
 import TextInput from '../../components/TextInput';
 import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButton';
+import FormSubmit from '../../components/FormSubmit';
 import OptionsSelector from '../../components/OptionsSelector';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import CONST from '../../CONST';
@@ -301,7 +302,7 @@ class WorkspaceInvitePage extends React.Component {
                         shouldShow={_.isEmpty(this.props.policy)}
                         onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
                     >
-                        <>
+                        <FormSubmit style={[styles.flex1]} onSubmit={this.inviteUser}>
                             <HeaderWithCloseButton
                                 title={this.props.translate('workspace.invite.invitePeople')}
                                 subtitle={policyName}
@@ -354,6 +355,7 @@ class WorkspaceInvitePage extends React.Component {
                                     message={this.props.policy.alertMessage}
                                     containerStyles={[styles.flexReset, styles.mb0, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto]}
                                     enabledWhenOffline
+                                    disablePressOnEnter
                                 />
                                 <Pressable
                                     onPress={this.openPrivacyURL}
@@ -368,7 +370,7 @@ class WorkspaceInvitePage extends React.Component {
                                     </View>
                                 </Pressable>
                             </View>
-                        </>
+                        </FormSubmit>
                     </FullPageNotFoundView>
                 )}
             </ScreenWrapper>