Add focus trap

package.json

@@ -116,6 +116,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",

patches/react-native-web+0.19.12+006+remove focus trap from modal.patch

@@ -0,0 +1,20 @@
+diff --git a/node_modules/react-native-web/dist/exports/Modal/index.js b/node_modules/react-native-web/dist/exports/Modal/index.js
+index d5df021..e2c46cf 100644
+--- a/node_modules/react-native-web/dist/exports/Modal/index.js
++++ b/node_modules/react-native-web/dist/exports/Modal/index.js
+@@ -86,13 +86,11 @@ var Modal = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+     onDismiss: onDismissCallback,
+     onShow: onShowCallback,
+     visible: visible
+-  }, /*#__PURE__*/React.createElement(ModalFocusTrap, {
+-    active: isActive
+   }, /*#__PURE__*/React.createElement(ModalContent, _extends({}, rest, {
+     active: isActive,
+     onRequestClose: onRequestClose,
+     ref: forwardedRef,
+     transparent: transparent
+-  }), children))));
++  }), children)));
+ });
+ export default Modal;
+\ No newline at end of file

src/CONST.ts

@@ -3461,6 +3461,8 @@ const CONST = {
         TIMER: 'timer',
         /** Use for toolbars containing action buttons or components. */
         TOOLBAR: 'toolbar',
+        /** Use for navigation elements */
+        NAVIGATION: 'navigation',
     },
     TRANSLATION_KEYS: {
         ATTACHMENT: 'common.attachment',

src/components/ContextMenuItem.tsx

@@ -52,6 +52,9 @@ type ContextMenuItemProps = {
 
     /** Handles what to do when the item is focused */
     onFocus?: () => void;
+
+    /** Handles what to do when the item loose focus */
+    onBlur?: () => void;
 };
 
 type ContextMenuItemHandle = {
@@ -74,6 +77,7 @@ function ContextMenuItem(
         shouldPreventDefaultFocusOnPress = true,
         buttonRef = {current: null},
         onFocus = () => {},
+        onBlur = () => {},
     }: ContextMenuItemProps,
     ref: ForwardedRef<ContextMenuItemHandle>,
 ) {
@@ -130,6 +134,7 @@ function ContextMenuItem(
             focused={isFocused}
             interactive={isThrottledButtonActive}
             onFocus={onFocus}
+            onBlur={onBlur}
         />
     );
 }

src/components/FocusTrap/BOTTOM_TAB_SCREENS.ts

@@ -0,0 +1,6 @@
+import type {BottomTabName} from '@libs/Navigation/types';
+import SCREENS from '@src/SCREENS';
+
+const BOTTOM_TAB_SCREENS: BottomTabName[] = [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 FocusTrap 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 (
+        <FocusTrap
+            active={active}
+            focusTrapOptions={{
+                trapStack: sharedTrapStack,
+                allowOutsideClick: true,
+                fallbackFocus: document.body,
+            }}
+        >
+            {children}
+        </FocusTrap>
+    );
+}
+
+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 FocusTrapForScreen({children}: FocusTrapProps) {
+    return children;
+}
+
+FocusTrapForScreen.displayName = 'FocusTrapForScreen';
+
+export default FocusTrapForScreen;

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

@@ -0,0 +1,72 @@
+import {useFocusEffect, useIsFocused, useRoute} from '@react-navigation/native';
+import FocusTrap from 'focus-trap-react';
+import React, {useCallback, useMemo} 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 TOP_TAB_SCREENS from '@components/FocusTrap/TOP_TAB_SCREENS';
+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 FocusTrapForScreen({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.find((screen) => screen === route.name)) {
+            return false;
+        }
+
+        // in top tabs only focus trap for currently shown tab should be active
+        if (TOP_TAB_SCREENS.find((screen) => screen === route.name)) {
+            return isFocused;
+        }
+
+        // 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;
+    }, [isFocused, isSmallScreenWidth, route.name]);
+
+    useFocusEffect(
+        useCallback(() => {
+            activeRouteName = route.name;
+        }, [route]),
+    );
+
+    return (
+        <FocusTrap
+            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}
+        </FocusTrap>
+    );
+}
+
+FocusTrapForScreen.displayName = 'FocusTrapForScreen';
+
+export default FocusTrapForScreen;

src/components/FocusTrap/SCREENS_WITH_AUTOFOCUS.ts

@@ -0,0 +1,15 @@
+import {CENTRAL_PANE_WORKSPACE_SCREENS} from '@libs/Navigation/AppNavigator/Navigators/FullScreenNavigator';
+import SCREENS from '@src/SCREENS';
+
+const SCREENS_WITH_AUTOFOCUS: string[] = [
+    ...Object.keys(CENTRAL_PANE_WORKSPACE_SCREENS),
+    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/TOP_TAB_SCREENS.ts

@@ -0,0 +1,5 @@
+import CONST from '@src/CONST';
+
+const TOP_TAB_SCREENS: string[] = [CONST.TAB.NEW_CHAT, CONST.TAB.NEW_ROOM, CONST.TAB_REQUEST.DISTANCE, CONST.TAB_REQUEST.MANUAL, CONST.TAB_REQUEST.SCAN];
+
+export default TOP_TAB_SCREENS;

src/components/FocusTrap/WIDE_LAYOUT_INACTIVE_SCREENS.ts

@@ -0,0 +1,36 @@
+import NAVIGATORS from '@src/NAVIGATORS';
+import SCREENS from '@src/SCREENS';
+
+// Screens that should not have active focus trap when rendered on wide screen in order to allow Tab navigation in LHP and RHP
+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,
+    SCREENS.SEARCH.CENTRAL_PANE,
+];
+
+export default WIDE_LAYOUT_INACTIVE_SCREENS;

src/components/FocusTrap/sharedTrapStack.ts

@@ -0,0 +1,6 @@
+import type {FocusTrap as FocusTrapHandler} from 'focus-trap';
+
+// focus-trap is capable of managing many traps. It's necessary for RHP and modals
+const trapStack: FocusTrapHandler[] = [];
+
+export default trapStack;

src/components/HeaderWithBackButton/index.tsx

@@ -158,7 +158,7 @@ function HeaderWithBackButton({
                                 }
                             }}
                             style={[styles.touchableButtonImage]}
-                            role="button"
+                            role={CONST.ROLE.BUTTON}
                             accessibilityLabel={translate('common.back')}
                             id={CONST.BACK_BUTTON_NATIVE_ID}
                         >

src/components/MenuItem.tsx

@@ -281,6 +281,9 @@ type MenuItemBaseProps = {
     /** Handles what to do when the item is focused */
     onFocus?: () => void;
 
+    /** Handles what to do when the item loose focus */
+    onBlur?: () => void;
+
     /** Optional account id if it's user avatar or policy id if it's workspace avatar */
     avatarID?: number | string;
 };
@@ -365,6 +368,7 @@ function MenuItem(
         isPaneMenu = false,
         shouldPutLeftPaddingWhenNoIcon = false,
         onFocus,
+        onBlur,
         avatarID,
     }: MenuItemProps,
     ref: PressableRef,
@@ -462,7 +466,7 @@ function MenuItem(
     };
 
     return (
-        <View>
+        <View onBlur={onBlur}>
             {!!label && !isLabelHoverable && (
                 <View style={[styles.ph5, labelStyle]}>
                     <Text style={StyleUtils.combineStyles([styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre])}>{label}</Text>

src/components/Modal/BaseModal.tsx

@@ -2,6 +2,7 @@ import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react'
 import {View} from 'react-native';
 import ReactNativeModal from 'react-native-modal';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
+import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
 import useKeyboardState from '@hooks/useKeyboardState';
 import usePrevious from '@hooks/usePrevious';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
@@ -214,7 +215,7 @@ function BaseModal(
                 // a conflict between RN core and Reanimated shadow tree operations
                 // position absolute is needed to prevent the view from interfering with flex layout
                 collapsable={false}
-                style={[styles.pAbsolute]}
+                style={[styles.pAbsolute, {zIndex: 1}]}
             >
                 <ReactNativeModal
                     // Prevent the parent element to capture a click. This is useful when the modal component is put inside a pressable.
@@ -251,14 +252,18 @@ function BaseModal(
                     avoidKeyboard={avoidKeyboard}
                     customBackdrop={shouldUseCustomBackdrop ? <Overlay onPress={handleBackdropPress} /> : undefined}
                 >
-                    <ModalContent onDismiss={handleDismissModal}>
-                        <View
-                            style={[styles.defaultModalContainer, modalPaddingStyles, modalContainerStyle, !isVisible && styles.pointerEventsNone]}
-                            ref={ref}
-                        >
-                            <ColorSchemeWrapper>{children}</ColorSchemeWrapper>
+                    <FocusTrapForModal active={isVisible}>
+                        <View>
+                            <ModalContent onDismiss={handleDismissModal}>
+                                <View
+                                    style={[styles.defaultModalContainer, modalPaddingStyles, modalContainerStyle, !isVisible && styles.pointerEventsNone]}
+                                    ref={ref}
+                                >
+                                    <ColorSchemeWrapper>{children}</ColorSchemeWrapper>
+                                </View>
+                            </ModalContent>
                         </View>
-                    </ModalContent>
+                    </FocusTrapForModal>
                 </ReactNativeModal>
             </View>
         </ModalContext.Provider>