fix(tabs): focus on tabs show complete outline

[ansor4]

https://artsyproduct.atlassian.net/browse/EMI-2614

Description

• Shows outline around the entire tab instead of the current behavior, which only highlights bottom and side of tab
• I had a hard time getting the focus outline to expand to the top, but that's the current area of the Clickable element. I imagine the core fix there is to be the Clickable element take up that space.

Before:

After:

[dzucconi]

It'd make sense for this to be a more intentionally designed state, which this doesn't appear to be? (I could imagine the text just being underlined, or the bg getting darker, etc.)

[dzucconi]

I find it surprising this doesn't alter the spacing of the elements, which applying a border typically would.

[rquartararo]

This is just for accessibility so we don't want to use the focus state here as this will render the blue border on mouse click as well.

[rquartararo]

@ansor4 I'm good with this change if we use focus-visible as @dzucconi suggested, though ideally I'd like to figure out why the outline is being cut off 🤔

[dzucconi]

It gets cut off because of the overflow-x on the HorizontalOverflow. outline positions a border outside of the bounding box of the div. box-shadow is also an acceptable attribute to use to create the outline if the border poses a positioning problem. I still think something else, like a text-decoration, would look better though.

[rquartararo]

@dzucconi I don't think text-decoration would be sufficient for accessibility. Adding 1px of padding to the HorizontalOverflow on BaseTabs seems to do the trick.

[dzucconi]

Eh, I wouldn't do that as it'll change the spacing of every instance by 1px. Better to use border or box-shadow.

[artsyit]

🚀 PR was released in @artsy/[email protected], @artsy/[email protected] 🚀