[Due for payment 2025-06-25] [$250] Incorrect hover style and selected style for onboarding modal for Accounting software step

[izarutskaya]

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.1.59-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation (hyperlinked to channel name): #expensify_bugs

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Skip "What’s your work email?"
3. Click "Manage my team's expenses"
4. Choose any option from "How many employees do you have?"
5. Hover over the selected option

Expected Result:

Use our row-hover color for the card when it is hovered.
Use our activeBG color for the card when it is selected.
Do not use the reduced opacity effect for hover

Actual Result:

Incorrect hover style and selected style for onboarding modal for Accounting software step.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Recording.3142.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021931036391750989425
• Upwork Job ID: 1931036391750989425
• Last Price Increase: 2025-06-06

Issue Owner

Current Issue Owner: @abekkala

[melvin-bot]

Triggered auto assignment to @abekkala (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.

[izarutskaya]

From @dukenv0307

Proposal

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

Incorrect hover style and selected style for onboarding modal for Accounting software step

What is the root cause of that problem?

1. We don't set hoverStyle and selected style here

App/src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx

Lines 273 to 279 in 48ee853

	<PressableWithoutFeedback
	key={item.keyForList ?? ''}
	onPress={() => handleIntegrationSelect(item.keyForList)}
	accessibilityLabel={item.text}
	accessible={false}
	style={[styles.onboardingAccountingItem, isSmallScreenWidth && styles.flexBasis100]}
	>

2. We always set hoverDimmingValue is 0.8 in here

App/src/components/RadioButtonWithLabel.tsx

Lines 55 to 63 in 9687e9b

	<PressableWithFeedback
	tabIndex={-1}
	accessible={false}
	onPress={onPress}
	style={[styles.flexRow, styles.flexWrap, styles.flexShrink1, styles.alignItemsCenter]}
	wrapperStyle={[styles.flex1, styles.ml3, styles.pr2, wrapperStyle]}
	// disable hover style when disabled
	hoverDimmingValue={0.8}
	pressDimmingValue={0.5}

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

1. We should add hover style by removing hoverStyle in here and adding hoverStyle to PressableWithoutFeedback

2. When item is selected, we should set background as activeComponentBG

    <PressableWithoutFeedback
        key={item.keyForList ?? ''}
        onPress={() => handleIntegrationSelect(item.keyForList)}
        accessibilityLabel={item.text}
        accessible={false}
        hoverStyle={styles.hoveredComponentBG}
        style={[styles.onboardingAccountingItem, isSmallScreenWidth && styles.flexBasis100, item.isSelected && styles.activeComponentBG]}
    >

3. Add shouldBlendOpacity to disable hover style props to RadioButtonWithLabel component and set it as true in here

App/src/components/Pressable/PressableWithFeedback.tsx

Lines 65 to 66 in 47b104c

	<OpacityView
	shouldDim={!shouldBlendOpacity && !!(!rest.disabled && (isPressed || isHovered))}

App/src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx

Lines 280 to 291 in 48ee853

	<RadioButtonWithLabel
	isChecked={!!item.isSelected}
	onPress={() => handleIntegrationSelect(item.keyForList)}
	style={[styles.flexRowReverse]}
	wrapperStyle={[styles.ml0]}
	labelElement={
	<View style={[styles.alignItemsCenter, styles.flexRow]}>
	{item.leftElement}
	<Text style={styles.textStrong}>{item.text}</Text>
	</View>
	}
	/>

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None UI bug

What alternative solutions did you explore? (Optional)

[shawnborton]

@dukenv0307 's proposal is close, but we don't want any hover style for a card that already has the selectedBG color applied to it.

[dukenv0307]

Proposal

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

Incorrect hover style and selected style for onboarding modal for Accounting software step

What is the root cause of that problem?

1. We don't set hoverStyle and selected style here

App/src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx

Lines 273 to 279 in 48ee853

	<PressableWithoutFeedback
	key={item.keyForList ?? ''}
	onPress={() => handleIntegrationSelect(item.keyForList)}
	accessibilityLabel={item.text}
	accessible={false}
	style={[styles.onboardingAccountingItem, isSmallScreenWidth && styles.flexBasis100]}
	>

2. We always set hoverDimmingValue is 0.8 in here

App/src/components/RadioButtonWithLabel.tsx

Lines 55 to 63 in 9687e9b

	<PressableWithFeedback
	tabIndex={-1}
	accessible={false}
	onPress={onPress}
	style={[styles.flexRow, styles.flexWrap, styles.flexShrink1, styles.alignItemsCenter]}
	wrapperStyle={[styles.flex1, styles.ml3, styles.pr2, wrapperStyle]}
	// disable hover style when disabled
	hoverDimmingValue={0.8}
	pressDimmingValue={0.5}

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

1. We should add hover style by removing hoverStyle in here and adding hoverStyle to PressableWithoutFeedback

2. When item is selected, we should set background as activeComponentBG

    <PressableWithoutFeedback
        key={item.keyForList ?? ''}
        onPress={() => handleIntegrationSelect(item.keyForList)}
        accessibilityLabel={item.text}
        accessible={false}
        hoverStyle={!item.isSelected ? styles.hoveredComponentBG : undefined}
        style={[styles.onboardingAccountingItem, isSmallScreenWidth && styles.flexBasis100, item.isSelected && styles.activeComponentBG]}
    >

3. Add shouldBlendOpacity to disable hover style props to RadioButtonWithLabel component and set it as true in here

App/src/components/Pressable/PressableWithFeedback.tsx

Lines 65 to 66 in 47b104c

	<OpacityView
	shouldDim={!shouldBlendOpacity && !!(!rest.disabled && (isPressed || isHovered))}

App/src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx

Lines 280 to 291 in 48ee853

	<RadioButtonWithLabel
	isChecked={!!item.isSelected}
	onPress={() => handleIntegrationSelect(item.keyForList)}
	style={[styles.flexRowReverse]}
	wrapperStyle={[styles.ml0]}
	labelElement={
	<View style={[styles.alignItemsCenter, styles.flexRow]}>
	{item.leftElement}
	<Text style={styles.textStrong}>{item.text}</Text>
	</View>
	}
	/>

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None UI bug

What alternative solutions did you explore? (Optional)

[dukenv0307]

Updated proposal

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ishpaul777 (External)