Improve focus state of different components, for keyboard based navigation

[mmbotelho]

Problem

Copy-pasted from a comment left by @sandrina-p on Figma:

Recently a new CSS pseudo-class was created. :focus-visible. This is similar to :focus but only happens if it was reached by keyboard (Tab).

This is very useful to create better focus states that don't show up when the user interacts with a button (or any other interactive element) through keyboard.

Here's a demo: https://codesandbox.io/s/focus-visible-nvnls?file=/src/Button.jsx

It would be nice if you could review the focus states around the app! Personally I think some of them are hard to detect when we only use keyboard.

Solution

• Identify components that don't have a good-enough focus state;
• Create a more distinct focus state to use on :focus-visible

[sandrina-p]

A note to add: :focus-visible it's not supported by almost any browser yet. But there's a polyfill called focus-visible that we can use until it get's supported by all major browsers.