Fix: Remove accessible={false} blocking Appium automation by kirillbilchenko · Pull Request #78527 · Expensify/App

kirillbilchenko · 2025-12-29T13:55:00Z

Summary

This PR fixes accessibility issues that were blocking Appium automation by removing accessible={false} properties from various components and making UI elements properly accessible for automated testing.

Should resolve this #79520

How to verify changes:
Build the application for ios from main and observe the affected components in appium inspector, you will see that MoneyRequestReportPreviewContent for example is only accessible as root container, but not any child components inside this container.

Quick Appium Validation Guide - Main vs ANAD-8910

Setup (One-Time)

Install Appium

npm install -g appium
appium driver install xcuitest

Download Appium Inspector

https://github.com/appium/appium-inspector/releases

Test Main Branch (Baseline)

Build Main Branch

git checkout main
npm install
cd ios && pod install && cd ..
npx react-native run-ios --simulator="iPhone 15 Pro"

Start Appium & Connect Inspector

Terminal 1: Start Appium

appium

Terminal 2: Open Appium Inspector

Capabilities:

{
"platformName": "iOS",
"deviceName": "iPhone 15 Pro",
"automationName": "XCUITest",
"app": "/path/to/NewExpensify.app",
"bundleId": "com.expensify.chat.dev"
}

Document Main Branch State

In Appium Inspector, check these and take screenshots:

Chat List:

Click chat item → Check accessibilityLabel in right panel
Does it include "Drafted message"? (❌ Should be NO)
Does it include "Chat pinned"? (❌ Should be NO)
Does it include "Attention needed"? (❌ Should be NO)

Money Request:

Find Previous/Next buttons → Check accessibilityLabel
Are they "Previous"/"Next"? (❌ Should be NO, just "button")

Test ANAD-8910 Branch (Fixed)

Build ANAD-8910 Branch

git checkout ANAD-8910-fix-accessibility-issue
npm run clean
npm install
cd ios && pod install && cd ..
npx react-native run-ios --simulator="iPhone 15 Pro"

Restart Appium & Reconnect

Restart Appium (Ctrl+C, then start again)

appium

Reopen Appium Inspector with same capabilities

Validate Improvements

In Appium Inspector, check the same items:

Chat List:

Click chat with draft → accessibilityLabel should include "Drafted message" ✅
Click pinned chat → Should include "Chat pinned" ✅
Click chat with error → Should include "Attention needed" ✅

Money Request:

Previous button → accessibilityLabel = "Previous" ✅
Next button → accessibilityLabel = "Next" ✅

Selection Lists:

Select item with checkmark → Checkmark now visible in accessibility tree ✅

Chat Messages:

Click message → No duplicate focusable elements ✅

Key Validation Points

✅ Appium can now identify:

Chat status (draft, pinned, errors) programmatically
Navigation buttons by descriptive names
Selection states via checkmarks
Message content without duplicates

✅ No regressions:

All UI elements still visible
All interactions still work
No performance issues

Changes

Removed accessibility blockers: Removed accessible={false} properties that were preventing Appium from interacting with UI elements
ApprovalWorkflowSection: Made the approval workflow section accessible for Appium testing (src/components/ApprovalWorkflowSection.tsx:53)
Preview items: Made preview items in reports accessible for automated testing

Fixed Issues

The issue is that some elements are not accessible for automated tests, and there is no issue raised or created, we are working on autotest suite and it can help us to create more reliable element selectors, and cover more scenarios

Tests

Verify that no errors appear in the JS console

Offline tests

QA Steps

// TODO: These must be filled out, or the issue title must include "[No QA]."

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

codecov · 2026-01-02T07:45:32Z

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.

Files with missing lines	Coverage Δ
src/components/LHNOptionsList/OptionRowLHN.tsx	`95.71% <100.00%> (ø)`
src/pages/inbox/report/PureReportActionItem.tsx	`53.36% <ø> (-0.47%)`	⬇️
...ReportPreview/MoneyRequestReportPreviewContent.tsx	`60.85% <0.00%> (+0.12%)`	⬆️
... and 502 files with indirect coverage changes

rushatgabhane

found some potential accessibility regressions

src/components/ApprovalWorkflowSection.tsx

src/pages/home/report/PureReportActionItem.tsx

src/components/LHNOptionsList/OptionRowLHN.tsx

src/components/SelectionList/ListItem/BaseListItem.tsx

kirillbilchenko · 2026-01-27T15:58:13Z

@rushatgabhane I addressed you comments with last push, can you please check it?

rushatgabhane · 2026-01-29T20:12:26Z

src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

                        role={getButtonRole(true)}
                        isNested
                        accessibilityLabel={translate('iou.viewDetails')}
+                        accessible={false}


will this will make the child components inaccessible ?

@kirillbilchenko Bump here

No, this will NOT make children inaccessible. In fact, it does the opposite:

Line 732 sets accessible={false} on the parent PressableWithoutFeedback wrapper

This is the correct pattern because it allows child components to be individually accessible

Inside this wrapper, you have interactive children like:

Lines 784-800: Previous carousel button with accessible and accessibilityLabel={translate('common.previous')}

Lines 801-821: Next carousel button with accessible and accessibilityLabel={translate('common.next')}

Setting accessible={false} on the parent prevents it from being treated as a single opaque accessibility node, allowing screen readers to traverse into and interact with the child buttons individually. If you
kept the parent as accessible={true}, the children would be hidden from the accessibility tree.

rushatgabhane · 2026-01-29T20:12:29Z

src/pages/inbox/report/PureReportActionItem.tsx

@@ -1919,7 +1919,7 @@ function PureReportActionItem({
                preventDefaultContextMenu={draftMessage === undefined && !hasErrors}
                withoutFocusOnSecondaryInteraction
                accessibilityLabel={translate('accessibilityHints.chatMessage')}
-                accessible


@shubham1206agra this is still a concern

I believe this comment is for @kirillbilchenko

in this case this property is by default equal to true, and removing it just removing unnecessary declaration

Address review comments by removing accessible={false} from interactive elements (buttons, chat messages) and reverting hardcoded accessibility labels. Restore accessible={false} to decorative checkmarks to prevent duplicate screen reader announcements. - Remove accessible={false} from ApprovalWorkflowSection button - Remove accessible={false} from PureReportActionItem chat messages - Revert OptionRowLHN accessibilityLabel to original implementation - Restore accessible={false} to checkmark icons in BaseListItem components This ensures interactive elements are accessible to both screen readers and Appium automation while preventing redundant announcements.

tests/ui/PureReportActionItemTest.tsx

shubham1206agra · 2026-02-06T15:57:34Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
I verified tests pass on all platforms & I tested again on:
- Android: HybridApp
- Android: mWeb Chrome
- iOS: HybridApp
- iOS: mWeb Safari
- MacOS: Chrome / Safari
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified there are no new alerts related to the canBeMissing param for useOnyx
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
xIf a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Screen.Recording.2026-02-06.at.9.26.25.PM.mov

melvin-bot · 2026-02-06T15:58:01Z

🎯 @shubham1206agra, thanks for reviewing and testing this PR! 🎉

An E/App issue has been created to issue payment here: #81711.

melvin-bot · 2026-02-10T13:12:10Z

@AndrewGable 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]

github-actions · 2026-02-10T22:08:11Z

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

OSBotify · 2026-02-10T22:13:10Z

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

github-actions · 2026-02-10T22:13:26Z

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

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-10f1454-89b095592782095d313b6ce2e38f89cad7947b2e/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-10f1454-99ea5842b5481e21253afb243204b7aef48418c7/index.html

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

👀 View the workflow run that generated this build 👀

OSBotify · 2026-02-11T06:52:33Z

🚀 Deployed to staging by https://github.com/AndrewGable in version: 9.3.17-0 🚀

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

IuliiaHerets · 2026-02-11T06:56:35Z

Hi @kirillbilchenko. Do we need QA this?

kirillbilchenko · 2026-02-11T15:11:45Z

@IuliiaHerets I don't think so, not sure if it can affect anything in functionality

IuliiaHerets · 2026-02-11T15:17:39Z

@kirillbilchenko so can we check it off from the list?

kirillbilchenko · 2026-02-11T15:19:48Z

@IuliiaHerets I see that there is some assumption that this pr is causing some issues, so I'm still checking what will be the outcome, to understand why

shubham1206agra · 2026-02-11T15:25:17Z

src/pages/inbox/report/PureReportActionItem.tsx

                withoutFocusOnSecondaryInteraction
                accessibilityLabel={translate('accessibilityHints.chatMessage')}
-                accessible
+                accessibilityRole={CONST.ROLE.BUTTON}


@kirillbilchenko Sorry for the late question, but why do we need this?

@shubham1206agra sure, from the guide https://github.com/Expensify/App/blob/main/contributingGuides/ACCESSIBILITY.md

ensure that the pressable component has a role. This is especially important for users with visual disabilities who rely on screen readers to navigate the app. All Pressable components have a accessibilityRole prop that can be used to set the role of the pressable component.

So chat message in the end is interactive element that user need press on to open context menu, and that's the reason

This line introduced multiple regressions.
#82095
#37447 (comment)

@situchan could be the case, but this is something mentioned in the guide, so in this case make sense to update the guide or add some additional information about this corner case. This is very good catch in the end, but I'm not sure how this can be prevented in future.

@NJ-2020 by the way revert will not break this pr, this was added only because I was told to follow accessibility guide that we have in repo, and that's the only reason why it was added, I gave my explanation before, so maybe accessibilityRole={Platform.OS !== 'web' ? CONST.ROLE.BUTTON : undefined} adding fix like this can solve the issue, and worth to add comment.

OSBotify · 2026-02-12T15:22:11Z

🚀 Deployed to production by https://github.com/lakchote in version: 9.3.17-9 🚀

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

melvin-bot bot assigned kirillbilchenko Dec 29, 2025

kirillbilchenko marked this pull request as ready for review December 29, 2025 15:55

kirillbilchenko requested review from a team as code owners December 29, 2025 15:55

kirillbilchenko force-pushed the ANAD-8910-fix-accessibility-issue branch 4 times, most recently from 7058d20 to d40eef5 Compare January 8, 2026 09:01

tonyMedina125 mentioned this pull request Jan 14, 2026

[Payment due 2026-02-19] [$250] [Automation improvements] - Missing locators for search suggestions/approvals #79520

Closed

7 tasks

rushatgabhane suggested changes Jan 27, 2026

View reviewed changes

kirillbilchenko force-pushed the ANAD-8910-fix-accessibility-issue branch from d40eef5 to 779fb24 Compare January 27, 2026 15:57

kirillbilchenko requested a review from rushatgabhane January 27, 2026 17:09

rushatgabhane suggested changes Jan 29, 2026

View reviewed changes

kirillbilchenko added 2 commits January 29, 2026 21:24

Fix accessibility issues for Appium automation

05d1030

kirillbilchenko force-pushed the ANAD-8910-fix-accessibility-issue branch from 779fb24 to f89872b Compare January 30, 2026 09:24

rushatgabhane requested a review from shubham1206agra February 3, 2026 01:08

Update to follow accessiblity guide

5e2e910

shubham1206agra reviewed Feb 6, 2026

View reviewed changes

tests/ui/PureReportActionItemTest.tsx Outdated Show resolved Hide resolved

Remove unused hook leftover from previous iteration

719be11

shubham1206agra approved these changes Feb 6, 2026

View reviewed changes

melvin-bot bot mentioned this pull request Feb 6, 2026

Payment issue for E/App PR#78527 #81711

Closed

twisterdotcom requested review from a team and removed request for a team February 10, 2026 13:11

melvin-bot bot requested a review from JmillsExpensify February 10, 2026 13:11

melvin-bot bot removed the request for review from a team February 10, 2026 13:11

twisterdotcom requested review from a team and JmillsExpensify and removed request for JmillsExpensify February 10, 2026 13:11

melvin-bot bot requested review from AndrewGable and removed request for a team February 10, 2026 13:12

AndrewGable approved these changes Feb 10, 2026

View reviewed changes

AndrewGable merged commit 10f1454 into Expensify:main Feb 10, 2026
29 checks passed

OSBotify mentioned this pull request Feb 11, 2026

Deploy Checklist: New Expensify 2026-02-11 #82079

Closed

lakchote mentioned this pull request Feb 11, 2026

Chat - “Edited” label not copied when copying a multiline message #82124

Closed

7 tasks

This was referenced Feb 11, 2026

Revert "Fix: Remove accessible={false} blocking Appium automation" #82127

Closed

[No payment] Mark down - Message is centered when editing message #82095

Closed

shubham1206agra reviewed Feb 11, 2026

View reviewed changes

kirillbilchenko deleted the ANAD-8910-fix-accessibility-issue branch February 14, 2026 17:15

This was referenced Feb 24, 2026

[$750] Selecting and copy / pasting multiple messages doesn't work as expected #37447

Open

fix: selecting multiple messages doesn't work as expected #82507

Merged

Conversation

kirillbilchenko commented Dec 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Install Appium

Download Appium Inspector

Terminal 1: Start Appium

Terminal 2: Open Appium Inspector

Capabilities:

Restart Appium (Ctrl+C, then start again)

Reopen Appium Inspector with same capabilities

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

codecov bot commented Jan 2, 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 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kirillbilchenko commented Jan 27, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kirillbilchenko Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

shubham1206agra commented Feb 6, 2026

Reviewer Checklist

Screenshots/Videos

Uh oh!

melvin-bot bot commented Feb 6, 2026

Uh oh!

melvin-bot bot commented Feb 10, 2026

Uh oh!

Uh oh!

github-actions bot commented Feb 10, 2026

Uh oh!

OSBotify commented Feb 10, 2026

Uh oh!

github-actions bot commented Feb 10, 2026

Uh oh!

OSBotify commented Feb 11, 2026

Uh oh!

IuliiaHerets commented Feb 11, 2026

Uh oh!

kirillbilchenko commented Feb 11, 2026

Uh oh!

IuliiaHerets commented Feb 11, 2026

Uh oh!

kirillbilchenko commented Feb 11, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kirillbilchenko commented Dec 29, 2025 •

edited

Loading

codecov bot commented Jan 2, 2026 •

edited by github-actions bot

Loading

kirillbilchenko Feb 3, 2026 •

edited

Loading