Expensify Card-Freeze card button icon shows hover effect when disabled in high contrast mode

[applause-bot]

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.78-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #89379
Email or phone of affected tester (no customers): applausetester+khcategory19@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.2 / Chrome
App Component: Workspace Settings

Action Performed:

Precondition:

• User has assigned themselves a virtual card.
• Enable High contrast mode in Account > Preferences > Theme.

1. Go to staging.new.expensify.com
2. Go to workspace settings > Expensify Card.
3. Open the assigned card.
4. Go offline.
5. Hover over Freeze card button.

Expected Result:

Freeze card button is disabled so there should be no hover effect on the button.

Actual Result:

Freeze card button icon shows hover effect when disabled in offline mode and in high contrast mode.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7158367_1779232092938.2.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Mita Rachim
Bug ID: 7158367

Issue Owner

Current Issue Owner: @Pujan92

[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/a06cbd989877a04305647ae0ee8357c43fecde5d230685029efb3b437cf52244

[melvin-bot]

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

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

[MelvinBot]

Proposal

What is the root cause of that problem?

The Button component's hover callbacks (onHoverIn/onHoverOut) still fire when the button is disabled. The guard condition !isDisabled || !shouldStayNormalOnDisable evaluates to true when shouldStayNormalOnDisable is false (the default), so isHovered gets set even on disabled buttons.

The icon fill then switches from theme.icon to theme.buttonIcon on hover without checking isDisabled. In the high contrast dark theme, these are visually distinct (#8B9C8F vs #E7ECE9), producing the visible hover effect on the disabled Freeze card button.

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

On line 375 (and the equivalent line 390 for the right icon), add an !isDisabled check to the icon fill expression so that disabled buttons always use the non-hovered fill:

fill={isHovered && !isDisabled ? (iconHoverFill ?? defaultFill) : (iconFill ?? defaultFill)}

What alternative solutions did you explore? (Optional)

Fixing the hover guard on lines 541-542 to prevent isHovered from being set at all when disabled would also work. However, that's a broader change — shouldStayNormalOnDisable was presumably added to support some use case where disabled buttons need hover tracking. The icon fill fix is more targeted and lower risk.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[nkuoch]

Probably not a deploy blocker since they are related to high contrast mode setting? @ShridharGoel will work on this