Add focus trap to the RHP (v3)

package.json

@@ -102,6 +102,7 @@
  "expo": "^50.0.0-preview.7",
  "expo-image": "1.10.1",
  "fbjs": "^3.0.2",
+ "focus-trap-react": "^10.2.3",
  "htmlparser2": "^7.2.0",
  "idb-keyval": "^6.2.1",
  "jest-expo": "50.0.1",

src/components/ConfirmModal.tsx

@@ -97,6 +97,7 @@ function ConfirmModal({
  shouldSetModalVisibility={shouldSetModalVisibility}
  onModalHide={onModalHide}
  type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
+ shouldEnableFocusTrap
  >
  <ConfirmContent
  title={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,12 +1,15 @@
 import React, {useState} from 'react';
+import FocusTrapView from '@components/FocusTrapView';
 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>();
@@ -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

@@ -60,6 +60,9 @@ type BaseModalProps = Partial<ModalProps> & {
  * */
  hideModalContentWhileAnimating?: boolean;
 
+ /** Whether the modal should use focus trap */
+ shouldEnableFocusTrap?: boolean;
+
  /** Should we use a custom backdrop for the modal? (This prevents focus issues on desktop) */
  shouldUseCustomBackdrop?: boolean;
 };

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 */
+ shouldEnableFocusTrap?: 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,
+ shouldEnableFocusTrap = true,
+ 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={shouldEnableFocusTrap}
+ 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

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

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

src/pages/home/ReportScreen.js

@@ -478,6 +478,7 @@ function ReportScreen({
  style={screenWrapperStyle}
  shouldEnableKeyboardAvoidingView={isTopMostReportId}
  testID={ReportScreen.displayName}
+ shouldEnableFocusTrap={false}
  >
  <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}
+ shouldEnableFocusTrap={false}
  >
  {({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}) => (
  <>