[$250] Blue "Pill" Highlight is very light when using Tab/Shift

[IuliiaHerets]

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.0.20-0
Reproducible in staging?: Y
Reproducible in production?: N
Issue was found when executing this PR: #45982
Email or phone of affected tester (no customers): applausetester+en@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Access staging.new.expensify.com OR open the New Expensify staging app
2. Sign into a valid account
3. Click on "+" > Submit Expense
4. Toggle Tab/Shift to navigate the pills (Manual, Scan & Distance)

Expected Result:

User expects the highlight to be visible and a bright blue outline

Actual Result:

The highlight on the "Pills" (Manual, Scan & Distance) are very light and can hardly be seen

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6571570_1723598486802.20240814_091907.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013a7082fd9d89daba
• Upwork Job ID: 1823680839995998296
• Last Price Increase: 2024-08-14
• Automatic offers:
• rayane-djouah | Reviewer | 103524223

Issue Owner

Current Issue Owner: @

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @flodnv (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[IuliiaHerets]

We think that this bug might be related to #vip-vsb

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

[flodnv]

@dominictb @tgolen @rayane-djouah seems like this was caused by #45982; but perhaps we can consider this isn't a blocker?

[rayane-djouah]

@flodnv - The tab navigation was completely disabled on the submit expense page due to a tab selector jumping bug. We fixed the issue and restored the tab navigation in our PR. We considered this bug out of scope here: #45982 (comment) because it is already reproducible on the start chat page in the production app.

[bernhardoj]

Proposal

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

The blue outline for tab selector item is almost impossible to see.

What is the root cause of that problem?

If we take a look at the tab component, we can see that the pressable has a view as the children. Both of the pressable and view has the same height from styles.tabSelectorButton.

App/src/components/TabSelector/TabSelectorItem.tsx

Lines 36 to 44 in 55f67f5

	<PressableWithFeedback
	accessibilityLabel={title}
	style={[styles.tabSelectorButton]}
	wrapperStyle={[styles.flex1]}
	onPress={onPress}
	role={CONST.ROLE.BUTTON}
	>
	{({hovered}) => (
	<Animated.View style={[styles.tabSelectorButton, StyleSheet.absoluteFill, styles.tabBackground(hovered, isActive, backgroundColor)]}>

But for the animated view, it also has an animated background color style. The background color style covers the blue outline of the parent.

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

The simplest solution is to have a smaller height for the animated view and also position it a bit below and left of the parent.

{height: 38, left: 2, top: 2, right: 2}

or vice versa by increasing the parent size

OR

We can remove the animated view and convert the pressable into an animated pressable.

const AnimatedPressableWithFeedback = Animated.createAnimatedComponent(PressableWithFeedback);

const [isHovered, setIsHovered] = useState(false); // or we can use <Hoverable />

<AnimatedPressableWithFeedback
    accessibilityLabel={title}
    style={[styles.tabSelectorButton, styles.tabBackground(isHovered, isActive, backgroundColor)]}
    onHoverIn={() => setIsHovered(true)}
    onHoverOut={() => setIsHovered(false)}

web.mp4

[melvin-bot]

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

[melvin-bot]

Current assignee @rayane-djouah is eligible for the External assigner, not assigning anyone new.

[flodnv]

@rayane-djouah could you please review @bernhardoj's proposal above?

[rayane-djouah]

@bernhardoj's proposal looks good to me.

I prefer the second proposed solution (removing the animated view and converting the pressable into an animated pressable)

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @flodnv is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to @dannymcclain (Design), see these Stack Overflow questions for more details.

[flodnv]

Sounds good to me, but @dannymcclain could you check that you're happy with the design of the proposed end result? #47381 (comment)

[dannymcclain]

It looks good to me!

[melvin-bot]

📣 @rayane-djouah 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[bernhardoj]

PR is ready

cc: @rayane-djouah

[rayane-djouah]

Note

The production deploy automation failed: This should be on [HOLD for Payment 2024-08-27] according to #47639 prod deploy checklist, confirmed in #47485 (comment).

cc @anmurali

[rayane-djouah]

Checklist

• The PR that introduced the bug has been identified. Link to the PR: Add Hover to TabItem #28357
• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: Add Hover to TabItem #28357 (comment)
• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A
• Determine if we should create a regression test for this bug. Yes
• If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

1. Open FAB > Submit expense
2. (Web/Desktop/mWeb) Press TAB around the tab bar button (mWeb needs hardware keyboard)
3. Verify the blue outline is clearly visible around the button
4. Slowly swipe the page to switch between tabs
5. Verify the tab bar background color is animated (fading away)

Do we agree 👍 or 👎

[bernhardoj]

Requested in ND.

[JmillsExpensify]

Awaiting payment summary

[anmurali]

Payment Summary

• @rayane-djouah paid $250 on Upwork
• @bernhardoj approved $250 on New Dot

[JmillsExpensify]

$250 approved for @bernhardoj