[$500] Web - Bank Account - Blue box focus appears when clicking enter

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v1.4.3-6
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:
Slack conversation: @

Action Performed:

1. Go to settings > Workspace > choose a workspace (currency should be USD)
2. Bank account > Connect Manually
3. Fill in the details of steps 1 - 3. Then proceed to the next part of Step 3(Choose your documents step)
4. Click with your mouse on an empty field near the passport and driving license buttons.
5. Press on Enter from the Keyboard.

Expected Result:

No blue box is shown when clicking enter

Actual Result:

blue box is shown when clicking enter

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Bug6290107_1700899045737.test17_Bluebox.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01140847c130c78965
• Upwork Job ID: 1728906192050343936
• Last Price Increase: 2023-11-26

[melvin-bot]

Triggered auto assignment to @sakluger (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[zukilover]

Proposal

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

Document area shows blue box on clicking enter.

What is the root cause of that problem?

The blue box comes from onFido UI, specifically at restrictedDocumentSelection where it has a tabIndex of 0.
This results in the scrollable content (onfido-sdk-ui-Theme-scrollableContent) to focus when hitting Enter.

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

Remove box-shadow on restrictedDocumentSelection:

#onfido-mount [tabindex="-1"]:focus-visible,
#onfido-mount [tabindex="-1"]:focus[data-focusvisible-polyfill],
#onfido-mount [tabindex="0"]:focus-visible[data-page-id="restrictedDocumentSelection"] {
    box-shadow: none !important;
}

What alternative solutions did you explore? (Optional)

Override the tabIndex manually from this line

App/src/components/Onfido/index.website.js

Lines 9 to 10 in d985a0e

	useEffect(
	() => () => {

:

          let overrideTabIndex = null
            if (baseOnfidoRef.current) {
                overrideTabIndex = setTimeout(() => {
                    const documentSelection = baseOnfidoRef.current.querySelector('[data-page-id="restrictedDocumentSelection"]')
                    documentSelection.tabIndex = -1
                }, 3000)
            }

[allroundexperts]

@zukilover Can't you apply the styles directly in src/components/Onfido/index.css?

[zukilover]

@allroundexperts we can of course apply an outline: none in the css, but it does not override the tabIndex. And this tabIndex is currently doing nothing other than focusing on the scrollable content of onFido.

[allroundexperts]

I think its better to use outline as it does not involve the usage of setTimeouts which we highly discourage. Also, we've done that in past as well (https://github.com/allroundexperts/Expensify/blob/b0b1ff344f5b1523d46083781e0fbc8253a29f91/src/components/Onfido/index.css#L31).

[zukilover]

@allroundexperts in that case, I have updated my proposal:

Proposal

Updated

[allroundexperts]

@zukilover's proposal looks good to me.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @roryabraham, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[roryabraham]

Sorry, I'm going to close this as not worth fixing.