Merge pull request Expensify#85221 from TaduJR/fix-Screen-Reader-Many-Pages-There-is-no-dialog-role-and-title-announced

fix: Screen Reader: Many Pages: There is no dialog role and title announced

Author: amyevans

src/CONST/index.ts

@@ -6081,6 +6081,8 @@ const CONST = {
         NAVIGATION: 'navigation',
         /** Use for Tooltips */
         TOOLTIP: 'tooltip',
+        /** Use for dialog/modal elements */
+        DIALOG: 'dialog',
         /** Use for data table containers. */
         TABLE: 'table',
         /** Use for table rows. */

src/components/DialogLabelContext.tsx

@@ -0,0 +1,98 @@
+import React, {createContext, useContext, useRef} from 'react';
+import type {View} from 'react-native';
+
+type LabelEntry = {id: number; text: string};
+
+type DialogLabelData = {
+    containerRef: React.RefObject<View | null>;
+    isInsideDialog: boolean;
+};
+
+type DialogLabelActions = {
+    pushLabel: (text: string) => number;
+    popLabel: (id: number) => void;
+    claimInitialFocus: () => boolean;
+};
+
+const DialogLabelDataContext = createContext<DialogLabelData>({
+    containerRef: {current: null},
+    isInsideDialog: false,
+});
+
+const DialogLabelActionsContext = createContext<DialogLabelActions>({
+    pushLabel: () => 0,
+    popLabel: () => {},
+    claimInitialFocus: () => false,
+});
+
+type DialogLabelProviderProps = {
+    children: React.ReactNode;
+    containerRef: React.RefObject<View | null>;
+};
+
+function DialogLabelProvider({children, containerRef}: DialogLabelProviderProps) {
+    const nextIdRef = useRef(0);
+    const labelStackRef = useRef<LabelEntry[]>([]);
+    const initialFocusClaimedRef = useRef(false);
+
+    const updateContainerLabel = () => {
+        const top = labelStackRef.current.at(-1);
+        const node = containerRef.current as unknown as HTMLElement | null;
+        if (!node || typeof node.setAttribute !== 'function') {
+            return;
+        }
+        if (top?.text) {
+            node.setAttribute('aria-label', top.text);
+        } else {
+            node.removeAttribute('aria-label');
+        }
+    };
+
+    const pushLabel = (text: string): number => {
+        const id = nextIdRef.current++;
+        labelStackRef.current = [...labelStackRef.current, {id, text}];
+        initialFocusClaimedRef.current = false;
+        updateContainerLabel();
+        return id;
+    };
+
+    const popLabel = (id: number) => {
+        labelStackRef.current = labelStackRef.current.filter((entry) => entry.id !== id);
+        updateContainerLabel();
+    };
+
+    const claimInitialFocus = (): boolean => {
+        if (initialFocusClaimedRef.current) {
+            return false;
+        }
+        initialFocusClaimedRef.current = true;
+        return true;
+    };
+
+    const data: DialogLabelData = {
+        containerRef,
+        isInsideDialog: true,
+    };
+
+    const actions: DialogLabelActions = {
+        pushLabel,
+        popLabel,
+        claimInitialFocus,
+    };
+
+    return (
+        <DialogLabelDataContext.Provider value={data}>
+            <DialogLabelActionsContext.Provider value={actions}>{children}</DialogLabelActionsContext.Provider>
+        </DialogLabelDataContext.Provider>
+    );
+}
+
+function useDialogLabelData(): DialogLabelData {
+    return useContext(DialogLabelDataContext);
+}
+
+function useDialogLabelActions(): DialogLabelActions {
+    return useContext(DialogLabelActionsContext);
+}
+
+export {DialogLabelProvider, useDialogLabelData, useDialogLabelActions};

src/components/Header.tsx

@@ -2,6 +2,8 @@ import type {ReactNode} from 'react';
 import React, {useMemo} from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {Linking, View} from 'react-native';
+import useDialogContainerFocus from '@hooks/useDialogContainerFocus';
+import useDialogLabelRegistration from '@hooks/useDialogLabelRegistration';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import EnvironmentBadge from './EnvironmentBadge';
@@ -32,10 +34,27 @@ type HeaderProps = {
 
     /** Line number for the title */
     numberOfTitleLines?: number;
+
+    /** Whether this is the screen-level header (registers dialog label and focus). Only HeaderWithBackButton should set this. */
+    isScreenHeader?: boolean;
 };
 
-function Header({title = '', subtitle = '', textStyles = [], style, containerStyles = [], shouldShowEnvironmentBadge = false, subTitleLink = '', numberOfTitleLines = 2}: HeaderProps) {
+function Header({
+    title = '',
+    subtitle = '',
+    textStyles = [],
+    style,
+    containerStyles = [],
+    shouldShowEnvironmentBadge = false,
+    subTitleLink = '',
+    numberOfTitleLines = 2,
+    isScreenHeader = false,
+}: HeaderProps) {
     const styles = useThemeStyles();
+    const {isTransitionReady, claimInitialFocus, containerRef} = useDialogLabelRegistration(isScreenHeader ? title : '');
+
+    useDialogContainerFocus(containerRef, isTransitionReady, claimInitialFocus);
+
     const renderedSubtitle = useMemo(
         () => (
             <>

src/components/HeaderWithBackButton/index.tsx

@@ -12,6 +12,7 @@ import SearchButton from '@components/Search/SearchRouter/SearchButton';
 import SidePanelButton from '@components/SidePanel/SidePanelButton';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import Tooltip from '@components/Tooltip';
+import useDialogLabelRegistration from '@hooks/useDialogLabelRegistration';
 import useIsInLandscapeMode from '@hooks/useIsInLandscapeMode';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -79,6 +80,9 @@ function HeaderWithBackButton({
     shouldMinimizeMenuButton = false,
     openParentReportInCurrentTab = false,
 }: HeaderWithBackButtonProps) {
+    // Avatar-header routes skip Header, so register the dialog label here.
+    useDialogLabelRegistration(shouldShowReportAvatarWithDisplay ? (report?.reportName ?? '') : '');
+
     const icons = useMemoizedLazyExpensifyIcons(['Download', 'Rotate', 'BackArrow', 'Close']);
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -148,6 +152,7 @@ function HeaderWithBackButton({
                 textStyles={[titleColor ? StyleUtils.getTextColorStyle(titleColor) : {}, shouldUseHeadlineHeader && styles.textHeadlineH2]}
                 subTitleLink={subTitleLink}
                 numberOfTitleLines={1}
+                isScreenHeader
             />
         );
     }, [

src/hooks/useDialogContainerFocus/index.native.ts

@@ -0,0 +1,8 @@
+import type UseDialogContainerFocus from './types';
+
+/**
+ * No-op on native — dialog focus is only needed for web screen readers.
+ */
+const useDialogContainerFocus: UseDialogContainerFocus = () => {};
+
+export default useDialogContainerFocus;

src/hooks/useDialogContainerFocus/index.ts

@@ -0,0 +1,39 @@
+import {useEffect} from 'react';
+import {InteractionManager} from 'react-native';
+import type UseDialogContainerFocus from './types';
+
+const FOCUSABLE_SELECTOR = 'button, [href], input, textarea, select, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])';
+
+/** Focuses the first interactive element inside the dialog after the RHP transition for screen reader announcement. */
+const useDialogContainerFocus: UseDialogContainerFocus = (ref, isReady, claimInitialFocus) => {
+    useEffect(() => {
+        if (!isReady || !claimInitialFocus?.()) {
+            return;
+        }
+        let cancelled = false;
+        let frameId: number;
+        // Deferred past useAutoFocusInput's InteractionManager + Promise chain.
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        const interactionHandle = InteractionManager.runAfterInteractions(() => {
+            if (cancelled) {
+                return;
+            }
+            frameId = requestAnimationFrame(() => {
+                if (cancelled || (document.activeElement && document.activeElement !== document.body)) {
+                    return;
+                }
+                const container = ref.current as unknown as HTMLElement | null;
+                const targets = container?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+                const target = targets && Array.from(targets).find((el) => !el.closest('[aria-hidden="true"]'));
+                target?.focus({preventScroll: true});
+            });
+        });
+        return () => {
+            cancelled = true;
+            interactionHandle.cancel();
+            cancelAnimationFrame(frameId);
+        };
+    }, [isReady, ref, claimInitialFocus]);
+};
+
+export default useDialogContainerFocus;

src/hooks/useDialogContainerFocus/types.ts

@@ -0,0 +1,6 @@
+import type {RefObject} from 'react';
+import type {View} from 'react-native';
+
+type UseDialogContainerFocus = (ref: RefObject<View | null>, isReady: boolean, claimInitialFocus?: () => boolean) => void;
+
+export default UseDialogContainerFocus;

src/hooks/useDialogLabelRegistration.ts

@@ -0,0 +1,25 @@
+import type {ReactNode} from 'react';
+import {useContext, useEffect} from 'react';
+import {useDialogLabelActions, useDialogLabelData} from '@components/DialogLabelContext';
+import ScreenWrapperStatusContext from '@components/ScreenWrapper/ScreenWrapperStatusContext';
+
+/** Registers and manages a dialog label in the DialogLabelContext for the lifetime of the calling component. */
+function useDialogLabelRegistration(title: ReactNode) {
+    const {isInsideDialog, containerRef} = useDialogLabelData();
+    const {pushLabel, popLabel, claimInitialFocus} = useDialogLabelActions();
+    const screenWrapperStatus = useContext(ScreenWrapperStatusContext);
+
+    useEffect(() => {
+        if (!isInsideDialog || typeof title !== 'string' || !title) {
+            return;
+        }
+        const id = pushLabel(title);
+        return () => popLabel(id);
+    }, [isInsideDialog, title, pushLabel, popLabel]);
+
+    const isTransitionReady = !!isInsideDialog && !!screenWrapperStatus?.didScreenTransitionEnd;
+
+    return {isTransitionReady, claimInitialFocus, containerRef};
+}
+
+export default useDialogLabelRegistration;

src/libs/Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx

@@ -32,6 +32,7 @@ function BaseOverlay({onPress, progress, positionLeftValue = -2 * variables.side
     return (
         <Animated.View
             id="BaseOverlay"
+            aria-hidden
             style={[styles.pFixed, styles.t0, styles.b0, styles.overlayBackground, styles.overlayStyles({progress: progress ?? current.progress, positionLeftValue, positionRightValue})]}
         >
             <View style={[styles.flex1, styles.flexColumn]}>