Focus borders around content in many components are sometimes too distracting?

[alfredlucero]

We've been using Paste components in our project (and we're enjoying building out our new pages with it) such as Tabs, Combobox, Cards, Box, Text, Heading, Anchor, and Popovers and noticed if we were to use TabPanels with quite large content, it would have a large black focus border which can often be a bit distracting or not as elegant though after clicking anywhere in the tab panel content.

Imagine this Paste example but with a lot of content inside and taking up the whole page. We ended up not using TabPanels for the way we managed our routes changing based on tab selected and rendered our own children conditionally, but for others who may need to have a lot of content inside it could be an issue again.

Same thing when we used popovers the blue focus borders around either the X icon or the link inside the popover content area would distract from the rest of the copy.

After escaping the border focus, you can see the rest of the content is much easier to see.

I wonder if it would be less distracting from the rest of the content if we chose lighter/more transparent border colors around these content/focusable areas or make them more subtle while keeping accessibility for screen readers. Curious on anyone's thoughts on this if they share similar issues with the focusable borders?

[TheSisb]

Hi @alfredlucero,

We've been using Paste components in our project (and we're enjoying building out our new pages with it)

❤️

"... TabPanels with quite large content, it would have a large black focus border ..."

We understand that this focus border may initially appear strange. We've gotten this question several times before, here's a good answer from one of my colleagues on the matter: #1145 (comment)

Same thing when we used popovers the blue focus borders around either the X icon or the link inside the popover content area would distract from the rest of the copy.

The tricky thing with focus outlines is that they need to be visible and have high enough contrast with the background color and the component border color. The focus outline is barely over 3:1 contrast right now against white.

There are potentially a few options for us to consider:

• Make it not-blue across the board (not a fan of the inconsistent highlight behavior myself)
• Reduce the outline width (may be hard to see this on focused primary buttons, we'll have to test it)
• Make a focus outline that's specific to components with blue outlines, like primary/secondary buttons, where is where the color contrast constraints are narrowest

Specifically with the above two components:
Tabs could use another design pass on focus states. The focus state on the tabs and the content area are different from each other and from the focus outline on our buttons.
Popover design updates are planned. The close icon gets slightly smaller, and there's more padding, so we don't get that text + focus overlap we do now: https://www.figma.com/file/E6KUvMhioUmAgN0nwmReTM/Paste-Components?node-id=1042%3A125

I've left a note for our team to consider this further. In the short term I ask that you consider keeping the current behavior without adding any hacks or customizations to your code, so that if/when we do update these styles you can get the updates cheaply.

[alfredlucero]

Appreciate the rationale and potential changes in the future for focus borders across all of our components. Yeah we won't change anything in the meantime and keep it behaving as is today. Thanks for hearing out our concerns 😄

[richbachman]

Hi @alfredlucero. We just released an update to Tabs, and adjusted the focus state to be inline with other Paste component focus states. We also suggest adding a small amount of padding to the TabPanel content using Box if you want a little breathing room between the focus outline and the content. Something like space20 will do the trick.