fix(mWeb): Move focus to opened menu layout for screen readers

src/components/Navigation/TopLevelNavigationTabBar/index.tsx

@@ -67,6 +67,8 @@ function TopLevelNavigationTabBar({state}: TopLevelNavigationTabBarProps) {
                 !shouldUseNarrowLayout ? styles.borderRight : {},
                 shouldDisplayLHB ? StyleUtils.positioning.l0 : StyleUtils.positioning.b0,
             ]}
+            accessibilityElementsHidden={!isReadyToDisplayBottomBar}
+            aria-hidden={!isReadyToDisplayBottomBar}
         >
             {/* We are not rendering NavigationTabBar conditionally for two reasons
                 1. It's faster to hide/show it than mount a new when needed.

src/components/ScreenWrapper/ScreenWrapperContainer.tsx

@@ -85,6 +85,9 @@ type ScreenWrapperContainerProps = ForwardedFSClassProps &
          */
         isFocused?: boolean;
 
+        /** Whether this screen should be hidden from accessibility tree */
+        shouldHideFromAccessibility?: boolean;
+
         /** Reference to the outer element */
         ref?: ForwardedRef<View>;
     }>;
@@ -109,6 +112,7 @@ function ScreenWrapperContainer({
     includePaddingTop = true,
     includeSafeAreaPaddingBottom = false,
     isFocused = true,
+    shouldHideFromAccessibility = false,
     ref,
     forwardedFSClass,
 }: ScreenWrapperContainerProps) {
@@ -212,6 +216,9 @@ function ScreenWrapperContainer({
             {...panResponder.panHandlers}
             testID={testID}
             fsClass={forwardedFSClass}
+            tabIndex={-1}
+            accessibilityElementsHidden={shouldHideFromAccessibility}
+            aria-hidden={shouldHideFromAccessibility}
         >
             <View
                 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access

src/components/ScreenWrapper/index.tsx

@@ -1,22 +1,26 @@
 import {useFocusEffect, useIsFocused, useNavigation, usePreventRemove} from '@react-navigation/native';
 import {isSingleNewDotEntrySelector} from '@selectors/HybridApp';
 import type {ReactNode} from 'react';
-import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
+import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import type {StyleProp, View, ViewStyle} from 'react-native';
 import {DeviceEventEmitter, Keyboard} from 'react-native';
 import type {EdgeInsets} from 'react-native-safe-area-context';
 import CustomDevMenu from '@components/CustomDevMenu';
 import FocusTrapForScreen from '@components/FocusTrap/FocusTrapForScreen';
 import type FocusTrapForScreenProps from '@components/FocusTrap/FocusTrapForScreen/FocusTrapProps';
 import {useInitialURLState} from '@components/InitialURLContextProvider';
 import withNavigationFallback from '@components/withNavigationFallback';
+import useAccessibilityFocus from '@hooks/useAccessibilityFocus';
 import useEnvironment from '@hooks/useEnvironment';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {isMobile} from '@libs/Browser';
 import type {ForwardedFSClassProps} from '@libs/Fullstory/types';
+import getPlatform from '@libs/getPlatform';
+import mergeRefs from '@libs/mergeRefs';
 import NarrowPaneContext from '@libs/Navigation/AppNavigator/Navigators/NarrowPaneContext';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackNavigationProp} from '@libs/Navigation/PlatformStackNavigation/types';
@@ -104,10 +108,12 @@ function ScreenWrapper({
     const navigationFallback = useNavigation<PlatformStackNavigationProp<RootNavigatorParamList>>();
     const navigation = navigationProp ?? navigationFallback;
     const isFocused = useIsFocused();
+    const screenWrapperRef = useRef<View | HTMLElement>(null);
+    const mergedScreenWrapperRef = mergeRefs(screenWrapperRef, ref);
 
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout for a case where we want to show the offline indicator only on small screens
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth} = useResponsiveLayout();
+    const {isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
 
     const styles = useThemeStyles();
     const {isDevelopment} = useEnvironment();
@@ -133,6 +139,9 @@ function ScreenWrapper({
     // This context allows us to disable the safe area padding offsetting the offline indicator in scrollable components like 'ScrollView', 'SelectionList' or 'FormProvider'.
     // This is useful e.g. for the RightModalNavigator, where we want to avoid the safe area padding offsetting the offline indicator because we only show the offline indicator on small screens.
     const {isInNarrowPane} = useContext(NarrowPaneContext);
+    const isMobileWebNarrowLayout = getPlatform() === CONST.PLATFORM.WEB && isMobile() && shouldUseNarrowLayout;
+    const shouldMoveAccessibilityFocus = isMobileWebNarrowLayout && isInNarrowPane;
+    const shouldHideFromAccessibility = isMobileWebNarrowLayout && !isFocused;
     const {addSafeAreaPadding, showOnSmallScreens, showOnWideScreens, originalValues} = useContext(ScreenWrapperOfflineIndicatorContext);
     const offlineIndicatorContextValue = useMemo(() => {
         const newAddSafeAreaPadding = isInNarrowPane ? isSmallScreenWidth : addSafeAreaPadding;
@@ -177,6 +186,8 @@ function ScreenWrapper({
         closeReactNativeApp({shouldSetNVP: false, isTrackingGPS: false});
     });
 
+    useAccessibilityFocus({didScreenTransitionEnd, isFocused, ref: screenWrapperRef, shouldMoveAccessibilityFocus});
+
     useEffect(() => {
         // On iOS, the transitionEnd event doesn't trigger some times. As such, we need to set a timeout
         const timeout = setTimeout(() => {
@@ -255,7 +266,7 @@ function ScreenWrapper({
     return (
         <FocusTrapForScreen focusTrapSettings={focusTrapSettings}>
             <ScreenWrapperContainer
-                ref={ref}
+                ref={mergedScreenWrapperRef}
                 style={[styles.flex1, style]}
                 bottomContent={bottomContent}
                 didScreenTransitionEnd={didScreenTransitionEnd}
@@ -264,6 +275,7 @@ function ScreenWrapper({
                 includePaddingTop={includePaddingTop}
                 includeSafeAreaPaddingBottom={includeSafeAreaPaddingBottom}
                 isFocused={isFocused}
+                shouldHideFromAccessibility={shouldHideFromAccessibility}
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...restContainerProps}
             >

src/hooks/useAccessibilityFocus/index.native.ts

@@ -0,0 +1,5 @@
+import type UseAccessibilityFocus from './type';
+
+const useAccessibilityFocus: UseAccessibilityFocus = () => {};
+
+export default useAccessibilityFocus;

src/hooks/useAccessibilityFocus/index.ts

@@ -0,0 +1,61 @@
+import {useEffect} from 'react';
+import type UseAccessibilityFocus from './type';
+
+const FOCUSABLE_ELEMENTS_SELECTOR = 'button, [href], [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])';
+const PROGRAMMATIC_FOCUS_DATA_ATTRIBUTE = 'data-programmatic-focus';
+
+function isHTMLElement(value: unknown): value is HTMLElement {
+    return typeof HTMLElement !== 'undefined' && value instanceof HTMLElement;
+}
+
+const useAccessibilityFocus: UseAccessibilityFocus = ({didScreenTransitionEnd, isFocused, ref, shouldMoveAccessibilityFocus}) => {
+    useEffect(() => {
+        if (!shouldMoveAccessibilityFocus || !didScreenTransitionEnd || !isFocused) {
+            return;
+        }
+
+        if (typeof document === 'undefined') {
+            return;
+        }
+
+        const element = ref.current;
+        if (!isHTMLElement(element)) {
+            return;
+        }
+
+        const activeElement = document.activeElement;
+        if (activeElement && element.contains(activeElement)) {
+            return;
+        }
+
+        const focusTargets = element.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);
+        for (const focusTarget of focusTargets) {
+            const isDisabledTarget = focusTarget.matches(':disabled') || focusTarget.getAttribute('aria-disabled') === 'true';
+            if (isDisabledTarget || focusTarget.getAttribute('aria-hidden') === 'true') {
+                continue;
+            }
+
+            if (focusTarget === activeElement) {
+                return;
+            }
+
+            const removeProgrammaticFocusAttr = () => {
+                focusTarget.removeAttribute(PROGRAMMATIC_FOCUS_DATA_ATTRIBUTE);
+            };
+
+            focusTarget.setAttribute(PROGRAMMATIC_FOCUS_DATA_ATTRIBUTE, 'true');
+            focusTarget.addEventListener('blur', removeProgrammaticFocusAttr, {once: true});
+            focusTarget.focus();
+
+            const focusedElement = document.activeElement;
+            if (focusedElement === focusTarget || (focusedElement && focusTarget.contains(focusedElement))) {
+                return;
+            }
+
+            focusTarget.removeEventListener('blur', removeProgrammaticFocusAttr);
+            removeProgrammaticFocusAttr();
+        }
+    }, [didScreenTransitionEnd, isFocused, ref, shouldMoveAccessibilityFocus]);
+};
+
+export default useAccessibilityFocus;

src/hooks/useAccessibilityFocus/type.ts

@@ -0,0 +1,13 @@
+import type {RefObject} from 'react';
+
+type UseAccessibilityFocusParams = {
+    didScreenTransitionEnd: boolean;
+    isFocused: boolean;
+    ref: RefObject<unknown>;
+    shouldMoveAccessibilityFocus: boolean;
+};
+
+type UseAccessibilityFocus = (params: UseAccessibilityFocusParams) => void;
+
+export type {UseAccessibilityFocusParams};
+export default UseAccessibilityFocus;

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -149,7 +149,12 @@ function createModalStackNavigator<ParamList extends ParamListBase>(screens: Scr
 
         return (
             // This container is necessary to hide card translation during transition. Without it the user would see un-clipped cards.
-            <View style={[styles.modalStackNavigatorContainer, styles.modalStackNavigatorContainerWidth(isSmallScreenWidth)]}>
+            <View
+                style={[styles.modalStackNavigatorContainer, styles.modalStackNavigatorContainerWidth(isSmallScreenWidth)]}
+                accessibilityViewIsModal={isSmallScreenWidth}
+                aria-modal={isSmallScreenWidth || undefined}
+                role={isSmallScreenWidth ? 'dialog' : undefined}
+            >
                 <ModalStackNavigator.Navigator>
                     {Object.keys(screens as Required<Screens>).map((name) => (
                         <ModalStackNavigator.Screen

tests/ui/SearchPageTest.tsx

@@ -117,10 +117,10 @@ describe('SearchPageNarrow', () => {
         expect(screen.getByTestId('SearchPageNarrow')).toBeTruthy();
 
         // Initially, there are two NavigationTabBars on screen: one from TopLevelNavigationTabBar and one from SearchPageNarrow.
-        let navigationTabBars = screen.getAllByTestId('NavigationTabBar');
+        let navigationTabBars = screen.getAllByTestId('NavigationTabBar', {includeHiddenElements: true});
         expect(navigationTabBars).toHaveLength(2);
 
-        const searchAutocompleteInput = screen.getByTestId('search-autocomplete-text-input');
+        const searchAutocompleteInput = screen.getByTestId('search-autocomplete-text-input', {includeHiddenElements: true});
         expect(searchAutocompleteInput).toBeTruthy();
 
         // When the search input is focused, the NavigationTabBar from SearchPageNarrow will unmount, and the one from TopLevelNavigationTabBar will be hidden.
@@ -130,12 +130,12 @@ describe('SearchPageNarrow', () => {
         });
 
         await waitFor(() => {
-            navigationTabBars = screen.getAllByTestId('NavigationTabBar');
+            navigationTabBars = screen.getAllByTestId('NavigationTabBar', {includeHiddenElements: true});
             expect(navigationTabBars).toHaveLength(1);
         });
 
         await waitFor(() => {
-            const topLevelNavigationTabBar = screen.getByTestId('TopLevelNavigationTabBar');
+            const topLevelNavigationTabBar = screen.getByTestId('TopLevelNavigationTabBar', {includeHiddenElements: true});
             expect(topLevelNavigationTabBar).toHaveStyle({pointerEvents: 'none', opacity: 0});
         });
 
@@ -146,12 +146,12 @@ describe('SearchPageNarrow', () => {
         });
 
         await waitFor(() => {
-            navigationTabBars = screen.getAllByTestId('NavigationTabBar');
+            navigationTabBars = screen.getAllByTestId('NavigationTabBar', {includeHiddenElements: true});
             expect(navigationTabBars).toHaveLength(2);
         });
 
         await waitFor(() => {
-            const topLevelNavigationTabBar = screen.getByTestId('TopLevelNavigationTabBar');
+            const topLevelNavigationTabBar = screen.getByTestId('TopLevelNavigationTabBar', {includeHiddenElements: true});
             expect(topLevelNavigationTabBar).toHaveStyle({pointerEvents: 'auto', opacity: 1});
         });
     });

web/index.html

@@ -61,14 +61,14 @@
             -webkit-user-select: none !important;
             -webkit-touch-callout: none !important;
         }
-        :focus-visible {
+        :focus-visible:not([data-programmatic-focus="true"]) {
             outline: 0;
             box-shadow: inset 0px 0px 0px 1px #5AB0FF;
         }
-        :focus-visible[data-inner-box-shadow-element]{
+        :focus-visible:not([data-programmatic-focus="true"])[data-inner-box-shadow-element]{
             overflow: hidden;
         }
-        :focus-visible[data-inner-box-shadow-element]::before {
+        :focus-visible:not([data-programmatic-focus="true"])[data-inner-box-shadow-element]::before {
             content: '';
             position: absolute;
             top: 0;
@@ -79,7 +79,7 @@
             pointer-events: none;
             z-index: 1000;
         }
-        :focus[data-focusvisible-polyfill] {
+        :focus[data-focusvisible-polyfill]:not([data-programmatic-focus="true"]) {
             outline: 0;
             box-shadow: inset 0px 0px 0px 1px #5AB0FF;
         }