Strikethrough cancels out underline

[applause-bot]

If you haven’t already, check out our contributing guidelines for onboarding. To join our Slack channel, fill out this form.

---

Version Number: 9.4.46-2
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: #96618
Email or phone of affected tester (no customers): applausetester+en@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Macbook Pro 2023 / Tahoe 26.4.1
App Component: Workspace Settings

Action Performed:

Precond: High Contrast is on

1. Access staging.new.expensify.com
2. Sign into a valid account
3. Go to Chat and send an @ mention (So Message is underlined)
4. Insert ~ on both ends of the message to enable strikeout

Expected Result:

As with Italic and Bold, the underline continues even when these are enabled

Actual Result:

With strikethrough, the underline disappears

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7221401_1785368111258.Strikethough_cancels_Underline.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Julia Ponikarchuk
Bug ID: 7221401

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/b5d9a3deb8153acc432220be8175c796edc6e9143ba33e67392c13c2ac260d52

[melvin-bot]

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

[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.

[melvin-bot]

@jasperhuangg @Pujan92 @rushatgabhane you have been assigned to this deploy blocker because you reviewed the offending PR: #96618

[melvin-bot]

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

[MelvinBot]

Issue Analysis

Root Cause: PR #96618 (confirmed) added a global high-contrast link underline via styles.link() (textDecorationLine: theme.isHighContrast ? 'underline' : 'none'). Mentions consume styles.link, so in high-contrast mode @mentions render underlined. When a mention is wrapped in strikethrough (~@user~ → <del>, which sets textDecorationLine: 'line-through'), two text-decoration-line values collide. React Native / react-native-web does not merge them into 'underline line-through' — the element's own value replaces the inherited one, so the underline is dropped. Bold/italic don't collide (they use fontWeight/fontStyle, not text-decoration), which is exactly why underline survives bold/italic but not strikethrough.

Recommended Fix (roll forward, don't revert): Combine the decorations so high-contrast links under strikethrough render textDecorationLine: 'underline line-through'. This exact combining pattern already exists in AnchorRenderer.tsx:51 (isDeleted ? styles.lineThrough : {}) — extend it to the <del> path and MentionUserRenderer.tsx:112. A clean revert of #96618 would fix this but re-introduce the WCAG 1.4.1 (Use of Color) violation the PR shipped to fix, so a targeted fix is preferred.

Since this is a narrow visual edge case (high-contrast mode + strikethrough over a mention/link) with no impact on core functionality, demote is a reasonable fallback if the team would rather not hold the deploy.

The assigned reviewers (Pujan92, rushatgabhane, jasperhuangg) are best positioned to apply the targeted fix.

Investigation details

Confirming #96618 is the cause. melvin-bot's suspicion is correct, but for a non-obvious reason: the merged PR isn't what its description says. The description claims it only touches textDecorationLine.ts, AnchorRenderer, and Licenses.tsx (an opt-in, links-only change). During review it pivoted to a global approach (reviewer comment: "Lets not merge this as I think global change apply here to fix it all the places", then re-approved). The actually-merged files are src/styles/index.ts, dark-contrast.ts, light-contrast.ts, types.ts, textDecorationLine.ts.

The two commits that introduced the global underline both belong to PR #96618 (verified via the commits→pulls API):

• af629471707325ae61be9e5421aaaffb648946d9 — "Underline links in high-contrast themes via theme.isHighContrast"
• 9654af557d3b3a5777105273cdd5134b80557452 — "Underline footer links in high contrast and match underline color to text color"

Merged 2026-07-28, present on staging 9.4.46-0; feature doesn't exist in prod, matching "N/A - new feature."

Evidence chain:

1. styles.link() — src/styles/index.ts:144-153 — sets underline when theme.isHighContrast.
2. Mentions consume styles.link — MentionUserRenderer.tsx:109-124.
3. ~...~ → <del> with line-through — src/styles/index.ts:197-203.
4. The two text-decoration-line values don't merge → underline lost.

This is a frontend bug fixable entirely in Expensify/App. Keeping the DeployBlockerCash label (an App PR caused it); no other label changes warranted.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement this to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[rushatgabhane]

Expected behavior