[Due for payment 2026-04-23] [$250] A11y - Android - The color code also announces when navigating to the header text

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.3.7-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #79146
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Android 13 / Xiaomi Poco F5 / Android 13
App Component: Other

Action Performed:

Precondition:

• Screen reader Talkback is enabled.

1. Launch the native app and login
2. Navigate to any menu
3. Touch any text header or subtext

Expected Result:

The color code should not announce or read when navigating to the text header or subtext

Actual Result:

The color code also announces when navigating to the text header or subtext
Note:

• The color code also announces when navigating to a menu item from the text header or subtext
• Only reproducible on Android

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022016920413988798908
• Upwork Job ID: 2016920413988798908
• Last Price Increase: 2026-03-16
• Automatic offers:
• situchan | Contributor | 110828801
• apeyada | Contributor | 111018485

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[MobileMage]

🚨 Edited by proposal-police: This proposal was edited at 2026-02-11 21:40:50 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

On Android with TalkBack enabled, when navigating to header text or subtext in menus, the color code (hex value like "#76847E") is announced along with the actual text content. This degrades the accessibility experience for screen reader users.

What is the root cause of that problem?

The helper text in MenuItem is rendered outside PressableWithSecondaryInteraction. When shouldParseHelperText is true, the text is wrapped in HTML tags and rendered via react-native-render-html. The BaseHTMLEngineProvider applies mixedUAStyles containing a color property that resolves to a theme hex value like #76847E.

App/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

Lines 71 to 75 in f7265ef

	'muted-text-label': HTMLElementModel.fromCustomModel({
	tagName: 'muted-text-label',
	mixedUAStyles: {...styles.mutedNormalTextLabel, ...styles.mb0},
	contentModel: HTMLContentModel.block,
	}),

Since this content sits outside the pressable's accessible={true} boundary, TalkBack navigates to it as a separate element and introspects the styled HTML children, announcing the color hex code as part of the content. This is Android-specific because TalkBack handles style introspection differently than iOS VoiceOver.

What changes do you think we should make in order to solve the problem?

In MenuItem.tsx, add accessible and accessibilityLabel={helperText} to the View wrapping the RenderHTML component for helper text. This makes TalkBack treat the helper text as a single accessible element and read only the plain text label, preventing it from diving into styled HTML children and announcing color metadata.

App/src/components/MenuItem.tsx

Line 1103 in 79e9742

<View style={[styles.flexRow, styles.renderHTML, styles.ph5, styles.pb5]}>

What alternative solutions did you explore? (Optional)

Modifying defaultTextProps in BaseHTMLEngineProvider or creating a custom text renderer — but these are broader changes that aren't necessary since the issue is specifically with MenuItem helper text sitting outside the pressable boundary.

[trjExpensify]

@rushatgabhane @dangrous are ya'll on this? I saw the linked issue is something you were both on.

[dangrous]

Oh yeah @rushatgabhane this seems like something we can roll into the other PRs, what do you think?

[dangrous]

@rushatgabhane I'm gonna assign you as C+ if that's alright, we can either have you handle as part of the other assigned issues, or you can review @MobileMage (or anyone else's) proposal. Thanks!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022016920413988798908