Add :focus-visible as appropriate

[francisrupert]

To Do

• [x] Research
• [x] Design
• [x] SCSS
• [x] Test
  • [x] All focusable elements (within fsa-style)
  • [x] In legacy projects to avoid introducing bugs
  • [x] Mouse only
  • [x] Keyboard only
  • [x] Browsers (Windows)
  • [x] Browsers (Mac)
• [x] Pair with :active (?)

Task

Explore and research implications of adding :focus-visible throughout fsa-style. By definition:

One additional benefit: preventing product teams using fsa-style from unilaterally removing all focus styles across the board. A major accessibility and Section 508 violation. Extremely common, and I've had to slap the hands of at least two teams that did so.

Browser support is still not perfect, but good enough that it's worth considering and is a good example of Progressive Enhancement. That is, focus styles will continue to render as always, while newer browsers get this new feature. Eventually browser support falls in line. Key to the Progressive Enhancement approach is the approach outlined in below reference.

Background

“the intent of :focus-visible is to allow authors to provide clearly identifiable focus styles which are visible when a user is likely to need to understand where the focus is, and not visible in other cases.” Or, in other words, it lets you show focus styles only when they are needed.

via https://matthiasott.com/notes/focus-visible-is-here

Demo

https://codepen.io/matthiasott/pen/LYZEwBJ

[francisrupert]

Initial exploration has a nice result. Additional consideration: coordinating with :active to provide further feedback of user's physical click.

[francisrupert]

Reopening to test OS X

[francisrupert]

Tested across browsers across OS X.