fix: Screen Readers: Many Pages: The status message of no results is not announced.

src/CONST/index.ts

@@ -1736,6 +1736,7 @@ const CONST = {
         TOOLTIP_SENSE: 1000,
         COMMENT_LENGTH_DEBOUNCE_TIME: 1500,
         SEARCH_OPTION_LIST_DEBOUNCE_TIME: 300,
+        ACCESSIBILITY_ANNOUNCEMENT_DEBOUNCE_TIME: 1000,
         SUGGESTION_DEBOUNCE_TIME: 100,
         RESIZE_DEBOUNCE_TIME: 100,
         UNREAD_UPDATE_DEBOUNCE_TIME: 300,

src/components/AddressSearch/index.tsx

@@ -8,6 +8,7 @@ import LocationErrorMessage from '@components/LocationErrorMessage';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
+import useDebouncedAccessibilityAnnouncement from '@hooks/useDebouncedAccessibilityAnnouncement';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -48,6 +49,23 @@ function isPlaceMatchForSearch(search: string, place: PredefinedPlace): boolean
 // VirtualizedList component with a VirtualizedList-backed instead
 LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
 
+function AddressSearchListEmptyComponent({searchValue}: {searchValue: string}) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const noResultsFoundText = translate('common.noResultsFound');
+
+    useDebouncedAccessibilityAnnouncement(noResultsFoundText, true, searchValue);
+
+    return (
+        <Text
+            style={[styles.textLabel, styles.colorMuted, styles.pv4, styles.ph3, styles.overflowAuto]}
+            aria-hidden
+        >
+            {noResultsFoundText}
+        </Text>
+    );
+}
+
 function AddressSearch({
     canUseCurrentLocation = false,
     containerStyles,
@@ -327,10 +345,7 @@ function AddressSearch({
         return predefinedPlaces?.filter((predefinedPlace) => isPlaceMatchForSearch(searchValue, predefinedPlace)) ?? [];
     }, [predefinedPlaces, searchValue, shouldHidePredefinedPlaces]);
 
-    const listEmptyComponent = useMemo(
-        () => (!isTyping ? undefined : <Text style={[styles.textLabel, styles.colorMuted, styles.pv4, styles.ph3, styles.overflowAuto]}>{translate('common.noResultsFound')}</Text>),
-        [isTyping, styles, translate],
-    );
+    const listEmptyComponent = isTyping ? <AddressSearchListEmptyComponent searchValue={searchValue} /> : undefined;
 
     const listLoader = useMemo(() => {
         const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'AddressSearch.listLoader'};

src/components/EmojiPicker/EmojiPickerMenu/BaseEmojiPickerMenu.tsx

@@ -8,6 +8,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import CategoryShortcutBar from '@components/EmojiPicker/CategoryShortcutBar';
 import EmojiSkinToneList from '@components/EmojiPicker/EmojiSkinToneList';
 import Text from '@components/Text';
+import useDebouncedAccessibilityAnnouncement from '@hooks/useDebouncedAccessibilityAnnouncement';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {EmojiPickerList, EmojiPickerListItem, HeaderIndices} from '@libs/EmojiUtils';
@@ -41,6 +42,9 @@ type BaseEmojiPickerMenuProps = {
     /** Whether the list should always bounce vertically */
     alwaysBounceVertical?: boolean;
 
+    /** The current search input value, used for accessibility re-announcements */
+    searchValue?: string;
+
     /** Reference to the outer element */
     ref?: ForwardedRef<FlashListRef<EmojiPickerListItem>>;
 };
@@ -73,11 +77,21 @@ const keyExtractor = (item: EmojiPickerListItem, index: number): string => `emoj
 /**
  * Renders the list empty component
  */
-function ListEmptyComponent() {
+function ListEmptyComponent({searchValue}: {searchValue?: string}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const noResultsFoundText = translate('common.noResultsFound');
+
+    useDebouncedAccessibilityAnnouncement(noResultsFoundText, true, searchValue ?? '');
 
-    return <Text style={[styles.textLabel, styles.colorMuted]}>{translate('common.noResultsFound')}</Text>;
+    return (
+        <Text
+            style={[styles.textLabel, styles.colorMuted]}
+            aria-hidden
+        >
+            {noResultsFoundText}
+        </Text>
+    );
 }
 
 function BaseEmojiPickerMenu({
@@ -90,6 +104,7 @@ function BaseEmojiPickerMenu({
     stickyHeaderIndices = [],
     extraData = [],
     alwaysBounceVertical = false,
+    searchValue,
     ref,
 }: BaseEmojiPickerMenuProps) {
     const styles = useThemeStyles();
@@ -111,7 +126,7 @@ function BaseEmojiPickerMenu({
                     keyExtractor={keyExtractor}
                     numColumns={CONST.EMOJI_NUM_PER_ROW}
                     stickyHeaderIndices={stickyHeaderIndices}
-                    ListEmptyComponent={ListEmptyComponent}
+                    ListEmptyComponent={<ListEmptyComponent searchValue={searchValue} />}
                     alwaysBounceVertical={alwaysBounceVertical}
                     contentContainerStyle={styles.ph4}
                     extraData={extraData}

src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx

@@ -1,6 +1,6 @@
 import type {ListRenderItem} from '@shopify/flash-list';
 import lodashDebounce from 'lodash/debounce';
-import React, {useCallback} from 'react';
+import React, {useCallback, useMemo, useRef, useState} from 'react';
 import {InteractionManager, View} from 'react-native';
 import type {Emoji} from '@assets/emojis/types';
 import EmojiPickerMenuItem from '@components/EmojiPicker/EmojiPickerMenuItem';
@@ -42,6 +42,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji, ref}: EmojiPickerMenuPro
         emojiListRef,
     } = useEmojiPickerMenu();
     const StyleUtils = useStyleUtils();
+    const [searchText, setSearchText] = useState('');
 
     const updateEmojiList = (emojiData: EmojiPickerList | Emoji[], headerData: number[] = []) => {
         setFilteredEmojis(emojiData);
@@ -55,18 +56,21 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji, ref}: EmojiPickerMenuPro
         });
     };
 
-    /**
-     * Filter the entire list of emojis to only emojis that have the search term in their keywords
-     */
-    const filterEmojis = lodashDebounce((searchTerm: string) => {
+    const filterCallbackRef = useRef<(searchTerm: string) => void>(undefined);
+    filterCallbackRef.current = (searchTerm: string) => {
         const [normalizedSearchTerm, newFilteredEmojiList] = suggestEmojis(searchTerm);
 
         if (normalizedSearchTerm === '') {
             updateEmojiList(allEmojis, headerRowIndices);
         } else {
             updateEmojiList(newFilteredEmojiList ?? [], []);
         }
-    }, 300);
+    };
+
+    // Stable debounced function that delegates to the latest callback via ref,
+    // preventing re-renders from recreating the debounce timer.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const filterEmojis = useMemo(() => lodashDebounce((text: string) => filterCallbackRef.current?.(text), 300), []);
 
     const scrollToHeader = useCallback(
         (headerIndex: number) => {
@@ -124,7 +128,10 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji, ref}: EmojiPickerMenuPro
                     label={translate('common.search')}
                     accessibilityLabel={translate('common.search')}
                     role={CONST.ROLE.PRESENTATION}
-                    onChangeText={filterEmojis}
+                    onChangeText={(text: string) => {
+                        setSearchText(text);
+                        filterEmojis(text);
+                    }}
                     submitBehavior={filteredEmojis.length > 0 ? 'blurAndSubmit' : 'submit'}
                     sentryLabel={CONST.SENTRY_LABEL.EMOJI_PICKER.SEARCH_INPUT}
                 />
@@ -145,6 +152,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji, ref}: EmojiPickerMenuPro
                 extraData={[filteredEmojis, preferredSkinTone]}
                 stickyHeaderIndices={headerIndices}
                 alwaysBounceVertical={filteredEmojis.length !== 0}
+                searchValue={searchText}
             />
         </View>
     );

src/components/EmojiPicker/EmojiPickerMenu/index.tsx

@@ -59,6 +59,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji, ref}: EmojiPickerMenuPro
     // prevent auto focus when open picker for mobile device
     const shouldFocusInputOnScreenFocus = canFocusInputOnScreenFocus();
 
+    const [searchText, setSearchText] = useState('');
     const [arePointerEventsDisabled, setArePointerEventsDisabled] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
     const [isUsingKeyboardMovement, setIsUsingKeyboardMovement] = useState(false);
@@ -110,7 +111,8 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji, ref}: EmojiPickerMenuPro
         allowNegativeIndexes: true,
     });
 
-    const filterEmojis = throttle((searchTerm: string) => {
+    const filterCallbackRef = useRef<(searchTerm: string) => void>(undefined);
+    filterCallbackRef.current = (searchTerm: string) => {
         const [normalizedSearchTerm, newFilteredEmojiList] = suggestEmojis(searchTerm);
 
         emojiListRef.current?.scrollToOffset({offset: 0, animated: false});
@@ -128,7 +130,12 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji, ref}: EmojiPickerMenuPro
         setHeaderIndices([]);
         setHighlightFirstEmoji(true);
         setIsUsingKeyboardMovement(false);
-    }, throttleTime);
+    };
+
+    // Stable throttled function that delegates to the latest callback via ref,
+    // preventing re-renders from recreating the throttle timer.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const filterEmojis = useMemo(() => throttle((text: string) => filterCallbackRef.current?.(text), throttleTime), []);
 
     const keyDownHandler = useCallback(
         (keyBoardEvent: KeyboardEvent) => {
@@ -330,7 +337,10 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji, ref}: EmojiPickerMenuPro
                     label={translate('common.search')}
                     accessibilityLabel={translate('common.search')}
                     role={CONST.ROLE.PRESENTATION}
-                    onChangeText={filterEmojis}
+                    onChangeText={(text: string) => {
+                        setSearchText(text);
+                        filterEmojis(text);
+                    }}
                     defaultValue=""
                     ref={searchInputRef}
                     autoFocus={shouldFocusInputOnScreenFocus}
@@ -355,6 +365,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji, ref}: EmojiPickerMenuPro
                 renderItem={renderItem}
                 extraData={[focusedIndex, preferredSkinTone]}
                 stickyHeaderIndices={headerIndices}
+                searchValue={searchText}
             />
         </View>
     );

src/components/SearchBar.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
+import useDebouncedAccessibilityAnnouncement from '@hooks/useDebouncedAccessibilityAnnouncement';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -25,6 +26,10 @@ function SearchBar({label, style, icon, inputValue, onChangeText, onSubmitEditin
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {translate} = useLocalize();
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['MagnifyingGlass']);
+    const noResultsMessage = translate('common.noResultsFoundMatching', inputValue);
+    const shouldAnnounceNoResults = !!shouldShowEmptyState && inputValue.length !== 0;
+
+    useDebouncedAccessibilityAnnouncement(noResultsMessage, shouldAnnounceNoResults, inputValue);
 
     return (
         <>
@@ -45,9 +50,14 @@ function SearchBar({label, style, icon, inputValue, onChangeText, onSubmitEditin
                     shouldHideClearButton={!inputValue?.length}
                 />
             </View>
-            {!!shouldShowEmptyState && inputValue.length !== 0 && (
+            {shouldAnnounceNoResults && (
                 <View style={[styles.ph5, styles.pt3, styles.pb5]}>
-                    <Text style={[styles.textNormal, styles.colorMuted]}>{translate('common.noResultsFoundMatching', inputValue)}</Text>
+                    <Text
+                        style={[styles.textNormal, styles.colorMuted]}
+                        aria-hidden
+                    >
+                        {noResultsMessage}
+                    </Text>
                 </View>
             )}
         </>

src/components/SelectionList/components/TextInput.tsx

@@ -6,7 +6,7 @@ import type {TextInputOptions} from '@components/SelectionList/types';
 import Text from '@components/Text';
 import BaseTextInput from '@components/TextInput';
 import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
-import useAccessibilityAnnouncement from '@hooks/useAccessibilityAnnouncement';
+import useDebouncedAccessibilityAnnouncement from '@hooks/useDebouncedAccessibilityAnnouncement';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import mergeRefs from '@libs/mergeRefs';
@@ -71,9 +71,8 @@ function TextInput({
     const isNoResultsFoundMessage = headerMessage === noResultsFoundText;
     const noData = dataLength === 0 && !shouldShowLoadingPlaceholder;
     const shouldShowHeaderMessage = !!shouldShowTextInput && !!headerMessage && (!isLoadingNewOptions || !isNoResultsFoundMessage || noData);
-    const shouldAnnounceNoResults = shouldShowHeaderMessage && isNoResultsFoundMessage;
 
-    useAccessibilityAnnouncement(headerMessage, shouldAnnounceNoResults, {shouldAnnounceOnNative: true});
+    useDebouncedAccessibilityAnnouncement(headerMessage ?? '', shouldShowHeaderMessage, value ?? '');
 
     const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const mergedRef = mergeRefs<BaseTextInputRef>(ref, optionsRef);
@@ -145,7 +144,12 @@ function TextInput({
             </View>
             {shouldShowHeaderMessage && (
                 <View style={[styles.ph5, styles.pb5, style?.headerMessageStyle]}>
-                    <Text style={[styles.textLabel, styles.colorMuted, styles.minHeight5]}>{headerMessage}</Text>
+                    <Text
+                        style={[styles.textLabel, styles.colorMuted, styles.minHeight5]}
+                        aria-hidden
+                    >
+                        {headerMessage}
+                    </Text>
                 </View>
             )}
         </>

src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx

@@ -13,9 +13,9 @@ import SectionList from '@components/SectionList';
 import {getListboxRole} from '@components/SelectionList/utils/getListboxRole';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
-import useAccessibilityAnnouncement from '@hooks/useAccessibilityAnnouncement';
 import useActiveElementRole from '@hooks/useActiveElementRole';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
+import useDebouncedAccessibilityAnnouncement from '@hooks/useDebouncedAccessibilityAnnouncement';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
@@ -1011,14 +1011,18 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
     const noResultsFoundText = translate('common.noResultsFound');
     const isNoResultsFoundMessage = headerMessage === noResultsFoundText;
     const shouldShowHeaderMessage = !!headerMessage && (!isLoadingNewOptions || !isNoResultsFoundMessage || (flattenedSections.allOptions.length === 0 && !shouldShowLoadingPlaceholder));
-    const shouldAnnounceNoResults = shouldShowHeaderMessage && isNoResultsFoundMessage;
 
-    useAccessibilityAnnouncement(headerMessage, shouldAnnounceNoResults, {shouldAnnounceOnNative: true});
+    useDebouncedAccessibilityAnnouncement(headerMessage, shouldShowHeaderMessage, textInputValue);
 
     const headerMessageContent = () =>
         shouldShowHeaderMessage && (
             <View style={headerMessageStyle ?? [styles.ph5, styles.pb5]}>
-                <Text style={[styles.textLabel, styles.colorMuted, styles.minHeight5]}>{headerMessage}</Text>
+                <Text
+                    style={[styles.textLabel, styles.colorMuted, styles.minHeight5]}
+                    aria-hidden
+                >
+                    {headerMessage}
+                </Text>
             </View>
         );
 

src/components/Table/TableBody.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {View} from 'react-native';
 import type {StyleProp, ViewProps, ViewStyle} from 'react-native';
 import Text from '@components/Text';
+import useDebouncedAccessibilityAnnouncement from '@hooks/useDebouncedAccessibilityAnnouncement';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {useTableContext} from './TableContext';
@@ -62,9 +63,16 @@ function TableBody<T>({contentContainerStyle, ...props}: TableBodyProps) {
 
     const message = getEmptyMessage();
 
+    useDebouncedAccessibilityAnnouncement(message, isEmptyResult, activeSearchString);
+
     const EmptyResultComponent = (
         <View style={[styles.ph5, styles.pt3, styles.pb5]}>
-            <Text style={[styles.textNormal, styles.colorMuted]}>{message}</Text>
+            <Text
+                style={[styles.textNormal, styles.colorMuted]}
+                aria-hidden
+            >
+                {message}
+            </Text>
         </View>
     );
 

src/hooks/useAccessibilityAnnouncement/index.ios.ts

@@ -1,10 +1,7 @@
 import type {ReactNode} from 'react';
 import {useEffect, useRef} from 'react';
 import {AccessibilityInfo} from 'react-native';
-
-type UseAccessibilityAnnouncementOptions = {
-    shouldAnnounceOnNative?: boolean;
-};
+import type UseAccessibilityAnnouncementOptions from './types';
 
 const DELAY_FOR_ACCESSIBILITY_TREE_SYNC = 100;
 

src/hooks/useAccessibilityAnnouncement/index.native.ts

@@ -1,10 +1,7 @@
 import type {ReactNode} from 'react';
 import {useEffect, useRef} from 'react';
 import {AccessibilityInfo} from 'react-native';
-
-type UseAccessibilityAnnouncementOptions = {
-    shouldAnnounceOnNative?: boolean;
-};
+import type UseAccessibilityAnnouncementOptions from './types';
 
 function useAccessibilityAnnouncement(message: string | ReactNode, shouldAnnounceMessage: boolean, options?: UseAccessibilityAnnouncementOptions) {
     const previousAnnouncedMessageRef = useRef('');