Add focus trap

package.json

@@ -106,6 +106,7 @@
     "expo-av": "~13.10.4",
     "expo-image": "1.11.0",
     "expo-image-manipulator": "11.8.0",
+    "focus-trap-react": "^10.2.3",
     "htmlparser2": "^7.2.0",
     "idb-keyval": "^6.2.1",
     "jest-expo": "50.0.1",
@@ -248,8 +249,8 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^10.1.0",
     "concurrently": "^8.2.2",
+    "copy-webpack-plugin": "^10.1.0",
     "css-loader": "^6.7.2",
     "diff-so-fancy": "^1.3.0",
     "dotenv": "^16.0.3",

src/components/FocusTrap/BOTTOM_TAB_SCREENS.ts

@@ -0,0 +1,5 @@
+import SCREENS from '@src/SCREENS';
+
+const BOTTOM_TAB_SCREENS: string[] = [SCREENS.HOME, SCREENS.SETTINGS.ROOT];
+
+export default BOTTOM_TAB_SCREENS;

src/components/FocusTrap/FocusTrapForModal/FocusTrapForModalProps.ts

@@ -0,0 +1,6 @@
+type FocusTrapForModalProps = {
+    children: React.ReactNode;
+    active: boolean;
+};
+
+export default FocusTrapForModalProps;

src/components/FocusTrap/FocusTrapForModal/index.tsx

@@ -0,0 +1,9 @@
+import type FocusTrapForModalProps from './FocusTrapForModalProps';
+
+function FocusTrapForModal({children}: FocusTrapForModalProps) {
+    return children;
+}
+
+FocusTrapForModal.displayName = 'FocusTrapForModal';
+
+export default FocusTrapForModal;

src/components/FocusTrap/FocusTrapForModal/index.web.tsx

@@ -0,0 +1,23 @@
+import FocusTrapOriginal from 'focus-trap-react';
+import React from 'react';
+import sharedTrapStack from '@components/FocusTrap/sharedTrapStack';
+import type FocusTrapForModalProps from './FocusTrapForModalProps';
+
+function FocusTrapForModal({children, active}: FocusTrapForModalProps) {
+    return (
+        <FocusTrapOriginal
+            active={active}
+            focusTrapOptions={{
+                trapStack: sharedTrapStack,
+                allowOutsideClick: true,
+                fallbackFocus: document.body,
+            }}
+        >
+            {children}
+        </FocusTrapOriginal>
+    );
+}
+
+FocusTrapForModal.displayName = 'FocusTrapForModal';
+
+export default FocusTrapForModal;

src/components/FocusTrap/FocusTrapForScreen/FocusTrapProps.ts

@@ -0,0 +1,5 @@
+type FocusTrapForScreenProps = {
+    children: React.ReactNode;
+};
+
+export default FocusTrapForScreenProps;

src/components/FocusTrap/FocusTrapForScreen/index.tsx

@@ -0,0 +1,9 @@
+import type FocusTrapProps from './FocusTrapProps';
+
+function FocusTrapView({children}: FocusTrapProps) {
+    return children;
+}
+
+FocusTrapView.displayName = 'FocusTrapView';
+
+export default FocusTrapView;

src/components/FocusTrap/FocusTrapForScreen/index.web.tsx

@@ -0,0 +1,68 @@
+import {useFocusEffect, useIsFocused, useRoute} from '@react-navigation/native';
+import FocusTrapOriginal from 'focus-trap-react';
+import React, {useMemo, useRef} from 'react';
+import BOTTOM_TAB_SCREENS from '@components/FocusTrap/BOTTOM_TAB_SCREENS';
+import SCREENS_WITH_AUTOFOCUS from '@components/FocusTrap/SCREENS_WITH_AUTOFOCUS';
+import sharedTrapStack from '@components/FocusTrap/sharedTrapStack';
+import WIDE_LAYOUT_INACTIVE_SCREENS from '@components/FocusTrap/WIDE_LAYOUT_INACTIVE_SCREENS';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import type FocusTrapProps from './FocusTrapProps';
+
+let activeRouteName = '';
+
+function FocusTrap({children}: FocusTrapProps) {
+    const isFocused = useIsFocused();
+    const route = useRoute();
+    const {isSmallScreenWidth} = useWindowDimensions();
+
+    const isActive = useMemo(() => {
+        // Focus trap can't be active on bottom tab screens because it would block access to the tab bar.
+        if (BOTTOM_TAB_SCREENS.includes(route.name)) {
+            return false;
+        }
+
+        // Focus trap can't be active on these screens if the layout is wide because they may be displayed side by side.
+        if (WIDE_LAYOUT_INACTIVE_SCREENS.includes(route.name) && !isSmallScreenWidth) {
+            return false;
+        }
+        return true;
+    }, [isSmallScreenWidth, route]);
+
+    useFocusEffect(() => {
+        activeRouteName = route.name;
+    });
+
+    const focusTrapRef = useRef<FocusTrapOriginal | null>(null);
+
+    return (
+        <FocusTrapOriginal
+            ref={focusTrapRef}
+            active={isActive}
+            paused={!isFocused}
+            focusTrapOptions={{
+                trapStack: sharedTrapStack,
+                allowOutsideClick: true,
+                fallbackFocus: document.body,
+                // We don't want to ovverride autofocus on these screens.
+                initialFocus: () => {
+                    if (SCREENS_WITH_AUTOFOCUS.includes(activeRouteName)) {
+                        return false;
+                    }
+                    return undefined;
+                },
+                setReturnFocus: (element) => {
+                    if (SCREENS_WITH_AUTOFOCUS.includes(activeRouteName)) {
+                        return false;
+                    }
+                    return element;
+                },
+            }}
+        >
+            {children}
+        </FocusTrapOriginal>
+    );
+}
+
+FocusTrap.displayName = 'FocusTrapView';
+
+export default FocusTrap;

src/components/FocusTrap/SCREENS_WITH_AUTOFOCUS.ts

@@ -0,0 +1,15 @@
+import SCREENS from '@src/SCREENS';
+
+const SCREENS_WITH_AUTOFOCUS: string[] = [
+    SCREENS.WORKSPACE_SWITCHER.ROOT,
+    SCREENS.SEARCH_ROOT,
+    SCREENS.REPORT,
+    SCREENS.REPORT_DESCRIPTION_ROOT,
+    SCREENS.PRIVATE_NOTES.EDIT,
+    SCREENS.SETTINGS.PROFILE.STATUS,
+    SCREENS.SETTINGS.PROFILE.PRONOUNS,
+    SCREENS.NEW_TASK.DETAILS,
+    SCREENS.MONEY_REQUEST.CREATE,
+];
+
+export default SCREENS_WITH_AUTOFOCUS;

src/components/FocusTrap/WIDE_LAYOUT_INACTIVE_SCREENS.ts

@@ -0,0 +1,36 @@
+import NAVIGATORS from '@src/NAVIGATORS';
+import SCREENS from '@src/SCREENS';
+
+const WIDE_LAYOUT_INACTIVE_SCREENS: string[] = [
+    NAVIGATORS.BOTTOM_TAB_NAVIGATOR,
+    SCREENS.HOME,
+    SCREENS.SETTINGS.ROOT,
+    SCREENS.REPORT,
+    SCREENS.SETTINGS.PROFILE.ROOT,
+    SCREENS.SETTINGS.PREFERENCES.ROOT,
+    SCREENS.SETTINGS.SECURITY,
+    SCREENS.SETTINGS.WALLET.ROOT,
+    SCREENS.SETTINGS.ABOUT,
+    SCREENS.SETTINGS.WORKSPACES,
+
+    SCREENS.WORKSPACE.INITIAL,
+
+    SCREENS.WORKSPACE.PROFILE,
+    SCREENS.WORKSPACE.CARD,
+    SCREENS.WORKSPACE.WORKFLOWS,
+    SCREENS.WORKSPACE.WORKFLOWS_APPROVER,
+    SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_FREQUENCY,
+    SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_MONTHLY_OFFSET,
+    SCREENS.WORKSPACE.REIMBURSE,
+    SCREENS.WORKSPACE.BILLS,
+    SCREENS.WORKSPACE.INVOICES,
+    SCREENS.WORKSPACE.TRAVEL,
+    SCREENS.WORKSPACE.MEMBERS,
+    SCREENS.WORKSPACE.CATEGORIES,
+    SCREENS.WORKSPACE.MORE_FEATURES,
+    SCREENS.WORKSPACE.TAGS,
+    SCREENS.WORKSPACE.TAXES,
+    SCREENS.WORKSPACE.DISTANCE_RATES,
+];
+
+export default WIDE_LAYOUT_INACTIVE_SCREENS;

src/components/FocusTrap/sharedTrapStack.ts

@@ -0,0 +1,5 @@
+import type {FocusTrap as FocusTrapHandler} from 'focus-trap';
+
+const trapStack: FocusTrapHandler[] = [];
+
+export default trapStack;

src/components/PopoverMenu.tsx

@@ -9,6 +9,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import CONST from '@src/CONST';
 import type {AnchorPosition} from '@src/styles';
 import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
+import FocusTrapForModal from './FocusTrap/FocusTrapForModal';
 import * as Expensicons from './Icon/Expensicons';
 import type {MenuItemProps} from './MenuItem';
 import MenuItem from './MenuItem';
@@ -189,35 +190,37 @@ function PopoverMenu({
             withoutOverlay={withoutOverlay}
             shouldSetModalVisibility={shouldSetModalVisibility}
         >
-            <View style={isSmallScreenWidth ? {} : styles.createMenuContainer}>
-                {!!headerText && <Text style={[styles.createMenuHeaderText, styles.ml3]}>{headerText}</Text>}
-                {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()}
-                {currentMenuItems.map((item, menuIndex) => (
-                    <MenuItem
-                        key={item.text}
-                        icon={item.icon}
-                        iconWidth={item.iconWidth}
-                        iconHeight={item.iconHeight}
-                        iconFill={item.iconFill}
-                        contentFit={item.contentFit}
-                        title={item.text}
-                        shouldCheckActionAllowedOnPress={false}
-                        description={item.description}
-                        numberOfLinesDescription={item.numberOfLinesDescription}
-                        onPress={() => selectItem(menuIndex)}
-                        focused={focusedIndex === menuIndex}
-                        displayInDefaultIconColor={item.displayInDefaultIconColor}
-                        shouldShowRightIcon={item.shouldShowRightIcon}
-                        shouldPutLeftPaddingWhenNoIcon={item.shouldPutLeftPaddingWhenNoIcon}
-                        label={item.label}
-                        isLabelHoverable={item.isLabelHoverable}
-                        floatRightAvatars={item.floatRightAvatars}
-                        floatRightAvatarSize={item.floatRightAvatarSize}
-                        shouldShowSubscriptRightAvatar={item.shouldShowSubscriptRightAvatar}
-                        disabled={item.disabled}
-                    />
-                ))}
-            </View>
+            <FocusTrapForModal active={isVisible}>
+                <View style={isSmallScreenWidth ? {} : styles.createMenuContainer}>
+                    {!!headerText && <Text style={[styles.createMenuHeaderText, styles.ml3]}>{headerText}</Text>}
+                    {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()}
+                    {currentMenuItems.map((item, menuIndex) => (
+                        <MenuItem
+                            key={item.text}
+                            icon={item.icon}
+                            iconWidth={item.iconWidth}
+                            iconHeight={item.iconHeight}
+                            iconFill={item.iconFill}
+                            contentFit={item.contentFit}
+                            title={item.text}
+                            shouldCheckActionAllowedOnPress={false}
+                            description={item.description}
+                            numberOfLinesDescription={item.numberOfLinesDescription}
+                            onPress={() => selectItem(menuIndex)}
+                            focused={focusedIndex === menuIndex}
+                            displayInDefaultIconColor={item.displayInDefaultIconColor}
+                            shouldShowRightIcon={item.shouldShowRightIcon}
+                            shouldPutLeftPaddingWhenNoIcon={item.shouldPutLeftPaddingWhenNoIcon}
+                            label={item.label}
+                            isLabelHoverable={item.isLabelHoverable}
+                            floatRightAvatars={item.floatRightAvatars}
+                            floatRightAvatarSize={item.floatRightAvatarSize}
+                            shouldShowSubscriptRightAvatar={item.shouldShowSubscriptRightAvatar}
+                            disabled={item.disabled}
+                        />
+                    ))}
+                </View>
+            </FocusTrapForModal>
         </PopoverWithMeasuredContent>
     );
 }

src/components/Pressable/GenericPressable/BaseGenericPressable.tsx

@@ -85,12 +85,11 @@ function GenericPressable(
             if (shouldUseHapticsOnLongPress) {
                 HapticFeedback.longPress();
             }
-            if (ref && 'current' in ref) {
+            if (ref && 'current' in ref && nextFocusRef) {
                 ref.current?.blur();
+                Accessibility.moveAccessibilityFocus(nextFocusRef);
             }
             onLongPress(event);
-
-            Accessibility.moveAccessibilityFocus(nextFocusRef);
         },
         [shouldUseHapticsOnLongPress, onLongPress, nextFocusRef, ref, isDisabled],
     );
@@ -106,11 +105,11 @@ function GenericPressable(
             if (shouldUseHapticsOnPress) {
                 HapticFeedback.press();
             }
-            if (ref && 'current' in ref) {
+            if (ref && 'current' in ref && nextFocusRef) {
                 ref.current?.blur();
+                Accessibility.moveAccessibilityFocus(nextFocusRef);
             }
             const onPressResult = onPress(event);
-            Accessibility.moveAccessibilityFocus(nextFocusRef);
             return onPressResult;
         },
         [shouldUseHapticsOnPress, onPress, nextFocusRef, ref, isDisabled],