FAB – Blue frame appears when navigate via FAB menu using Up/Down keys

[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: v1.4.63-0
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): applausetester+jp_e_category@applause.expensifail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Log in.
3. Click on +/FAB button
4. Navigate via FAB menu using Up/Down keys

Expected Result:

Frame do not appears when navigate via FAB menu using Up/Down keys

Actual Result:

Blue frame appears when navigate via FAB menu using Up/Down keys on keyboard

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Bug6453286_1713425267957.Blue_frame.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01aacec44a086107f8
• Upwork Job ID: 1781073972718292992
• Last Price Increase: 2024-04-18

[melvin-bot]

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

[melvin-bot]

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

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

[izarutskaya]

@mallenexpensify I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[izarutskaya]

We think this issue might be related to the #vip-vsb.

[MahmudjonToraqulov]

Proposal

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

FAB – Blue frame appears when navigate via FAB menu using Up/Down keys

What is the root cause of that problem?

We didn't add style={styles.noSelect} here

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

We should add style={styles.noSelect} here.

What alternative solutions did you explore? (Optional)

N/A

Result

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @Santhosh-Sellavel (Internal)

[mallenexpensify]

Checking on in #expensify-open-source to see if anyone's been working on FAB that might have caused this regression. @Santhosh-Sellavel , any thoughts/idea? I searched E/App for issues with fab in the title and nothing looked suspect.

[ishpaul777]

It appears to be coming from #39201, doesn't feel like a blocker though

[mallenexpensify]

Thanks @ishpaul777 , I commented on that PR, tagged the author and C+ who reviewed for 👀.

Also, I was able to reproduce on staging and not on production

2024-04-18_14-54-12.mp4

[ishpaul777]

This almost feels like this is expected behaviour not a blocker but improved accessibilty feature

[mallenexpensify]

I think the grey when arrowing through is enough to denote the selection. I don't see a benefit to the blue border, but maybe I'm missing something.

Also agree it doesn't feel like it needs to be a blocker.

2024-04-18_15-02-01.mp4

[fedirjh]

@mallenexpensify This is the expected behavior. Prior to this PR, we had the blue frame and the grey highlight implemented separately. The blue frame would appear when navigating using Tab, while the grey highlight would appear when using the arrow keys. In the linked pull request, we have synchronized the blue frame and the grey highlight to ensure they appear consistently for both tab navigation and arrow key navigation.

Check this video from the prod behavior:

CleanShot.2024-04-19.at.03.12.29.mp4

[mallenexpensify]

Thanks Fedi, if it's intended behaviour, I'm closing. Comment/reopen if anyone disagrees.