Add focus trap to the RHP

package.json

@@ -87,6 +87,7 @@
     "domhandler": "^4.3.0",
     "expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#4cc5f72b69bd77d2c8052a3c167d039e502a2796",
     "fbjs": "^3.0.2",
+    "focus-trap-react": "^10.2.1",
     "htmlparser2": "^7.2.0",
     "jest-when": "^3.5.2",
     "localforage": "^1.10.0",

src/components/FocusTrapView/index.js

@@ -0,0 +1,66 @@
+/*
+ * The FocusTrap is only used on web and desktop
+ */
+import React, {useEffect, useRef} from 'react';
+import FocusTrap from 'focus-trap-react';
+import {View} from 'react-native';
+import {PropTypes} from 'prop-types';
+import {useIsFocused} from '@react-navigation/native';
+
+const propTypes = {
+    /** Whether to enable the FocusTrap */
+    enabled: PropTypes.bool,
+
+    /** Whether to disable auto focus
+     *  It is used when the component inside the FocusTrap have their own auto focus logic
+     */
+    shouldDisableAutoFocus: PropTypes.bool,
+};
+
+const defaultProps = {
+    enabled: true,
+    shouldDisableAutoFocus: false,
+};
+
+function FocusTrapView({enabled, shouldDisableAutoFocus, ...props}) {
+    const isFocused = useIsFocused();
+
+    /**
+     * Focus trap always needs a focusable element.
+     * In case that we don't have any focusable elements in the modal,
+     * the FocusTrap will use fallback View element using this ref.
+     */
+    const ref = useRef(null);
+
+    /**
+     * We have to set the 'tabindex' attribute to 0 to make the View focusable.
+     * Currently, it is not possible to set this through props.
+     * After the upgrade of 'react-native-web' to version 0.19 we can use 'tabIndex={0}' prop instead.
+     */
+    useEffect(() => {
+        ref.current.setAttribute('tabindex', '0');
+    }, []);
+
+    return (
+        <FocusTrap
+            active={enabled && isFocused}
+            focusTrapOptions={{
+                initialFocus: () => !shouldDisableAutoFocus && ref.current,
+                fallbackFocus: () => ref.current,
+                clickOutsideDeactivates: true,
+            }}
+        >
+            <View
+                ref={ref}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+            />
+        </FocusTrap>
+    );
+}
+
+FocusTrapView.displayName = 'FocusTrapView';
+FocusTrapView.propTypes = propTypes;
+FocusTrapView.defaultProps = defaultProps;
+
+export default FocusTrapView;

src/components/FocusTrapView/index.native.js

@@ -0,0 +1,18 @@
+/*
+ * The FocusTrap is only used on web and desktop
+ */
+import React from 'react';
+import {View} from 'react-native';
+import _ from 'underscore';
+
+function FocusTrapView(props) {
+    const viewProps = _.omit(props, ['enabled', 'shouldDisableAutoFocus']);
+    return (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <View {...viewProps} />
+    );
+}
+
+FocusTrapView.displayName = 'FocusTrapView';
+
+export default FocusTrapView;

src/components/ScreenWrapper/index.js

@@ -3,6 +3,7 @@ import React from 'react';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import {PickerAvoidingView} from 'react-native-picker-select';
+import FocusTrapView from '../FocusTrapView';
 import KeyboardAvoidingView from '../KeyboardAvoidingView';
 import CONST from '../../CONST';
 import styles from '../../styles/styles';
@@ -124,20 +125,26 @@ class ScreenWrapper extends React.Component {
                                         style={styles.flex1}
                                         enabled={this.props.shouldEnablePickerAvoiding}
                                     >
-                                        <HeaderGap />
-                                        {this.props.environment === CONST.ENVIRONMENT.DEV && <TestToolsModal />}
-                                        {this.props.environment === CONST.ENVIRONMENT.DEV && <CustomDevMenu />}
-                                        {
-                                            // If props.children is a function, call it to provide the insets to the children.
-                                            _.isFunction(this.props.children)
-                                                ? this.props.children({
-                                                      insets,
-                                                      safeAreaPaddingBottomStyle,
-                                                      didScreenTransitionEnd: this.state.didScreenTransitionEnd,
-                                                  })
-                                                : this.props.children
-                                        }
-                                        {this.props.isSmallScreenWidth && this.props.shouldShowOfflineIndicator && <OfflineIndicator style={this.props.offlineIndicatorStyle} />}
+                                        <FocusTrapView
+                                            style={styles.flex1}
+                                            enabled={!this.props.shouldDisableFocusTrap}
+                                            shouldDisableAutoFocus={this.props.shouldDisableAutoFocus}
+                                        >
+                                            <HeaderGap />
+                                            {this.props.environment === CONST.ENVIRONMENT.DEV && <TestToolsModal />}
+                                            {this.props.environment === CONST.ENVIRONMENT.DEV && <CustomDevMenu />}
+                                            {
+                                                // If props.children is a function, call it to provide the insets to the children.
+                                                _.isFunction(this.props.children)
+                                                    ? this.props.children({
+                                                          insets,
+                                                          safeAreaPaddingBottomStyle,
+                                                          didScreenTransitionEnd: this.state.didScreenTransitionEnd,
+                                                      })
+                                                    : this.props.children
+                                            }
+                                            {this.props.isSmallScreenWidth && this.props.shouldShowOfflineIndicator && <OfflineIndicator style={this.props.offlineIndicatorStyle} />}
+                                        </FocusTrapView>
                                     </PickerAvoidingView>
                                 </KeyboardAvoidingView>
                             </View>

src/components/ScreenWrapper/propTypes.js

@@ -45,6 +45,12 @@ const propTypes = {
 
     /** Styles for the offline indicator */
     offlineIndicatorStyle: stylePropTypes,
+
+    /** Whether to disable the focus trap */
+    shouldDisableFocusTrap: PropTypes.bool,
+
+    /** Whether to disable auto focus of the focus trap */
+    shouldDisableAutoFocus: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -59,6 +65,8 @@ const defaultProps = {
     shouldEnablePickerAvoiding: true,
     shouldShowOfflineIndicator: true,
     offlineIndicatorStyle: [],
+    shouldDisableFocusTrap: false,
+    shouldDisableAutoFocus: false,
 };
 
 export {propTypes, defaultProps};

src/pages/SearchPage.js

@@ -169,7 +169,10 @@ class SearchPage extends Component {
         );
 
         return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                shouldDisableAutoFocus
+            >
                 {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                     <>
                         <HeaderWithBackButton title={this.props.translate('common.search')} />

src/pages/home/ReportScreen.js

@@ -290,6 +290,7 @@ class ReportScreen extends React.Component {
                 <ScreenWrapper
                     style={screenWrapperStyle}
                     shouldEnableKeyboardAvoidingView={isTopMostReportId}
+                    shouldDisableFocusTrap
                 >
                     <FullPageNotFoundView
                         shouldShow={(!this.props.report.reportID && !this.props.report.isLoadingReportActions && !isLoading) || shouldHideReport}

src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js

@@ -43,6 +43,7 @@ function BaseSidebarScreen(props) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             style={[styles.sidebar, Browser.isMobile() ? styles.userSelectNone : {}]}
+            shouldDisableFocusTrap
         >
             {({insets}) => (
                 <>