Make outline consistent for all focusable elements in the APP across platforms.

[parasharrajat]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open any convo on E.cash on the web.
2. Try to use the tab for navigation.
3. See multiple elements get focus with an outline that is different across the platforms.

Expected Result:

1. same Color of outline for each platform.

Actual Result:

Describe what actually happened

1. Web(chrome) shows black solid.
2. Web Firebox shows dotted line.
3. Desktop has a yellow border.
4. ETC...

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Just a UI thing.

Platform:

Where is this issue occurring?

Web ✔️
iOS
Android
Desktop App ✔️
Mobile Web

Version Number: Latest
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

View all open jobs on Upwork

view this job on Upwork

cc: @shawnborton

[MelvinBot]

Triggered auto assignment to @stephanieelliott (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[stephanieelliott]

Was able to demo this by following the reproduction steps 👍

[MelvinBot]

Triggered auto assignment to @ctkochan22 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

Triggered auto assignment to @jboniface (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[parasharrajat]

To fix this easiest way is to override the global Outline style so that it reflects on each platform.
Add Global CSS style to index.html

*::focus{
	outline: 1px solid COLOR;
}

or we can use box-shadow as bootstrap uses for the blurred outline.

If don't want to use the global style which I am aware of, the best option to do is to disable the default outline and only apply to the specific elements with

addOutlineWidth()

I would say its better to handle the web-specific global styles as a global stylesheet. We can call this browser-reset. They are used to reset the browser-applied styles which we don't want.

[MelvinBot]

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

[jboniface]

@tgolen please check Rajat's proposal when you get a chance!

[tgolen]

I'm OK with the CSS route. Is that going to make sure that android and ios are consistent too?

[parasharrajat]

Yeah. I think Android or IOS does not have an outline for focused elements. And for those elements which we want to show outline, are already configured to show correct one using addOutlineWidth. But I will double-check this.

[tgolen]

Hm, OK. That sounds like things would still not be consistent then across platforms, since ALL web elements would get the outline, but android/ios would have it only for specific elements with addOutlineWidth.

[tgolen]

So maybe using addOutlineWidth across all platforms would be the most consistent approach then.

[parasharrajat]

No so Global styles would be overwritten by addOutlineWidth. There are many elements on the Web that are not configured to show outline but the browser shows a default outline. So it's better to tackle them via Global style and native devices do not have default outlines so no elements show outline unless added.

Just like from reproducing Steps, Native does not have tab navigation.

since ALL web elements would get the outline

They already have but we are trying to set the correct color and style. We can also disable them but that is not accessible.

[tgolen]

OK, but with your proposal above, it would ADD a default outline to everything in web. Shouldn't the global style be removing the outline from everything by default, and then addOutlineWidth would add it to the elements necessary? I guess I'm expecting the global style to be:

*::focus{
	outline: 0px;
}

[parasharrajat]

I am not sure if disabling the outline is a good idea. It's better to pull the design team for that. We just closed one of the issues #3041 like that.

Yeah, this style will be used to hide them but if we want to hide.

[tgolen]

Yeah, this style will be used to hide them but if we want to hide.

Sorry, I'm not quite sure what you mean here. Can you please restate that?

[parasharrajat]

I mean,

*::focus{
	outline: 0px;
}

can be used to hide, but only if we want to hide outlines.

[tgolen]

Ah right, gotcha. So, I think if the problem is "focus styles aren't consistent across platforms", then on web, hiding all outlines by default would fix that problem. Right?

[shawnborton]

Late to the convo here, but hiding the outline styles might be a bad idea for accessibility right?

[parasharrajat]

Yes, hiding outlines is bad.

[tgolen]

OK, yes, that probably is. But what I'm trying to say is that while the problem that this issue describes is solved by the proposal, it also opens up a brand new issue where focus styles are still inconsistent between platforms. Because in web, any focused element will have an outline now, whereas android/ios will only get outlines for ones that are configured to have outlines.

[parasharrajat]

We already have outlined on WEB but not on Native devices. And you want to fix this problem thus remove outlines on the web. Keeping selected elements aside.

I am saying we set the color correctly as the outline is important. There are few things the web handles differently.

[tgolen]

We already have outlined on WEB

OK, I think this is the part I didn't realize. If web already has a default focus for everything, then at least we aren't creating a new problem. In that case, making the colors consistent is at least a step in the right direction.

🟢

[parasharrajat]

@shawnborton What would be the outline color?

[shawnborton]

I suppose we could make the outline color the same color that we use for :focus on inputs, which is our brand blue?

That being said, a lot of products have different outline colors based on the element. Take GitHub for example:

Anyways, I think the simplest thing to do is use our blue color for now and then we can revisit individual components if we want to override the default blue behavior. How does that sound?

[parasharrajat]

Yes. Those individual elements already reflect what is assigned to them.

[jboniface]

reminder to self to pay bonus for this (if i fail to do this let me know, raj)

[MonilBhavsar]

@jboniface PR is merged, Reopening for payment

[Julesssss]

@parasharrajat it looks like this PR introduced a regression.

On commit f99dea6bf I see this:

[parasharrajat]

@Julesssss This is not a regression from this PR. I fixed the outline styles for the whole app which was wrong. If any other input in the app is showing this effect and this is a regression from this PR. but all other inputs are working fine.
I just checked that that Component is using overflow:hidden which will hide every outline which I verified by reverting my changes.

Please let me know if you want me to fix that issue.

[Julesssss]

Ah, I see. Thanks for explaining! Yep that would be great, but I'll discuss further on the raised issue.

[MelvinBot]

@tgolen, @parasharrajat, @jboniface it looks like no one is assigned to work on this job.
Please double the price or add a comment stating why the job isn't being doubled.

[parasharrajat]

Ding Ding. It's done.

[jboniface]

paid

[botify]

@tgolen @jboniface Be sure to fill out the Contact List!