Merge pull request #24316 from kosmydel/@swm/add-focus-trap

Add focus trap to the RHP

package.json

@@ -89,6 +89,7 @@
     "domhandler": "^4.3.0",
     "expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#35bff866a8d345b460ea6256f0a0f0a8a7f81086",
     "fbjs": "^3.0.2",
+    "focus-trap-react": "^10.2.1",
     "htmlparser2": "^7.2.0",
     "idb-keyval": "^6.2.1",
     "jest-when": "^3.5.2",

src/components/FocusTrapView/index.js

@@ -0,0 +1,75 @@
+/*
+ * 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 = {
+    /** Children to wrap with FocusTrap */
+    children: PropTypes.node.isRequired,
+
+    /** 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
+     */
+    shouldEnableAutoFocus: PropTypes.bool,
+};
+
+const defaultProps = {
+    enabled: true,
+    shouldEnableAutoFocus: false,
+};
+
+function FocusTrapView({enabled, shouldEnableAutoFocus, ...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(() => {
+        if (!ref.current) {
+            return;
+        }
+        ref.current.setAttribute('tabindex', '0');
+    }, []);
+
+    return enabled ? (
+        <FocusTrap
+            active={isFocused}
+            focusTrapOptions={{
+                initialFocus: () => shouldEnableAutoFocus && ref.current,
+                fallbackFocus: () => ref.current,
+                clickOutsideDeactivates: true,
+            }}
+        >
+            <View
+                ref={ref}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+            />
+        </FocusTrap>
+    ) : (
+        props.children
+    );
+}
+
+FocusTrapView.displayName = 'FocusTrapView';
+FocusTrapView.propTypes = propTypes;
+FocusTrapView.defaultProps = defaultProps;
+
+export default FocusTrapView;

src/components/FocusTrapView/index.native.js

@@ -0,0 +1,11 @@
+/*
+ * The FocusTrap is only used on web and desktop
+ */
+
+function FocusTrapView({children}) {
+    return children;
+}
+
+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 styles={this.props.headerGapStyles} />
-                                        {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, styles.noSelect]}
+                                            enabled={!this.props.shouldDisableFocusTrap}
+                                            shouldEnableAutoFocus={this.props.shouldEnableAutoFocus}
+                                        >
+                                            <HeaderGap styles={this.props.headerGapStyles} />
+                                            {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

@@ -48,6 +48,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 */
+    shouldEnableAutoFocus: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -63,6 +69,8 @@ const defaultProps = {
     shouldShowOfflineIndicator: true,
     offlineIndicatorStyle: [],
     headerGapStyles: [],
+    shouldDisableFocusTrap: false,
+    shouldEnableAutoFocus: false,
 };
 
 export {propTypes, defaultProps};

src/pages/ProfilePage.js

@@ -141,7 +141,7 @@ function ProfilePage(props) {
     const navigateBackTo = lodashGet(props.route, 'params.backTo', '');
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper shouldEnableAutoFocus>
             <HeaderWithBackButton
                 title={props.translate('common.profile')}
                 onBackButtonPress={() => Navigation.goBack(navigateBackTo)}

src/pages/home/ReportScreen.js

@@ -298,6 +298,7 @@ function ReportScreen({
             <ScreenWrapper
                 style={screenWrapperStyle}
                 shouldEnableKeyboardAvoidingView={isTopMostReportId}
+                shouldDisableFocusTrap
             >
                 <FullPageNotFoundView
                     shouldShow={(!report.reportID && !report.isLoadingReportActions && !isLoading) || shouldHideReport}

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

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