Implement accessibility changes for search suggestions by ShridharGoel · Pull Request #85296 · Expensify/App

ShridharGoel · 2026-03-14T18:12:15Z

Explanation of Change

Implement accessibility changes for suggestions

Fixed Issues

$ #77390
PROPOSAL:

Tests

Precondition: User is logged in

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

Verify that no errors appear in the JS console

Offline tests

QA Steps

Same as tests.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Screen.Recording.2026-03-17.at.12.50.20.AM.mov

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

melvin-bot · 2026-03-14T18:12:22Z

Hey, I noticed you changed src/languages/en.ts in a PR from a fork. For security reasons, translations are not generated automatically for PRs from forks.

If you want to automatically generate translations for other locales, an Expensify employee will have to:

Look at the code and make sure there are no malicious changes.
Run the Generate static translations GitHub workflow. If you have write access and the K2 extension, you can simply click: [this button]

Alternatively, if you are an external contributor, you can run the translation script locally with your own OpenAI API key. To learn more, try running:

npx ts-node ./scripts/generateTranslations.ts --help

Typically, you'd want to translate only what you changed by running npx ts-node ./scripts/generateTranslations.ts --compare-ref main

codecov · 2026-03-14T18:36:40Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
...ListWithSections/BaseSelectionListWithSections.tsx	`93.90% <ø> (ø)`
.../components/SelectionList/components/TextInput.tsx	`100.00% <100.00%> (ø)`
src/components/Search/SearchAutocompleteList.tsx	`73.78% <70.00%> (+2.02%)`	⬆️
src/hooks/useAccessibilityAnnouncement/index.ts	`0.00% <0.00%> (ø)`
... and 291 files with indirect coverage changes

rushatgabhane · 2026-03-14T22:27:48Z

@ShridharGoel can you borrow stuff from here - https://github.com/Expensify/App/pull/85166/changes

Feels like a lot of overlap in functions. Eg: the hook useAccessibilityAnnouncement

Wdyt? we'll resolve conflicts if they happen

rushatgabhane · 2026-03-14T22:28:23Z

cc @Krishna2323 if you can advise us here

rushatgabhane · 2026-03-14T22:28:56Z

@MelvinBot suggest changes #85296 (comment)

MelvinBot · 2026-03-14T22:31:45Z

@rushatgabhane @ShridharGoel — Good catch, there is significant overlap between this PR and #85166. Here's a detailed breakdown and suggestions:

Overlap Summary

Both PRs implement accessibility announcements for screen readers, but they take different architectural approaches:

Concern	PR #85166 (`Krishna2323`)	PR #85296 (this PR)
Approach	Reusable hook (`useDebouncedAccessibilityAnnouncement`)	Component-based (`SuggestionsAvailabilityAnnouncement` + 3 platform helpers)
Debouncing	`useDebouncedValue` hook + debounced announcement hook	Manual timeout + `lastAnnouncementRef` dedup in component
Web announcement	Enhances existing `useAccessibilityAnnouncement` (hidden `aria-live` div)	Hidden `<Text accessibilityLiveRegion="polite">` component
iOS announcement	`AccessibilityInfo.announceForAccessibility` (via existing hook)	`AccessibilityInfo.announceForAccessibility` (via platform helper)
Android announcement	`AccessibilityInfo.announceForAccessibility` (via existing hook)	Clear-then-set live region text with 50ms delay
"No results" announcements	Yes (many pages: AddressSearch, EmojiPicker, SearchBar, TextInput, SelectionList, TableBody, WorkspaceWorkflows)	No
"Suggestions available" announcements	No	Yes (SearchAutocompleteList, TextInput, BaseSelectionListWithSections)

Specific Suggestions

1. Reuse `useDebouncedAccessibilityAnnouncement` instead of `SuggestionsAvailabilityAnnouncement`

The new SuggestionsAvailabilityAnnouncement component (83 lines) + 3 platform helper files (37 lines) essentially reimplement what useDebouncedAccessibilityAnnouncement from #85166 already does. The hook approach is lighter and more composable:

// Instead of the SuggestionsAvailabilityAnnouncement component, you could do:
const suggestionsAnnouncement = suggestionsCount > 0
    ? translate('search.suggestionsAvailable', {count: suggestionsCount}, query)
    : '';
useDebouncedAccessibilityAnnouncement(suggestionsAnnouncement, suggestionsCount > 0, searchValue);

This would eliminate 4 new files:

SuggestionsAvailabilityAnnouncement.tsx
SuggestionsAvailabilityAnnouncementHelper.ts
SuggestionsAvailabilityAnnouncementHelper.android.ts
SuggestionsAvailabilityAnnouncementHelper.ios.ts

2. Coordinate on shared files

Both PRs modify these files and will conflict:

src/components/SelectionList/components/TextInput.tsx — fix: Screen Readers: Many Pages: The status message of no results is not announced. #85166 replaces useAccessibilityAnnouncement with useDebouncedAccessibilityAnnouncement and adds aria-hidden; this PR adds SuggestionsAvailabilityAnnouncement
src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx — same situation

If this PR adopts the hook from #85166, the modifications to these files become additive rather than conflicting.

3. Keep what's unique to this PR

This PR does add value beyond #85166:

"Suggestions available" announcements — announcing the count of suggestions as the user types in search, which fix: Screen Readers: Many Pages: The status message of no results is not announced. #85166 doesn't cover
suggestionsAvailable translation key — the new localized string for suggestion count announcements
useMemo for sections in SearchAutocompleteList — performance improvement wrapping sections generation
dataLength → itemsCount fix in BaseSelectionListWithSections — corrects what gets passed to TextInput

4. Consider `aria-hidden` on visible text

PR #85166 adds aria-hidden to visible "no results" text elements to prevent screen readers from reading both the visible text AND the programmatic announcement. This PR should consider the same pattern for consistency, especially if the suggestions count is displayed visually anywhere.

Recommended Path Forward

Wait for or coordinate with fix: Screen Readers: Many Pages: The status message of no results is not announced. #85166 to land first (it's more foundational — enhances core hooks used across many pages)
Rebase this PR on top of it
Replace the SuggestionsAvailabilityAnnouncement component with calls to useDebouncedAccessibilityAnnouncement
Keep the unique parts: suggestionsAvailable translations, useMemo sections optimization, suggestion counting logic

This would significantly reduce the diff size and avoid maintaining two parallel announcement systems.

ShridharGoel · 2026-03-14T23:00:46Z

@rushatgabhane So should we hold one till the other is done?

rushatgabhane · 2026-03-14T23:59:35Z

@ShridharGoel no we don't need to hold

You can use that PR as the base and build on top of it and sync it if there are changes

rushatgabhane · 2026-03-16T14:22:17Z

or you can copy paste relevant stuff if that is simpler

melvin-bot · 2026-03-16T19:58:38Z

@aimane-chnaif Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

…ility77390

ShridharGoel · 2026-03-16T20:05:47Z

Will need help from someone with a physical iPhone to test on iOS.

aimane-chnaif · 2026-03-16T20:08:53Z

Will need help from someone with a physical iPhone to test on iOS.

I have physical iPhone to test

github-actions · 2026-03-16T20:09:50Z

+        return {sections: nextSections, styledRecentReports: nextStyledRecentReports};
+    }, [autocompleteQueryValue, autocompleteSuggestions, expensifyIcons, getAdditionalSections, recentReportsOptions, recentSearchesData, searchOptions, searchQueryItem, styles, translate]);

    const sectionItemText = sections?.at(1)?.data?.[0]?.text ?? '';


❌ CLEAN-REACT-PATTERNS-0 (docs)

React Compiler is enabled and will automatically memoize this pure computation. firstRecentReportFlatIndex is derived from firstRecentReportKey and sections with no side effects -- the compiler handles this without manual useMemo.

Remove the useMemo and compute the value directly:

let firstRecentReportFlatIndex = -1; if (firstRecentReportKey) { let flatIndex = 0; for (const section of sections) { // ... existing iteration logic ... } }

Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.

github-actions · 2026-03-16T20:09:52Z

+    const timeout = setTimeout(() => {
+        setLiveRegionAnnouncement(announcement);
+        setAnnouncementTimeout(null);
+    }, 50);


❌ CONSISTENCY-2 (docs)

The value 50 is a magic number used as a setTimeout delay for TalkBack live region updates. While the comment above explains the general strategy, the numeric value should be extracted into a named constant for readability and maintainability.

Extract it into a named constant:

const TALKBACK_LIVE_REGION_UPDATE_DELAY_MS = 50; // Then use: }, TALKBACK_LIVE_REGION_UPDATE_DELAY_MS);

Consider also adding it to CONST.TIMING if it may be reused elsewhere.

Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.

aimane-chnaif · 2026-03-17T19:34:07Z

Please fix conflict

…ility77390 # Conflicts: # Mobile-Expensify # src/components/SelectionList/components/TextInput.tsx # src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx # src/hooks/useAccessibilityAnnouncement/index.ts # src/hooks/useDebouncedAccessibilityAnnouncement.ts # src/hooks/useDebouncedValue.ts

ShridharGoel · 2026-03-19T21:29:04Z

Just tried after pulling latest main. Can you check once by waiting a few seconds after the loading is complete before changing the query?

Screen.Recording.2026-03-20.at.2.56.52.AM.mov

aimane-chnaif · 2026-03-19T21:40:49Z

Just tried after pulling latest main. Can you check once by waiting a few seconds after the loading is complete before changing the query?

Screen.Recording.2026-03-20.at.2.56.52.AM.mov

Still not working for me. Let's test in adhoc build

melvin-bot · 2026-03-19T21:41:07Z

We did not find an internal engineer to review this PR, trying to assign a random engineer to #77390 as well as to this PR... Please reach out for help on Slack if no one gets assigned!

github-actions · 2026-03-20T18:21:12Z

🚧 @mountiny has triggered a test Expensify/App build. You can view the workflow run here.

aimane-chnaif · 2026-03-20T19:17:33Z

Just tested adhoc build. MacOS VoiceOver, Google Chrome
@ShridharGoel Still no announcement in search router, while works in reports search.

ShridharGoel · 2026-03-20T19:41:09Z

Still working for me. Maybe we can get it QA tested.

Screen.Recording.2026-03-21.at.1.10.09.AM.mov

rushatgabhane · 2026-03-24T02:55:29Z

@ShridharGoel bump

aimane-chnaif · 2026-03-24T02:58:08Z

@rushatgabhane can we ask QA (or you) to test this page on MacOS VoiceOver?
I reproduced on my browser but not on @ShridharGoel's.
Otherwise looks good.

rushatgabhane · 2026-03-24T17:19:00Z

yep on Chrome macos it doesn't workl

aimane-chnaif · 2026-03-25T16:47:06Z

@ShridharGoel please pull main. Lint failing

github-actions · 2026-03-25T20:47:41Z

🚧 @tylerkaraszewski has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2026-03-25T20:52:39Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #85296.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-96200e6-8564fac-d19985d2da43c736ff746c08c29fae76054cc951/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-96200e6-8564fac-4403dc7df11ee3115f6a3a8c148a2e970be8585f/index.html

Web 🕸️
https://85296.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

OSBotify · 2026-03-25T20:54:27Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2026-03-26T14:42:29Z

🚀 Deployed to staging by https://github.com/tylerkaraszewski in version: 9.3.49-0 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

Bundle Size Analysis (Sentry):

Android
iOS

OSBotify · 2026-03-27T12:24:37Z

🚀 Deployed to production by https://github.com/grgia in version: 9.3.49-2 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

Implement accessibility changes for suggestions

468e57c

melvin-bot Bot assigned ShridharGoel Mar 14, 2026

Implement accessibility changes for search suggestions

5991c37

Improvements

8307d98

ShridharGoel marked this pull request as ready for review March 16, 2026 19:58

ShridharGoel requested review from a team as code owners March 16, 2026 19:58

melvin-bot Bot requested review from aimane-chnaif and removed request for a team March 16, 2026 19:58

melvin-bot Bot requested review from heyjennahay and removed request for a team March 16, 2026 19:58

ShridharGoel added 2 commits March 17, 2026 01:28

Web updates

f5a328a

Merge branch 'main' of https://github.com/Expensify/App into accessib…

3a804f3

…ility77390

github-actions Bot reviewed Mar 16, 2026

View reviewed changes

Fix fragment children warning

7db6af5

aimane-chnaif approved these changes Mar 19, 2026

View reviewed changes

melvin-bot Bot requested a review from tylerkaraszewski March 19, 2026 21:41

This comment has been minimized.

Sign in to view

aimane-chnaif reviewed Mar 22, 2026

View reviewed changes

Comment thread src/components/SelectionList/components/TextInput.tsx Outdated

MelvinBot mentioned this pull request Mar 23, 2026

[Due for payment 2026-04-01] SR: Settings - Security: The availability of search suggestions is not announced #74840

Closed

situchan mentioned this pull request Mar 24, 2026

Announce dynamic content for screen readers (search suggestions + timer) #84963

Closed

52 tasks

ShridharGoel added 2 commits March 24, 2026 11:12

Guard suggestions announcements until the input is visible

819ad95

Merge main

9adc6e7

Mount accessibility announcements inside active modal dialogs

b41e509

rushatgabhane requested a review from aimane-chnaif March 24, 2026 19:14

Fix lint

2ef3782

tylerkaraszewski approved these changes Mar 25, 2026

View reviewed changes

tylerkaraszewski merged commit 96200e6 into Expensify:main Mar 25, 2026
32 checks passed

OSBotify mentioned this pull request Mar 26, 2026

Deploy Checklist: New Expensify 2026-03-26 #86439

Closed

29 tasks

melvin-bot Bot mentioned this pull request Mar 27, 2026

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

Closed

Conversation

ShridharGoel commented Mar 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot Bot commented Mar 14, 2026

Uh oh!

codecov Bot commented Mar 14, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

rushatgabhane commented Mar 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rushatgabhane commented Mar 14, 2026

Uh oh!

rushatgabhane commented Mar 14, 2026

Uh oh!

MelvinBot commented Mar 14, 2026

Overlap Summary

Specific Suggestions

1. Reuse useDebouncedAccessibilityAnnouncement instead of SuggestionsAvailabilityAnnouncement

2. Coordinate on shared files

3. Keep what's unique to this PR

4. Consider aria-hidden on visible text

Recommended Path Forward

Uh oh!

ShridharGoel commented Mar 14, 2026

Uh oh!

rushatgabhane commented Mar 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rushatgabhane commented Mar 16, 2026

Uh oh!

melvin-bot Bot commented Mar 16, 2026

Uh oh!

ShridharGoel commented Mar 16, 2026

Uh oh!

aimane-chnaif commented Mar 16, 2026

Uh oh!

github-actions Bot Mar 16, 2026

Choose a reason for hiding this comment

❌ CLEAN-REACT-PATTERNS-0 (docs)

Uh oh!

github-actions Bot Mar 16, 2026

Choose a reason for hiding this comment

❌ CONSISTENCY-2 (docs)

Uh oh!

aimane-chnaif commented Mar 17, 2026

Uh oh!

ShridharGoel commented Mar 19, 2026

Uh oh!

aimane-chnaif commented Mar 19, 2026

Uh oh!

melvin-bot Bot commented Mar 19, 2026

Uh oh!

github-actions Bot commented Mar 20, 2026

Uh oh!

This comment has been minimized.

aimane-chnaif commented Mar 20, 2026

Uh oh!

ShridharGoel commented Mar 20, 2026

Uh oh!

Uh oh!

rushatgabhane commented Mar 24, 2026

Uh oh!

aimane-chnaif commented Mar 24, 2026

Uh oh!

rushatgabhane commented Mar 24, 2026

Uh oh!

aimane-chnaif commented Mar 25, 2026

Uh oh!

Uh oh!

github-actions Bot commented Mar 25, 2026

ShridharGoel commented Mar 14, 2026 •

edited

Loading

codecov Bot commented Mar 14, 2026 •

edited by github-actions Bot

Loading

rushatgabhane commented Mar 14, 2026 •

edited

Loading

1. Reuse `useDebouncedAccessibilityAnnouncement` instead of `SuggestionsAvailabilityAnnouncement`

4. Consider `aria-hidden` on visible text

rushatgabhane commented Mar 14, 2026 •

edited

Loading