Standardize focus indicator for interactive components

[marionnegp]

Description

Some components, like CTAs, use different focus indicators than others, like jump links, for their focus states. These should be standardized as much as possible using the focus indicator from the design system kit.

Suggested solution

The focus indicator is 2px thick. For an outer focus indicator, there should be a 1px margin between the focused element and the focus indicator.

color: #06c

color: #73BCF7

color: #fff

Example: This tertiary button uses the outer focus indicator.

Example API

They should work similarly to the tabs and jump links under [Explore Red Hat Products](https://www.redhat.com/en#browse-products) on the homepage

Additional context

Component focus states can be updated as they're found.

[bennypowers]

Does the outline property suit your requirements or would you rather use borders? TL;DR: border is more flexible but less performant

[marionnegp]

Outline sounds fine. `outline-offset' should also be an easier way to add space between the element and the focus indicator.

Can outlines have rounded corners on more browsers now? I think we're actually using it for the jump link component's focus state, and that outline is slightly rounded.

[bennypowers]

Check out the last demo on https://developer.mozilla.org/en-US/docs/Web/CSS/outline

the outline will follow the border radius of the element on FF and Chrome (desktop mac), but not Safari

[marionnegp]

Cool, I don't think it's a big deal that border radius isn't supported for outlines on Safari. I think it's more important that we start getting focus states to look more similar. @coreyvickery or @ronniemcbride, chime in if you feel otherwise.