Merge pull request #27670 from software-mansion-labs/@kosmydel/add-fo…

…cus-trap-2

Add focus trap to the RHP (v2)

package.json

@@ -100,6 +100,7 @@
     "domhandler": "^4.3.0",
     "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#e9daa1c475ba047fd13ad50079cd64f730e58c29",
     "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/ConfirmModal.js

@@ -98,6 +98,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 @@
+/*
+ * The FocusTrap is only used on web and desktop
+ */
+import FocusTrapViewProps from './types';
+
+function FocusTrapView({children}: FocusTrapViewProps) {
+    return children;
+}
+
+FocusTrapView.displayName = 'FocusTrapView';
+
+export default FocusTrapView;

src/components/FocusTrapView/index.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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 FocusTrapViewProps from './types';
+
+function FocusTrapView({isEnabled = true, isActive = true, shouldEnableAutoFocus = false, ...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,
+            }}
+        >
+            <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,21 @@
+import {ViewProps} from 'react-native';
+import 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;
+} & 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 StatusBar from '@libs/StatusBar';
 import * as StyleUtils from '@styles/StyleUtils';
 import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import BaseModal from './BaseModal';
 import 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 [previousStatusBarColor, setPreviousStatusBarColor] = useState<string>();
 
@@ -48,7 +51,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/index.js

@@ -1,10 +1,11 @@
-import {useNavigation} from '@react-navigation/native';
+import {useIsFocused, useNavigation} from '@react-navigation/native';
 import lodashGet from 'lodash/get';
 import React, {useEffect, useRef, useState} from 'react';
 import {Keyboard, PanResponder, View} from 'react-native';
 import {PickerAvoidingView} from 'react-native-picker-select';
 import _ from 'underscore';
 import CustomDevMenu from '@components/CustomDevMenu';
+import FocusTrapView from '@components/FocusTrapView';
 import HeaderGap from '@components/HeaderGap';
 import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import OfflineIndicator from '@components/OfflineIndicator';
@@ -39,6 +40,8 @@ const ScreenWrapper = React.forwardRef(
             shouldDismissKeyboardBeforeClose,
             onEntryTransitionEnd,
             testID,
+            shouldDisableFocusTrap,
+            shouldEnableAutoFocus,
         },
         ref,
     ) => {
@@ -48,6 +51,7 @@ const ScreenWrapper = React.forwardRef(
         const {isDevelopment} = useEnvironment();
         const {isOffline} = useNetwork();
         const navigation = useNavigation();
+        const isFocused = useIsFocused();
         const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false);
         const maxHeight = shouldEnableMaxHeight ? windowHeight : undefined;
         const minHeight = shouldEnableMinHeight ? initialHeight : undefined;
@@ -146,20 +150,27 @@ const ScreenWrapper = React.forwardRef(
                                         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.
-                                            _.isFunction(children)
-                                                ? children({
-                                                      insets,
-                                                      safeAreaPaddingBottomStyle,
-                                                      didScreenTransitionEnd,
-                                                  })
-                                                : children
-                                        }
-                                        {isSmallScreenWidth && shouldShowOfflineIndicator && <OfflineIndicator style={offlineIndicatorStyle} />}
+                                        <FocusTrapView
+                                            style={[styles.flex1, styles.noSelect]}
+                                            isEnabled={!shouldDisableFocusTrap}
+                                            shouldEnableAutoFocus={shouldEnableAutoFocus}
+                                            isActive={isFocused}
+                                        >
+                                            <HeaderGap styles={headerGapStyles} />
+                                            {isDevelopment && <TestToolsModal />}
+                                            {isDevelopment && <CustomDevMenu />}
+                                            {
+                                                // If props.children is a function, call it to provide the insets to the children.
+                                                _.isFunction(children)
+                                                    ? children({
+                                                          insets,
+                                                          safeAreaPaddingBottomStyle,
+                                                          didScreenTransitionEnd,
+                                                      })
+                                                    : children
+                                            }
+                                            {isSmallScreenWidth && shouldShowOfflineIndicator && <OfflineIndicator style={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

@@ -148,7 +148,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

@@ -163,7 +163,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/home/ReportScreen.js

@@ -376,6 +376,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/SplitBillDetailsPage.js

@@ -109,7 +109,10 @@ function SplitBillDetailsPage(props) {
     );
 
     return (
-        <ScreenWrapper testID={SplitBillDetailsPage.displayName}>
+        <ScreenWrapper
+            testID={SplitBillDetailsPage.displayName}
+            shouldEnableAutoFocus
+        >
             <FullPageNotFoundView shouldShow={_.isEmpty(reportID) || _.isEmpty(reportAction) || _.isEmpty(props.transaction)}>
                 <HeaderWithBackButton title={translate('common.details')} />
                 <View style={[styles.containerWithSpaceBetween, styles.pointerEventsBoxNone]}>