fix(a11y): Improve screen reader support for Settings > Profile context menu#82932
Conversation
|
Hey, I noticed you changed If you want to automatically generate translations for other locales, an Expensify employee will have to:
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 --helpTypically, you'd want to translate only what you changed by running |
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.
|
|
I thought that content box was part of macOS voice over and not something we have in the app!? Maybe I've misunderstood though |
|
Ah, could well be. I don't know, I've never seen it before. |
|
Woaaah. Never seen this. That's wild but also kinda useful haha |
|
Today I learned! |
|
@MelvinBot merge main, fix conflicts |
|
@suneox could you please prioritze this? last update was a long time ago 🙇 |
|
I can see this PR has merge conflicts with To have me merge |
Yes, I’ll prioritize the review today and provide an update on the plan for the related tasks |
|
@truph01 I addressed the latest review comments above. Please take another look when you get a chance. Thanks. |
|
@truph01, gentle bump. thanks. |
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 9927f801a6
ℹ️ 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".
|
@marufsharifi We have a few comments |
|
Working on it |
|
@truph01, I've addressed all your comments, just waiting for the Spanish translation for the new key. thanks. |
|
Duplicated platform-check logic across Both files contain identical logic: const contextMenuHint = ...;
const platform = getPlatform(true);
const shouldMergeContextMenuHintIntoLabel = platform === CONST.PLATFORM.WEB || platform === CONST.PLATFORM.MOBILE_WEB;
const accessibilityLabelWithContextMenuHint = shouldMergeContextMenuHintIntoLabel && contextMenuHint
? [label, contextMenuHint].filter(Boolean).join('. ')
: label;
const accessibilityHint = shouldMergeContextMenuHintIntoLabel ? undefined : contextMenuHint;This "merge on web, separate on native" logic could be extracted into a small hook (e.g., |
|
@truph01 I addressed the latest review comments. Please take another look when you get a chance. |
|
🚧 @lakchote 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/lakchote in version: 9.3.49-0 🚀
Bundle Size Analysis (Sentry): |
|
🚀 Deployed to production by https://github.com/grgia in version: 9.3.49-2 🚀
|


Explanation of Change
Improved desktop web accessibility for link context menus in Settings by adding clear screen-reader hints (“Context menu available, press Shift+F10 to open”), ensuring hints are announced on the web, applying the behavior consistently across shared menu components, and localizing the new hint across all supported languages.
Fixed Issues
$ #76948
PROPOSAL: #76948 (comment)
Tests
/settings/profile-"Help, link, Context menu available, press SHIFT F10 to activate."
Offline tests
Same as Tests.
QA Steps
Same as Tests.
// TODO: These must be filled out, or the issue title must include "[No QA]."
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
Not applicable
Android: mWeb Chrome
Not applicable
iOS: Native
Not applicable
iOS: mWeb Safari
Not applicable.
MacOS: Chrome / Safari
Screen.Recording.2026-02-23.at.12.47.53.PM.mov