Screen Reader: Many Pages: The status message of no results found 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 to focus the Create tab and double-tap to activate it
3. Swipe to focus the Start chat button and double-tap to activate it
4. Swipe to focus the text field and type in any search query that yields no results
5. When loading is complete, note if the status message "No results found" is announced

Other Occurrences:

1. Wallet: Add Bank Account
2. Create Workspace > Company Cards: Add Card

Expected Result:

The status message 'No results found' should be announced once it is displayed.

Actual Result:

When searching for a query that yields no results, a message such as "No results found" is displayed visually but is not announced by screen readers.

Area issue was found in:

Group chat

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 on Android / AccessibilityInfo.announceForAccessibility on iOS to ensure the "No results found" message is announced immediately when it appears.
https://appt.org/en/docs/react-native/samples/accessibility-live-region
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

Bug7007953_1763624656960.No_results_found_status_message_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/7007953
Issue reported by: NA
Slack conversation: NA

Issue Owner

Current Issue Owner: @yuwenmemon

[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 a search yields no matches (e.g., Start Chat → type a query with no results), the “No results found” message appears visually but is not announced by screen readers, so users get no feedback that the list is empty.

What is the root cause of that problem?

The shared SelectionList header message is rendered as plain text without any live‑region behavior or announcement, so dynamic updates are silent to TalkBack/VoiceOver.

App/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx

Lines 999 to 1005 in 9618ba6

	const headerMessageContent = () =>
	(!isLoadingNewOptions || headerMessage !== translate('common.noResultsFound') || (flattenedSections.allOptions.length === 0 && !showLoadingPlaceholder)) &&
	!!headerMessage && (
	<View style={headerMessageStyle ?? [styles.ph5, styles.pb5]}>
	<Text style={[styles.textLabel, styles.colorMuted, styles.minHeight5]}>{headerMessage}</Text>
	</View>
	);

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

Lines 69 to 71 in 9618ba6

	const resultsFound = headerMessage !== translate('common.noResultsFound');
	const noData = dataLength === 0 && !showLoadingPlaceholder;
	const shouldShowHeaderMessage = !!headerMessage && (!isLoadingNewOptions || resultsFound || noData);

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

Lines 140 to 144 in 9618ba6

	{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?

Make “No results found” a live region on Android and announce it on iOS when it appears. Scope the behavior to the common.noResultsFound text so we don’t announce unrelated header messages.

---

App/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx

Lines 999 to 1005 in 9618ba6

	const headerMessageContent = () =>
	(!isLoadingNewOptions || headerMessage !== translate('common.noResultsFound') || (flattenedSections.allOptions.length === 0 && !showLoadingPlaceholder)) &&
	!!headerMessage && (
	<View style={headerMessageStyle ?? [styles.ph5, styles.pb5]}>
	<Text style={[styles.textLabel, styles.colorMuted, styles.minHeight5]}>{headerMessage}</Text>
	</View>
	);

+ const noResultsFoundText = translate('common.noResultsFound');
+ const shouldShowHeaderMessage =
+     !!headerMessage &&
+     (!isLoadingNewOptions || headerMessage !== noResultsFoundText || (flattenedSections.allOptions.length === 0 && !showLoadingPlaceholder));
+ const shouldAnnounceNoResults = shouldShowHeaderMessage && headerMessage === noResultsFoundText;
+ const previousHeaderMessage = usePrevious(headerMessage);
+ const previousShouldShowHeaderMessage = usePrevious(shouldShowHeaderMessage);
+
+ useEffect(() => {
+     if (!shouldAnnounceNoResults || Platform.OS !== 'ios') {
+         return;
+     }
+     AccessibilityInfo.isScreenReaderEnabled().then((isEnabled) => {
+         if (!isEnabled) {
+             return;
+         }
+         if (headerMessage === previousHeaderMessage && previousShouldShowHeaderMessage) {
+             return;
+         }
+         AccessibilityInfo.announceForAccessibility(headerMessage);
+     });
+ }, [headerMessage, previousHeaderMessage, previousShouldShowHeaderMessage, shouldAnnounceNoResults]);
...
- <Text style={[styles.textLabel, styles.colorMuted, styles.minHeight5]}>{headerMessage}</Text>
+ <Text
+     style={[styles.textLabel, styles.colorMuted, styles.minHeight5]}
+     accessibilityLiveRegion={shouldAnnounceNoResults ? 'polite' : undefined}
+ >
+     {headerMessage}
+ </Text>

---

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

Lines 69 to 71 in 9618ba6

	const resultsFound = headerMessage !== translate('common.noResultsFound');
	const noData = dataLength === 0 && !showLoadingPlaceholder;
	const shouldShowHeaderMessage = !!headerMessage && (!isLoadingNewOptions || resultsFound || noData);

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

Lines 140 to 144 in 9618ba6

	{shouldShowHeaderMessage && (
	<View style={[styles.ph5, styles.pb5, style?.headerMessageStyle]}>
	<Text style={[styles.textLabel, styles.colorMuted, styles.minHeight5]}>{headerMessage}</Text>
	</View>
	)}

+ const noResultsFoundText = translate('common.noResultsFound');
- const resultsFound = headerMessage !== translate('common.noResultsFound');
+ const resultsFound = headerMessage !== noResultsFoundText;
  const noData = dataLength === 0 && !showLoadingPlaceholder;
  const shouldShowHeaderMessage = !!headerMessage && (!isLoadingNewOptions || resultsFound || noData);
+ const shouldAnnounceNoResults = shouldShowHeaderMessage && headerMessage === noResultsFoundText;
+ const previousHeaderMessage = usePrevious(headerMessage);
+ const previousShouldShowHeaderMessage = usePrevious(shouldShowHeaderMessage);
+
+ useEffect(() => {
+     if (!shouldAnnounceNoResults || Platform.OS !== 'ios') {
+         return;
+     }
+     AccessibilityInfo.isScreenReaderEnabled().then((isEnabled) => {
+         if (!isEnabled) {
+             return;
+         }
+         if (headerMessage === previousHeaderMessage && previousShouldShowHeaderMessage) {
+             return;
+         }
+         AccessibilityInfo.announceForAccessibility(headerMessage);
+     });
+ }, [headerMessage, previousHeaderMessage, previousShouldShowHeaderMessage, shouldAnnounceNoResults]);
...
- <Text style={[styles.textLabel, styles.colorMuted, styles.minHeight5]}>{headerMessage}</Text>
+ <Text
+     style={[styles.textLabel, styles.colorMuted, styles.minHeight5]}
+     accessibilityLiveRegion={shouldAnnounceNoResults ? 'polite' : undefined}
+ >
+     {headerMessage}
+ </Text>

---

Video demo of the fix:

announces-no-results-found-on-input.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. Walking. Toward. The. Light...

[suneox]

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

[melvin-bot]

@suneox Whoops! This issue is 2 days overdue. Let's get this updated quick!