Focus indicators across the app are not well-styled

[felixfbecker]

With adding keyboard shortcuts #19021, indicating the current focus across the app in a consistent manner becomes more important.
Currently, that focus indicator is very inconsistent and often not well-designed:

• Sometimes it's transparent, sometimes a deep blue (sometimes double)
• Sometimes it doesn't wrap around what visually looks like the interactive element because there are bad invisible paddings
• Sometimes the hover or pressed state is conflated with focus state
• Sometimes the focus indicator is cut off
• Sometimes they have a gap between the element and the outline, sometimes they don't
• Sometimes there is no padding between the text and the outline, making the text hard to read when focused or a button not appear symmetrical when focused

Examples:

• Search results have small gap above focus box

• Deep blue focus outline or double
  
  
  
  
  
  

• Cut-off outlines
  
  

• Same style for hover as for focus (transparency instead of outline)
  

Implementation notes:

• We should look into using outline again instead of box-shadow, browser support for more outline styling options has improved a lot.
• padding and margin need to be used carefully & intentionally. Even if they look visually the same, the focus outline is outside the padding and inside the margin.
• We obviously can't design a focus outline for every single instance of an interactive element in the app, we need a global style that work well in almost all cases, potentially with rare overrides in Wildcard components.

/cc @felixfbecker

[vovakulikov]

@felixfbecker, what are the benefits of using an outline instead of a box shadow? Is it because by using a custom outline, we automatically will override default outlines' appearance, and by this, we will solve problems with double focus ring appearance?

I just think that box-shadow has nothing to do with this problem you state in the description; we just didn't pay much attention to the focus styles. I see that, at the moment, we have a mix of focus-visible polyfill classes and native focus styles.

I think we could do a proper focus ring styles with box-shadow and solve this style problems that you listed above.

[camdencheek]

cc @taiyab since focus states are still pretty inconsistent, and this would be a good thing to take into consideration from the design side of things