fix: Screen Readers: Many Pages: The status message of no results is not announced.#85166
Conversation
…not announced. Signed-off-by: krishna2323 <belivethatkg@gmail.com>
|
Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers! |
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
|
@codex review |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 1a417b0e23
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
…picker, workflows page, and import contacts Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Codecov Report❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.
|
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
…ements on Android Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
melvin-bot
bot
requested review from
aimane-chnaif
and removed request for
a team
|
@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] |
melvin-bot
bot
requested review from
joekaufmanexpensify
and removed request for
a team
|
@aimane-chnaif The PR is ready for review. @rushatgabhane I couldn’t test the iOS native app. Should that be tested after the PR is merged, or can QA test it on the PR? |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8c1a333df4
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
…ic into reusable hook. Signed-off-by: krishna2323 <belivethatkg@gmail.com>
I tested on my iPhone and works well. |
|
Thanks a lot @aimane-chnaif 🙇🏻 |
|
On web, "No results found" announcement is cut off in the middle by full search keyword reading. Maybe adjust timeout? i.e. I type web.mov |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f2343cf320
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| onChangeText={(text: string) => { | ||
| setSearchText(text); | ||
| filterEmojis(text); |
There was a problem hiding this comment.
Updating searchText inside onChangeText forces a re-render on every keystroke, which recreates filterEmojis (a lodashDebounce defined in render scope) before its previous timer fires. That means each rapid keypress schedules independent stale callbacks, so the list can momentarily render outdated results (a then ab before abc) and do extra filtering work instead of honoring a single debounced update after typing pauses.
Useful? React with 👍 / 👎.
|
No product review needed |
🔍 Code Review — PR #85166Summary: This PR adds screen reader announcements for "No results found" across multiple components, implementing a debounced announcement pattern via two new hooks ( Overall the approach is sound — the debounce-then-announce pattern is a good way to avoid interrupting the screen reader during typing. A few issues worth addressing: Issues1. Missing Most components correctly add
Compare with 2. Broadened announcement scope in The old code specifically gated announcements on the "No results found" message: const shouldAnnounceNoResults = shouldShowHeaderMessage && isNoResultsFoundMessage;The new code announces any header message when visible and not loading: useDebouncedAccessibilityAnnouncement(headerMessage ?? '', shouldShowHeaderMessage && !isLoading, value ?? '');This means any custom 3. Unnecessary dependencies in
4. Type safety in The hook initializes state as const [debouncedValue, setDebouncedValue] = useState<T | undefined>(undefined);
// ...
return debouncedValue as T;The
Minor observations (non-blocking)
What looks good
|
|
Codex Review: Something went wrong. Try again later by commenting “@codex review”. ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppAndroid: mWeb ChromeiOS: HybridAppiOS: mWeb SafariMacOS: Chrome / Safari
|
aimane-chnaif
left a comment
aimane-chnaif
left a comment
There was a problem hiding this comment.
Please address ai reviews above
| <Text style={[styles.textLabel, styles.colorMuted, styles.minHeight5]}>{headerMessage}</Text> | ||
| <Text | ||
| style={[styles.textLabel, styles.colorMuted, styles.minHeight5]} | ||
| aria-hidden |
There was a problem hiding this comment.
Does aria-hidden fix anything? I don't see any changes in behavior, same as production.
On web, text is not readable.
On native, text is readable.
There was a problem hiding this comment.
aria-hidden prevents potential double announcements on web.
|
Failing job 3 is directly related to this PR |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5409b5af15
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
…ments - Add aria-hidden to AddressSearch and BaseEmojiPickerMenu visible text to prevent double screen reader announcements (matching other components) - Extract UseAccessibilityAnnouncementOptions type to shared types file - Extract WorkflowNoResultsView component in WorkspaceWorkflowsPage and remove redundant isNoResults/noResultsMessage from useMemo deps - Stabilize emoji picker filter debounce/throttle using ref-based pattern to prevent re-renders from recreating timers - Fix DebugReportActionsTest to handle aria-hidden text with includeHiddenElements Made-with: Cursor
|
We did not find an internal engineer to review this PR, trying to assign a random engineer to #76958 as well as to this PR... Please reach out for help on Slack if no one gets assigned! |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8ff7400305
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
|
🚧 @marcaaron has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by https://github.com/marcaaron in version: 9.3.40-0 🚀
|
|
🚀 Deployed to staging by https://github.com/marcaaron in version: 9.3.40-0 🚀
|
|
Hi @Krishna2323. Is it enough to test this on Web? |
|
@Krishna2323 @aimane-chnaif @joekaufmanexpensify @rushatgabhane Could you please clarify if it's expected that we can't open Start/Stop waypoint in Track distance with Grabando.485.mp4 |
@jponikarchuk no, its not expected. The enter key press should open Start/Stop waypoint page. |
|
🚀 Deployed to production by https://github.com/cristipaval in version: 9.3.41-4 🚀
|
9 participants
Explanation of Change
Fixed Issues
$ #76958
PROPOSAL:
Tests
Same as QA Steps
Verify that no errors appear in the JS console
Offline tests
QA Steps
Other Occurrences:
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
android_native.mp4
Android: mWeb Chrome
android_chrome.mp4
iOS: Native
iOS: mWeb Safari
ios_safari.mp4
MacOS: Chrome / Safari
web_chrome.mp4