Epic: audit interactive components' `:focus` styles for compatibility across supported browsers

[caripizza]

Background

We currently support the last 2 versions of Chrome, Firefox, Safari, and Edge. We should ensure focus outlines appear consistently across these browsers in our interactive components.

Per Figma > Calcite Components > _Master Styles, here are the "Focus State Rules":

Rule 1. First choice:

/* Use `focus-inset` TW utility which amounts to: */
.focus-inset {
  outline: 2px solid var(--calcite-ui-brand);
  outline-offset: -2px;
}

Rule 2. Second choice (when first choice isn't possible):

/* Use `focus-outset` TW utility which amounts to: */
.focus-outset {
  outline: 2px solid var(--calcite-ui-brand);
  outline-offset: 2px;
}

Desired Outcome

1. Interactive components (should) use the focus-base TW utility to add an initial transparent outline color when not in focus. It currently includes a CSS transition. Explore removing this transition completely to make our components load perceptibly faster:

/* (Also appears as `focus-style-base` mixin in some components) */
.focus-base {
  outline-offset: 0;
  outline-color: transparent;
  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out; // REMOVE ME
}

2. For each focusable component, audit its focus styles. Make a list of each component and which rule (1 or 2 above) it utilizes for its focus.

3. Resolve inconsistencies between similar components' focus states (ie., across button components)

4. Ensure all fine-tuned focus outlines appear across supported browsers.

5. Edit (or remove) the readme focus content which we include in cc global styles: https://github.com/Esri/calcite-components/blob/master/src/assets/styles/readme.md#focus-states

[macandcheese]

Thanks for putting this together. I'm definitely in favor of removing the transition effect - as you mention it makes a lot of our components appear "slow".

[caripizza]

Related: #1359

[jcfranco]

I believe this one is superseded by #4633 and #6458. @macandcheese @geospatialem can you confirm?

[macandcheese]

[geospatialem]

Also confirm the above ☝🏻. Closing!