[HOLD for payment 2024-12-07] [$250] mWeb/Chrome - Inbox - Blue frame on search icon after returning from finder with device back button

[lanitochka17]

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.0.58-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Open the staging.new.expensify.com website
2. Tap on the search icon on the top right corner
3. Write anything on the search input
4. Return to inbox using device back button
5. Verify that search icon remains the same

Expected Result:

No difference should be seen on search icon after opening finder, writing on search input and returning to inbox

Actual Result:

A blue frame is displayed around search icon after navigating to finder, writing on search input and returning to inbox using device back button

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6656631_1730902841381.Frame.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021854990083710446627
• Upwork Job ID: 1854990083710446627
• Last Price Increase: 2024-11-15
• Automatic offers:
• rojiphil | Reviewer | 105007702
• nyomanjyotisa | Contributor | 105007705

Issue Owner

Current Issue Owner: @MitchExpensify

[melvin-bot]

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

[nyomanjyotisa]

Proposal

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

mWeb/Chrome - Inbox - Blue frame on search icon after returning from finder with device back button

What is the root cause of that problem?

This code applies a box-shadow to elements when they are in the focus-visible state

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

Add style.boxShadowNone to this line of style

What alternative solutions did you explore? (Optional)

Use pressableRef?.current?.blur() to blur the search button here when the user presses it. This approach prevents issues when the user wants to navigate to the search button using the Tab key

                onPress={Session.checkIfActionIsAllowed(() => {
                    pressableRef?.current?.blur();
                    Timing.start(CONST.TIMING.SEARCH_ROUTER_RENDER);
                    Performance.markStart(CONST.TIMING.SEARCH_ROUTER_RENDER);

                    openSearchRouter();
                })}

Result

mWeb.Chrome.mp4

[truph01]

Proposal

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

• Blue outline appears on the search icon after returning from Finder using the device's back button (or swipe-right action), but not when tapping the app's back button ('<') in the top left.

What is the root cause of that problem?

• In HTML, an element receives the focus-visible pseudo-class (typically displaying a visible border or outline by default, and unrelated to our custom focus-visible as defined here) when focused in a way that usually requires a visible indicator. This behavior varies depending on user interaction:

1. Keyboard Focus: If the user navigates to the element using the keyboard (like pressing the Tab key), the focus-visible class is applied to indicate the focused element.

2. Programmatic Focus with focus(): If you programmatically focus the element using JavaScript (element.focus()) and the element is focusable, the browser may add the focus-visible class based on its heuristics for showing focus indicators.

3. Not Applied on Mouse Clicks: Generally, if an element receives focus due to a mouse click, the focus-visible class is not applied, as browsers usually suppress the focus indicator in this case.

• The behavior I`ve mentioned:

Blue outline appears on the search icon after returning from Finder using the device's back button (or swipe-right action), but not when tapping the app's back button ('<') in the top left.

relates to conditions in points 1 and 3 above.

• In detail:

Device Back Button or Swipe-Right Action: When the search icon is clicked and a keyboard interaction occurs, the focus-visible class is applied, marking the element as focused. Exiting via the device’s back button or swipe-right keeps the focus-visible indicator on the search icon.

App Back Button (‘<’): If the search icon is clicked, then a keyboard action occurs, the focus-visible class is initially applied. However, when the app’s back button is pressed, the browser, recognizing this as a mouse action, suppresses the focus-visible indicator, leaving the search icon without the focus-visible class.

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

• To solve the issue, we just need to prevent search button from being focused when clicking on it:

App/src/components/Search/SearchRouter/SearchButton.tsx

Line 28 in 0f03601

<PressableWithoutFeedback

            <PressableWithoutFeedback
                onMouseDown={(e) => e.preventDefault()}

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[ikevin127]

Proposal

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

A blue frame is displayed around search icon after navigating to finder, writing on search input and returning to inbox using device back button.

What is the root cause of that problem?

We are applying the :focus-visible pseudo-class styling at the index.html level which applies to all web based platforms (Web, Desktop, Android / iOS mWeb), the pseudo-class is applied in two distinct places:

App/web/index.html

Lines 65 to 67 in 0f03601

	:focus-visible {
	outline: 0;
	box-shadow: inset 0px 0px 0px 1px #5AB0FF;

and

App/web/index.html

Lines 83 to 86 in 0f03601

	:focus[data-focusvisible-polyfill] {
	outline: 0;
	box-shadow: inset 0px 0px 0px 1px #5AB0FF;
	}

the root cause of our issue being that the pseudo-class style is applied globally to all web based platforms, including mWeb without any exclusion.

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

There's a simple and practical CSS-based solution to keep the :focus-visible pseudo-class styling only on devices with cursor pointers (Web / Desktop) and not on touch based devices (Android / iOS mWeb).

To do this we will use the widely supported feature @media: pointer with the coarse value which represents:

The primary input mechanism of the device includes a pointing device of limited accuracy. Examples include touchscreens and motion-detection sensors (like the Kinect peripheral for the Xbox.)

In order to cover both instances where we use the :focus-visible pseudo-class style, we will add the fix under this style block (cascading) such that it will apply to both of them since they are located above, like so:

/* Our first pseudo-class style */
:focus-visible {
    outline: 0;
    box-shadow: inset 0px 0px 0px 1px #5AB0FF;
}

/* ... */

/* Our second pseudo-class style */
:focus[data-focusvisible-polyfill] {
    outline: 0;
    box-shadow: inset 0px 0px 0px 1px #5AB0FF;
}
/* Disable the box-shadow for coarse (touch) pointers */ <- Added our fix right here
@media (pointer: coarse) {
    :focus-visible, :focus[data-focusvisible-polyfill] {
        box-shadow: none;
    }
}
<- End of fix

✅ This ensures the focus effect still stands on Web / Desktop but it won't show up on Android / iOS mWeb anymore, fulfilling the issue's Expected result.

Note

I think it is paramount that we keep the focus visual feedback on the search icon for Web / Desktop platforms for accessibility reasons.

Videos (before / after)

Android: mWeb

Before	After
before.mp4	after.mp4