Add focus trap to the RHP (v3)

package.json

@@ -103,6 +103,7 @@
     "expo": "^49.0.0",
     "expo-image": "1.8.1",
     "fbjs": "^3.0.2",
+    "focus-trap-react": "^10.2.3",
     "htmlparser2": "^7.2.0",
     "idb-keyval": "^6.2.1",
     "jest-expo": "^49.0.0",

src/components/ConfirmModal.js

@@ -99,6 +99,7 @@ function ConfirmModal(props) {
             shouldSetModalVisibility={props.shouldSetModalVisibility}
             onModalHide={props.onModalHide}
             type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
+            shouldEnableFocusTrap
         >
             <ConfirmContent
                 title={props.title}

src/components/FocusTrapView/index.native.tsx

@@ -0,0 +1,12 @@
+import type FocusTrapViewProps from './types';
+
+/*
+ * The FocusTrap is only used on web and desktop
+ */
+function FocusTrapView({children}: FocusTrapViewProps) {
+    return children;
+}
+
+FocusTrapView.displayName = 'FocusTrapView';
+
+export default FocusTrapView;

src/components/FocusTrapView/index.tsx

@@ -0,0 +1,43 @@
+/*
+ * The FocusTrap is only used on web and desktop
+ */
+import FocusTrap from 'focus-trap-react';
+import React, {useRef} from 'react';
+import {View} from 'react-native';
+import viewRef from '@src/types/utils/viewRef';
+import type FocusTrapViewProps from './types';
+
+function FocusTrapView({isEnabled = true, isActive = true, shouldEnableAutoFocus = false, shouldReturnFocusOnDeactivate = true, ...props}: FocusTrapViewProps) {
+    /**
+     * 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<HTMLDivElement>(null);
+
+    return isEnabled ? (
+        <FocusTrap
+            active={isActive}
+            focusTrapOptions={{
+                initialFocus: () => (shouldEnableAutoFocus && ref.current) ?? false,
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                fallbackFocus: () => ref.current!,
+                clickOutsideDeactivates: true,
+                returnFocusOnDeactivate: shouldReturnFocusOnDeactivate,
+            }}
+        >
+            <View
+                ref={viewRef(ref)}
+                tabIndex={0}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+            />
+        </FocusTrap>
+    ) : (
+        props.children
+    );
+}
+
+FocusTrapView.displayName = 'FocusTrapView';
+
+export default FocusTrapView;

src/components/FocusTrapView/types.ts

@@ -0,0 +1,27 @@
+import type {ViewProps} from 'react-native';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
+
+type FocusTrapViewProps = ChildrenProps & {
+    /**
+     *  Whether to enable the FocusTrap.
+     *  If the FocusTrap is disabled, we just pass the children through.
+     */
+    isEnabled?: boolean;
+
+    /**
+     *  Whether to disable auto focus
+     *  It is used when the component inside the FocusTrap have their own auto focus logic
+     */
+    shouldEnableAutoFocus?: boolean;
+
+    /** Whether the FocusTrap is active (listening for events) */
+    isActive?: boolean;
+
+    /**
+     * Whether the FocusTrap should return focus to the last focused element when it is deactivated.
+     * The default value is True, but sometimes we have to disable it, as it causes unexpected behavior.
+     */
+    shouldReturnFocusOnDeactivate?: boolean;
+} & ViewProps;
+
+export default FocusTrapViewProps;

src/components/Modal/index.tsx

@@ -1,13 +1,16 @@
 import React, {useState} from 'react';
+import FocusTrapView from '@components/FocusTrapView';
 import withWindowDimensions from '@components/withWindowDimensions';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import StatusBar from '@libs/StatusBar';
 import CONST from '@src/CONST';
 import BaseModal from './BaseModal';
 import type BaseModalProps from './types';
 
-function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = () => {}, children, ...rest}: BaseModalProps) {
+function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = () => {}, children, shouldEnableFocusTrap = false, ...rest}: BaseModalProps) {
+    const styles = useThemeStyles();
     const theme = useTheme();
     const StyleUtils = useStyleUtils();
     const [previousStatusBarColor, setPreviousStatusBarColor] = useState<string>();
@@ -49,7 +52,13 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
             fullscreen={fullscreen}
             type={type}
         >
-            {children}
+            <FocusTrapView
+                isEnabled={shouldEnableFocusTrap}
+                isActive
+                style={styles.noSelect}
+            >
+                {children}
+            </FocusTrapView>
         </BaseModal>
     );
 }

src/components/Modal/modalPropTypes.js

@@ -66,6 +66,9 @@ const propTypes = {
      * */
     hideModalContentWhileAnimating: PropTypes.bool,
 
+    /** Should the modal use custom focus trap logic */
+    shouldEnableFocusTrap: PropTypes.bool,
+
     ...windowDimensionsPropTypes,
 };
 
@@ -84,6 +87,7 @@ const defaultProps = {
     statusBarTranslucent: true,
     avoidKeyboard: false,
     hideModalContentWhileAnimating: false,
+    shouldEnableFocusTrap: false,
 };
 
 export {propTypes, defaultProps};

src/components/Modal/types.ts

@@ -61,6 +61,9 @@ type BaseModalProps = WindowDimensionsProps &
          * See: https://github.com/react-native-modal/react-native-modal/pull/116
          * */
         hideModalContentWhileAnimating?: boolean;
+
+        /** Whether the modal should use focus trap */
+        shouldEnableFocusTrap?: boolean;
     };
 
 export default BaseModalProps;

src/components/ScreenWrapper.tsx

@@ -1,4 +1,4 @@
-import {useNavigation} from '@react-navigation/native';
+import {useIsFocused, useNavigation} from '@react-navigation/native';
 import type {StackNavigationProp} from '@react-navigation/stack';
 import type {ForwardedRef, ReactNode} from 'react';
 import React, {forwardRef, useEffect, useRef, useState} from 'react';
@@ -17,6 +17,7 @@ import type {RootStackParamList} from '@libs/Navigation/types';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
 import CustomDevMenu from './CustomDevMenu';
+import FocusTrapView from './FocusTrapView';
 import HeaderGap from './HeaderGap';
 import KeyboardAvoidingView from './KeyboardAvoidingView';
 import OfflineIndicator from './OfflineIndicator';
@@ -86,6 +87,15 @@ type ScreenWrapperProps = {
      * This is required because transitionEnd event doesn't trigger in the testing environment.
      */
     navigation?: StackNavigationProp<RootStackParamList>;
+
+    /** Whether to disable the focus trap */
+    shouldDisableFocusTrap?: boolean;
+
+    /** Whether to disable auto focus of the focus trap */
+    shouldEnableAutoFocus?: boolean;
+
+    /** Whether to return focus on deactivate of the focus trap */
+    shouldReturnFocusOnDeactivate?: boolean;
 };
 
 function ScreenWrapper(
@@ -106,6 +116,9 @@ function ScreenWrapper(
         onEntryTransitionEnd,
         testID,
         navigation: navigationProp,
+        shouldDisableFocusTrap = false,
+        shouldEnableAutoFocus = false,
+        shouldReturnFocusOnDeactivate = true,
     }: ScreenWrapperProps,
     ref: ForwardedRef<View>,
 ) {
@@ -124,6 +137,7 @@ function ScreenWrapper(
     const keyboardState = useKeyboardState();
     const {isDevelopment} = useEnvironment();
     const {isOffline} = useNetwork();
+    const isFocused = useIsFocused();
     const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false);
     const maxHeight = shouldEnableMaxHeight ? windowHeight : undefined;
     const minHeight = shouldEnableMinHeight && !Browser.isSafari() ? initialHeight : undefined;
@@ -224,20 +238,28 @@ function ScreenWrapper(
                                     style={styles.flex1}
                                     enabled={shouldEnablePickerAvoiding}
                                 >
-                                    <HeaderGap styles={headerGapStyles} />
-                                    {isDevelopment && <TestToolsModal />}
-                                    {isDevelopment && <CustomDevMenu />}
-                                    {
-                                        // If props.children is a function, call it to provide the insets to the children.
-                                        typeof children === 'function'
-                                            ? children({
-                                                  insets,
-                                                  safeAreaPaddingBottomStyle,
-                                                  didScreenTransitionEnd,
-                                              })
-                                            : children
-                                    }
-                                    {isSmallScreenWidth && shouldShowOfflineIndicator && <OfflineIndicator style={offlineIndicatorStyle} />}
+                                    <FocusTrapView
+                                        style={[styles.flex1, styles.noSelect]}
+                                        isEnabled={!shouldDisableFocusTrap}
+                                        shouldEnableAutoFocus={shouldEnableAutoFocus}
+                                        shouldReturnFocusOnDeactivate={shouldReturnFocusOnDeactivate}
+                                        isActive={isFocused}
+                                    >
+                                        <HeaderGap styles={headerGapStyles} />
+                                        {isDevelopment && <TestToolsModal />}
+                                        {isDevelopment && <CustomDevMenu />}
+                                        {
+                                            // If props.children is a function, call it to provide the insets to the children.
+                                            typeof children === 'function'
+                                                ? children({
+                                                      insets,
+                                                      safeAreaPaddingBottomStyle,
+                                                      didScreenTransitionEnd,
+                                                  })
+                                                : children
+                                        }
+                                        {isSmallScreenWidth && shouldShowOfflineIndicator && <OfflineIndicator style={offlineIndicatorStyle} />}
+                                    </FocusTrapView>
                                 </PickerAvoidingView>
                             </KeyboardAvoidingView>
                         </View>

src/pages/ProfilePage.js

@@ -144,7 +144,10 @@ function ProfilePage(props) {
     }, [accountID, hasMinimumDetails]);
 
     return (
-        <ScreenWrapper testID={ProfilePage.displayName}>
+        <ScreenWrapper
+            testID={ProfilePage.displayName}
+            shouldEnableAutoFocus
+        >
             <HeaderWithBackButton
                 title={props.translate('common.profile')}
                 onBackButtonPress={() => Navigation.goBack(navigateBackTo)}

src/pages/ReportDetailsPage.js

@@ -178,7 +178,10 @@ function ReportDetailsPage(props) {
     ) : null;
 
     return (
-        <ScreenWrapper testID={ReportDetailsPage.displayName}>
+        <ScreenWrapper
+            testID={ReportDetailsPage.displayName}
+            shouldEnableAutoFocus
+        >
             <FullPageNotFoundView shouldShow={_.isEmpty(props.report)}>
                 <HeaderWithBackButton
                     title={props.translate('common.details')}

src/pages/SearchPage.js

@@ -165,6 +165,7 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) {
             includeSafeAreaPaddingBottom={false}
             testID={SearchPage.displayName}
             onEntryTransitionEnd={updateOptions}
+            shouldReturnFocusOnDeactivate={false}
         >
             {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                 <>

src/pages/home/ReportScreen.js

@@ -448,6 +448,7 @@ function ReportScreen({
                     style={screenWrapperStyle}
                     shouldEnableKeyboardAvoidingView={isTopMostReportId}
                     testID={ReportScreen.displayName}
+                    shouldDisableFocusTrap
                 >
                     <FullPageNotFoundView
                         shouldShow={shouldShowNotFoundPage}

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

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

src/pages/iou/IOUCurrencySelection.js

@@ -156,6 +156,7 @@ function IOUCurrencySelection(props) {
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => optionsSelectorRef.current && optionsSelectorRef.current.focus()}
             testID={IOUCurrencySelection.displayName}
+            shouldReturnFocusOnDeactivate={false}
         >
             {({didScreenTransitionEnd}) => (
                 <>