[Due for payment 2026-05-26] [Due for payment 2026-05-26] [$250] Android - Login - Language options are not visible in high constrast mode

[mitarachim]

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: 9.3.74-7
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #89600
Email or phone of affected tester (no customers): sdsdjoijdoisnjodis@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Samsung Galaxy S25 FE / Android 16
App Component: Other

Action Performed:

Precondition:

• App is in dark mode.

1. Launch Expensify app.
2. Go to Account > Preferences > Theme.
3. Enable High contrast mode.
4. Log out.
5. On login page, scroll to the bottom.
6. Open language picker.

Expected Result:

Language options will be visible in high constrast mode.

Actual Result:

Language options are not visible in high constrast mode.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7155303_1778866070655.Screen_Recording_20260516_012645_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022055490851661297419
• Upwork Job ID: 2055490851661297419
• Last Price Increase: 2026-05-16

Issue Owner

Current Issue Owner: @situchan

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #89600

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[OSBotify]

Investigation Summary

Classification: Frontend bug
Causing PR: #89600 - "Use preserved high contrast mode preference on sign-in page" by @MelvinBot (High confidence)
Related Issues: #77408 (the issue this PR was fixing)

Recommendation: REVERT

PR #89600 introduced a regression where the dark-contrast theme is now applied to the sign-in page, but the Android picker (used by LocalePicker in Licenses.tsx) renders language options using theme.textLight. In dark-contrast, textLight is #002E22 (very dark green/black), which is invisible against the dark modal background used by the native Android picker dialog.

Assigned: @MelvinBot (PR author), @situchan @flaviadefaria @youssef-lr (approving reviewers)
Labels: DeployBlockerCash kept (Frontend bug — App PR caused the issue). DeployBlocker was not present, no label changes needed.

Detailed Analysis

Evidence

• The issue body links directly to PR Use preserved high contrast mode preference on sign-in page #89600 as the regression source (melvin-bot auto-assigned based on this PR).
• PR Use preserved high contrast mode preference on sign-in page #89600 was merged on 2026-05-14 and is listed in the current StagingDeployCash (9.3.75-1).
• The bug is staged-only ("Reproducible in production? N/A - new feature, doesn't exist in prod"), consistent with it being introduced by a PR in the current staging cycle.
• The reproduction steps exactly match the code path changed: enable high contrast mode, sign out, open language picker on login page.

Verification

• Affected file: src/components/LocalePicker.tsx and src/components/Picker/BasePicker.tsx
• PR modifies: src/pages/signin/SignInPage.tsx, src/pages/signin/Socials.tsx, src/styles/index.ts
• LocalePicker.tsx is rendered via Licenses.tsx in the sign-in page footer, and is wrapped inside the ThemeProvider set by WithTheme in SignInPage.tsx — which PR Use preserved high contrast mode preference on sign-in page #89600 changed to use CONST.THEME.DARK_CONTRAST when the user's preference ends with -contrast.

Root Cause

In BasePicker.tsx (lines 151-157), on Android the picker item text color is set to theme.textLight:

const itemColor = useMemo(() => {
  if (getOperatingSystem() === CONST.OS.ANDROID) {
    return theme.textLight;
  }
  return theme.text;
}, [theme]);

In the dark-contrast theme (src/styles/theme/themes/dark-contrast.ts), textLight is overridden to colors.productLight900 = '#002E22' — a very dark color. The Android native picker's modal background is theme.highlightBG, which dark-contrast inherits from the dark theme as a dark background (colors.productDark200).

Before PR #89600, the sign-in page always used CONST.THEME.DARK regardless of user preference, so theme.textLight = colors.productDark900 = '#E7ECE9' (light, visible against the dark modal). After the PR, when dark-contrast is active, theme.textLight becomes '#002E22' — essentially the same dark color as the background — making the language options invisible.

The fix should either:

1. Revert PR Use preserved high contrast mode preference on sign-in page #89600 and address the dark-contrast picker text color separately, or
2. Roll forward by explicitly overriding the Android picker item color in LocalePicker or BasePicker to always use theme.text (not theme.textLight) when on the sign-in page, or updating the dark-contrast theme to not override textLight to a dark value in the sign-in context.

Reverting is recommended as it is the safest and fastest path to unblock the deploy.