fix: [Accessibility][Tracking] Restructure Accessibility Grouping#80442
Conversation
|
Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers! |
melvin-bot
bot
requested review from
eVoloshchak
and removed request for
a team
|
@eVoloshchak 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] |
![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: c74c4a1781
ℹ️ 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".
TaduJR
force-pushed
the
fix-Accessibility-Tracking-Restructure-Accessibility-Grouping
branch
from
4433d3d to
6282eb9
Compare
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.
|
…referral CTA
- Restructure ExpenseReportListItemRow mobile view so VoiceOver reads report
details as a group and Submit button as independently focusable (Expensify#77538)
- Fix nested buttons in ReferralProgramCTA by converting to sibling structure (Expensify#76902)
- Add accessible prop to BaseListItem for opt-in VoiceOver grouping control
TaduJR
force-pushed
the
fix-Accessibility-Tracking-Restructure-Accessibility-Grouping
branch
from
6282eb9 to
a57934e
Compare
…able for VoiceOver (Expensify#77467)
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 003842ddb3
ℹ️ 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".
…int-safe accessible spread
|
@TaduJR, iOS: mWeb Safari and Android screen recordings are missing, let's double-check nothing has been broken on these platforms |
|
@MelvinBot merge main and resolve conflicts |
…Grouping Resolved conflict in ReferralProgramCTA.tsx: - Kept the PR's View wrapper structure (accessibility fix) with separate pressable children for navigate and close actions - Adopted main's updated sentry labels (REFERRAL_PROGRAM.CTA and REFERRAL_PROGRAM.DISMISS_BUTTON) replacing the PR's REFERRAL_CTA labels - Adopted main's lazy icon loading (useMemoizedLazyExpensifyIcons) - Removed the now-redundant REFERRAL_CTA sentry label constant from CONST Co-authored-by: Rushat Gabhane <rushatgabhane@users.noreply.github.com>
|
Merged Conflict resolution details:
|
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppScreen.Recording.2026-03-09.at.09.34.02.movScreen.Recording.2026-03-09.at.09.31.40.movAndroid: mWeb ChromeScreen.Recording.2026-03-09.at.09.36.46.movScreen.Recording.2026-03-09.at.09.34.37.moviOS: HybridAppScreen.Recording.2026-03-09.at.09.24.52.movScreen.Recording.2026-03-09.at.09.17.36.moviOS: mWeb SafariScreen.Recording.2026-03-09.at.09.28.33.movScreen.Recording.2026-03-09.at.09.26.05.movMacOS: Chrome / SafariScreen.Recording.2026-03-09.at.09.05.40.movScreen.Recording.2026-03-02.at.14.09.52.movScreen.Recording.2026-03-09.at.09.07.57.mov |
This doesn't work on Web, name, status, and amount are not focused separately Screen.Recording.2026-03-02.at.14.34.33.movOn IOS this works for Reports, but not for Expenses and other tabs. Is this expected? Screen.Recording.2026-03-02.at.14.37.20.movThe same bug is reproducible on iOS: mWeb Safari (iOS: mWeb Safari screen recording is missing) |
On iOS native, "Submit an expense, refer your boss" is not vertically aligned Before: After: 
|
This is expected for Web Per W3 guideline, non-interactive elements should be focusable with Ctrl + Option + Arrow Key
The issue description from #77538 says the above, it only scopes to Reports, should we do the same for Expenses too?
Taking a look |
cc @rushatgabhane on this one Thanks! |
…bility-Tracking-Restructure-Accessibility-Grouping
Fixed on latest commit. |
…bility-Tracking-Restructure-Accessibility-Grouping # Conflicts: # src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx
|
@rushatgabhane, could you weigh in on #80442 (comment) please? |
Hey @eVoloshchak Sorry I thought I notified here. We discussed with @rushatgabhane and decided to handle the remains or Expense etc.. on follow up PR. |
|
@MelvinBot, merge main, resolve the conflicts, and push the changes to this branch |
|
I'd be happy to help merge main and resolve conflicts, but I can't push code changes to this PR because I didn't open it and I'm not listed as an assignee. To have me do this, please add me as an assignee on the PR and then retry your request. |
…bility-Tracking-Restructure-Accessibility-Grouping # Conflicts: # src/components/SelectionListWithSections/UserListItem.tsx
|
@madmax330 all yours! |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚧 @madmax330 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! 🧪🧪
|
|
🚀 Deployed to staging by https://github.com/madmax330 in version: 9.3.34-0 🚀
|
|
🚀 Deployed to production by https://github.com/luacmartins in version: 9.3.34-2 🚀
|
|
Lessgooo! |
|
Wohooo |
6 participants
Explanation of Change
This PR fixes multiple accessibility grouping issues where iOS VoiceOver absorbed interactive child elements (buttons) into their parent containers, making them unfocusable and unactivatable.
Fixes
ReferralProgramCTA (#76902): The close button was nested inside a
PressableWithoutFeedback, making it invisible to VoiceOver. Restructured so the outer element is a plainViewwith navigate and close as sibling pressables.ExpenseReportListItem/Row (#77538): On mobile, the entire expense report row was grouped as one accessibility element, hiding the ActionCell button (e.g., "View", "Approve"). Added
accessible={false}toBaseListItemand created an inner accessible group with a computed label including user name, report title, subtitle, status, and amount.UserListItem (#77467 — Start Chat): The "Add to group" button was absorbed into the contact row. Added an inner
Viewwithaccessibleandrole=buttonfor the contact info, making the "Add to group" button independently focusable. TherightHandSideComponentfunction is evaluated to check actual render output, so rows without a visible button (e.g., Expensify emails, self-DMs) keep default grouping.ExpensifyCardPage (#77467 — Expensify Card): "Reveal details" and "Reveal CVV" buttons were absorbed into the card number container. Added
shouldBeAccessible={false}to the twoMenuItemWithTopDescriptioninstances.BaseListItem: New
accessibleprop forwarded toPressableWithFeedback. Whenaccessible={false}, theaccessibilityLabelis cleared to prevent duplicate labels in the accessibility tree.Fixed Issues
$ #79238
PROPOSAL: #79238 (comment)
Tests
Issue #76902 — ReferralProgramCTA buttons grouped
Issue #77538 — Expense report record details and buttons grouped
Issue #77467 — Occurrence 1: Start Chat "Add to group" button
Issue #77467 — Occurrence 2: Expensify Card "Reveal details" button
Offline tests
Same as tests
QA Steps
// TODO: These must be filled out, or the issue title must include "[No QA]."
Same as tests
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
Screen_Recording_20260302_141316_New.Expensify.Dev.mp4
Android: mWeb Chrome
Android-mWeb.mp4
iOS: Native
iOS-Native.mp4
iOS: mWeb Safari
MacOS: Chrome / Safari
Mac-Chrome.mp4