[docs] Add focus indicator style guidance

[hellogreg]

Because we currently have so many disparate keyboard focus styles across our site system (dashed/dotted/solid/inset outlines, background highlights, text color changes, etc.), we're standardizing these indicators to align with WCAG 2.2's recommendation:

Solid, offset outlines of at least 2px with at least 3:1 background/adjacent contrast

We need to craft some verbiage, add some relevant imagery, find a logical home for this at ux.redhat.com, and get the word out to our designers and engineers.

We've already got some documentation on this topic strewn across the site (e.g. the CTA Styles page), some of which we can consolidate for this issue.

References:

• Focus styles at RHDC discovery deck
• CodePen of proposed styles
• RHDS CTA focus guidance
• WCAG 2.2 SC 2.4.13: Focus Appearance

[hellogreg]

I'm working on an initial draft of the text for this now. But we also need to decide where this content will live.

There is currently a Focus section on the Accessibility > Design page. We could put this new content in a subsection under that section, and put the existing content in new subsections:

• Design page
  • Focus section
    • Focus indicator styles (new subsection and content)
    • Focus and context changes (new subsection heading for existing content)
    • Focus traps (new subsection heading for existing content)

Or we could put it somewhere in the Foundations area of the site (either on an existing page or a new Interactions page), to make it clear that this is a design standard--and not just an accessibility topic. Or we could do something else altogether!

Thoughts, @markcaron or @coreyvickery ?

[markcaron]

I would think that we're wanting to document the focus states in 2 ways:

1. Under Accessibility > Design > Interactions — as guidance on accessibility requirements and general affordance, using our graphics as examples.
2. Under a new page: Foundations > Interactions — as guidance on our design system's approach to interactions, including focus states as well as guidelines around ALL interactions, with graphics/examples

There may be some repetition, but I think that's ok. We can also cross-link the sections where appropriate.

Note: @hellogreg, when you messaged me in chat, I arrived at the Foundations idea ahead of coming here and reading your comment above. Great minds!

[hellogreg]

Thanks, @markcaron ! I do like the idea of an Interactions page.

[coreyvickery]

@hellogreg @markcaron I agree with everything.

Can we also add a subnavigation to the Accessibility > Design page at some point?

[hellogreg]

@coreyvickery I think that's a great idea.