[Due for payment 2026-04-03] [$500] Screen Reader: Global: The availability of displayed search suggestions is not announced

[elisenwazuoke]

Action Performed:

Precondition: User is logged in

1. Using VoiceOver on iOS or TalkBack on Android, open the app
2. Swipe right to focus the Account tab and double-tap to activate it
3. Swipe right to focus the Profile button and double-tap to activate it
4. Swipe right to focus the Status menu item and double-tap to activate it
5. Swipe right to focus the Vacation delegate menu item and double-tap to activate it
6. Note if the available list of suggestions is announced
7. Swipe right to focus the text field and enter any search query
8. After loading is complete, note if the search result suggestions are announced

This is a global issue affecting all screen with text fields and search result suggestions
Examples:

1. Search
2. Group Chat: Start Chat
3. Profile: Country
4. Profile: Timezone
5. Wallet: Add Bank Account
6. Reports
7. Create Workspace > Company Cards: Add Card

Expected Result:

When search suggestions appear, both initial suggestions (before typing) and resulting suggestions (after entering a query), screen readers should announce that there are available suggestions. Examples:
"Search suggestions available. 12 results".

This announcement should occur automatically, shortly after the user has finished typing and loading is complete, without requiring the user to explore the screen manually.

Actual Result:

Before typing, the suggestions list is visually shown but not announced.
After entering a search query, new results appear, but screen readers provide no status update or hint that results are available.

Users must discover suggestions manually by swiping, which may give the impression that no results exist.

Area issue was found in:

Profile > Status

Failed WCAG checkpoints

WCAG 4.1.3 Status Messages
https://www.w3.org/WAI/WCAG22/Understanding/status-messages

User impact:

When appropriate roles or properties are assigned to status messages, the new content is spoken by screen readers in such a way as to assist blind and low vision users. Assigning proper roles or properties to status messages provides possible future uses and personalization opportunities, such as the potential to be exploited by assistive technologies created for users with some cognitive disabilities.

Suggested resolution:

Use accessibilityLiveRegion="polite" on Android and AccessibilityInfo.announceForAccessibility on iOS to notify screen readers whenever the suggestions list changes to ensure they announce them, for example:

• 'Search suggestions available. 12 results'
  https://appt.org/en/docs/react-native/samples/accessibility-live-region
  https://reactnative.dev/docs/accessibility#accessibilityliveregion-android
  https://reactnative.dev/docs/accessibilityinfo#announceforaccessibility

Environment(s)

Apple iPhone 14 Pro - iOS 18.7.1, Wi-Fi - Native (No mobile browser)
Samsung Galaxy Note10 Plus - Android 12, H0T Mobile - Native (No mobile browser)

Screenshots/Videos

Bug7006896_1763522947278.Displayed_search_result_suggestions_are_not_announced.mp4

Version Number: Production
Reproducible in staging?: NA
Reproducible in production?: Yes
Email or phone of affected tester (no customers): NA
Logs: https://stackoverflow.com/c/expensify/questions/4856 NA
Notes/Photos/Videos: Any additional supporting documentation Yes
Expensify/Expensify Issue URL: https://platform.applause.com/company/12102/products/36628/community-issues/7006896
Issue reported by: NA
Slack conversation: NA

Issue Owner

Current Issue Owner: @mallenexpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022032270284819723181
• Upwork Job ID: 2032270284819723181
• Last Price Increase: 2026-03-13
• Automatic offers:
• aimane-chnaif | Contributor | 110767844

[melvin-bot]

This issue has not been updated in over 15 days. eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[marufsharifi]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When search suggestions appear (initially or after typing), screen readers do not announce that suggestions are available, so users don’t know the list updated.

What is the root cause of that problem?

Suggestion lists update visually, but there is no live‑region or announcement when the data changes, so screen readers never hear “suggestions available.” This happens in two places:

1. Standard SelectionList text input (the suggestions list changes, but there’s no accessibilityLiveRegion or announceForAccessibility, so the update is silent.)
2. Search Router autocomplete list (input is external, so no announcement path)
   

   App/src/components/SelectionList/components/TextInput.tsx

   Line 71 in 9618ba6

   const shouldShowHeaderMessage = !!headerMessage && (!isLoadingNewOptions || resultsFound || noData);

   
   

   App/src/components/SelectionList/components/TextInput.tsx

   Lines 113 to 146 in 9618ba6

   	return (
   	<>
   	<View style={[styles.ph5, styles.pb3, style?.containerStyle]}>
   	<BaseTextInput
   	ref={mergedRef}
   	onKeyPress={onKeyPress}
   	onFocus={handleFocus}
   	onBlur={handleBlur}
   	label={label}
   	accessibilityLabel={accessibilityLabel}
   	hint={hint}
   	role={CONST.ROLE.PRESENTATION}
   	value={value}
   	placeholder={placeholder}
   	maxLength={maxLength}
   	onChangeText={handleTextInputChange}
   	inputMode={inputMode}
   	selectTextOnFocus
   	spellCheck={false}
   	onSubmitEditing={onSubmit}
   	submitBehavior={dataLength ? 'blurAndSubmit' : 'submit'}
   	isLoading={isLoading}
   	testID="selection-list-text-input"
   	errorText={errorText}
   	shouldInterceptSwipe={false}
   	/>
   	</View>
   	{shouldShowHeaderMessage && (
   	<View style={[styles.ph5, styles.pb5, style?.headerMessageStyle]}>
   	<Text style={[styles.textLabel, styles.colorMuted, styles.minHeight5]}>{headerMessage}</Text>
   	</View>
   	)}
   	</>
   	);

What changes do you think we should make in order to solve the problem?

• Add a localized announcement string (search.suggestionsAvailable) with count + optional query.
• Announce suggestions via:
  • iOS: AccessibilityInfo.announceForAccessibility
  • Android: a hidden live‑region <Text> that updates when suggestions change
• Avoid overcounting by excluding the Search Router “search query” row from the count.
• Delay the announcement slightly when the input is focused so it doesn’t get interrupted by “editing…” announcement.

diff --git a/src/components/SelectionList/components/TextInput.tsx b/src/components/SelectionList/components/TextInput.tsx
index ae4e2548541..34df9a9fa95 100644
--- a/src/components/SelectionList/components/TextInput.tsx
+++ b/src/components/SelectionList/components/TextInput.tsx
@@ -1,7 +1,7 @@
 import {useFocusEffect} from '@react-navigation/native';
-import React, {useCallback, useRef} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import type {TextInputKeyPressEvent} from 'react-native';
-import {View} from 'react-native';
+import {AccessibilityInfo, Platform, View} from 'react-native';
@@
     const shouldShowHeaderMessage = !!headerMessage && (!isLoadingNewOptions || resultsFound || noData);
+    const trimmedSearchValue = value?.trim() ?? '';
+    const suggestionsCount = dataLength ?? 0;
+    const shouldAnnounceSuggestions = !!shouldShowTextInput && !isLoadingNewOptions && suggestionsCount > 0;
+    const suggestionsAnnouncement = shouldAnnounceSuggestions
+        ? translate('search.suggestionsAvailable', suggestionsCount, trimmedSearchValue || undefined)
+        : '';
@@
+    const lastAnnouncedSuggestionsRef = useRef('');
+    const [androidSuggestionsAnnouncement, setAndroidSuggestionsAnnouncement] = useState('');
+    const suggestionsAnnouncementTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const isFocusedRef = useRef(false);
@@
-    const handleFocus = useCallback(() => {
+    const handleFocus = useCallback(() => {
+        isFocusedRef.current = true;
         onFocusChange(true);
     }, [onFocusChange]);
@@
-    const handleBlur = useCallback(() => {
+    const handleBlur = useCallback(() => {
+        isFocusedRef.current = false;
         onFocusChange(false);
     }, [onFocusChange]);
@@
+    useEffect(() => {
+        if (suggestionsAnnouncementTimeoutRef.current) {
+            clearTimeout(suggestionsAnnouncementTimeoutRef.current);
+            suggestionsAnnouncementTimeoutRef.current = null;
+        }
+        if (!shouldAnnounceSuggestions) {
+            lastAnnouncedSuggestionsRef.current = '';
+            setAndroidSuggestionsAnnouncement('');
+            return;
+        }
+        if (suggestionsAnnouncement === lastAnnouncedSuggestionsRef.current) {
+            return;
+        }
+        lastAnnouncedSuggestionsRef.current = suggestionsAnnouncement;
+        const delay = isFocusedRef.current ? CONST.ANIMATED_TRANSITION * 2 : 0;
+        suggestionsAnnouncementTimeoutRef.current = setTimeout(() => {
+            if (Platform.OS === 'ios') {
+                AccessibilityInfo.announceForAccessibility(suggestionsAnnouncement);
+                return;
+            }
+            if (Platform.OS === 'android') {
+                setAndroidSuggestionsAnnouncement(suggestionsAnnouncement);
+            }
+        }, delay);
+        return () => {
+            if (!suggestionsAnnouncementTimeoutRef.current) {
+                return;
+            }
+            clearTimeout(suggestionsAnnouncementTimeoutRef.current);
+            suggestionsAnnouncementTimeoutRef.current = null;
+        };
+    }, [shouldAnnounceSuggestions, suggestionsAnnouncement]);
@@
+            {Platform.OS === 'android' && shouldAnnounceSuggestions && (
+                <Text
+                    style={styles.visuallyHidden}
+                    accessibilityLiveRegion="polite"
+                >
+                    {androidSuggestionsAnnouncement}
+                </Text>
+            )}
diff --git a/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx b/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx
index 24020a1e798..c9fcb7bc80f 100644
--- a/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx
+++ b/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx
@@ -3,7 +3,7 @@
 import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import type {LayoutChangeEvent, SectionList as RNSectionList, TextInput as RNTextInput, SectionListData, SectionListRenderItemInfo, TextInputKeyPressEvent} from 'react-native';
-import {View} from 'react-native';
+import {AccessibilityInfo, Platform, View} from 'react-native';
@@
+    const lastAnnouncedSuggestionsRef = useRef('');
+    const suggestionsAnnouncementTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const [androidSuggestionsAnnouncement, setAndroidSuggestionsAnnouncement] = useState('');
@@
+    const trimmedSearchValue = textInputValue.trim();
+    const {suggestionsCount, hasSearchRouterItems} = useMemo(() => {
+        let count = 0;
+        let hasSearchItems = false;
+        for (const item of flattenedSections.allOptions) {
+            if (item && typeof item === 'object' && 'searchItemType' in item) {
+                hasSearchItems = true;
+                if (item.searchItemType === CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.SEARCH) {
+                    continue;
+                }
+            }
+            count += 1;
+        }
+        return {suggestionsCount: count, hasSearchRouterItems: hasSearchItems};
+    }, [flattenedSections.allOptions]);
+    const shouldAnnounceSuggestionsMessage = (shouldShowTextInput || hasSearchRouterItems) && !isLoadingNewOptions && suggestionsCount > 0;
+    const suggestionsAnnouncement = useMemo(() => {
+        if (!shouldAnnounceSuggestionsMessage) {
+            return '';
+        }
+        return translate('search.suggestionsAvailable', suggestionsCount, trimmedSearchValue || undefined);
+    }, [shouldAnnounceSuggestionsMessage, suggestionsCount, translate, trimmedSearchValue]);
+
+    useEffect(() => {
+        if (suggestionsAnnouncementTimeoutRef.current) {
+            clearTimeout(suggestionsAnnouncementTimeoutRef.current);
+            suggestionsAnnouncementTimeoutRef.current = null;
+        }
+        if (!shouldAnnounceSuggestionsMessage) {
+            lastAnnouncedSuggestionsRef.current = '';
+            setAndroidSuggestionsAnnouncement('');
+            return;
+        }
+        if (suggestionsAnnouncement === lastAnnouncedSuggestionsRef.current) {
+            return;
+        }
+        lastAnnouncedSuggestionsRef.current = suggestionsAnnouncement;
+        const delay = isTextInputFocusedRef.current ? CONST.ANIMATED_TRANSITION * 2 : 0;
+        suggestionsAnnouncementTimeoutRef.current = setTimeout(() => {
+            if (Platform.OS === 'ios') {
+                AccessibilityInfo.announceForAccessibility(suggestionsAnnouncement);
+                return;
+            }
+            if (Platform.OS === 'android') {
+                setAndroidSuggestionsAnnouncement(suggestionsAnnouncement);
+            }
+        }, delay);
+        return () => {
+            if (!suggestionsAnnouncementTimeoutRef.current) {
+                return;
+            }
+            clearTimeout(suggestionsAnnouncementTimeoutRef.current);
+            suggestionsAnnouncementTimeoutRef.current = null;
+        };
+    }, [shouldAnnounceSuggestionsMessage, suggestionsAnnouncement]);
@@
+            {Platform.OS === 'android' && shouldAnnounceSuggestionsMessage && (
+                <Text
+                    style={styles.visuallyHidden}
+                    accessibilityLiveRegion="polite"
+                >
+                    {androidSuggestionsAnnouncement}
+                </Text>
+            )}
diff --git a/src/languages/en.ts b/src/languages/en.ts
index e9750ea9ad0..da2dfae66e4 100644
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -7029,6 +7029,10 @@ const translations = {
         searchIn: 'Search in',
         searchPlaceholder: 'Search for something',
         suggestions: 'Suggestions',
+        suggestionsAvailable: (count: number, searchTerm?: string) =>
+            searchTerm
+                ? `Search suggestions available. ${count} ${count === 1 ? 'result' : 'results'} for "${searchTerm}".`
+                : `Search suggestions available. ${count} ${count === 1 ? 'result' : 'results'}.`,
diff --git a/src/languages/es.ts b/src/languages/es.ts
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
diff --git a/src/languages/de.ts b/src/languages/de.ts
diff --git a/src/languages/it.ts b/src/languages/it.ts
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts

---

Video demo of the fix:

annouces-search-suggestions-and-results.mp4

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

[melvin-bot]

@suneox 12 days overdue now... This issue's end is nigh!

[suneox]

This issue still depends on #77572, and we’re still working on that PR.