useFocusVisible: Only show focus ring on keyboard input

[christianvuerings]

Adds useFocusVisible a React hook we can use in all of our components to only show the blue outline (focus ring) when using the keyboard.

In this first PR we only apply it to <Button />

Test Plan

Click on a <Button /> and don't see a focus ring:

Use the TAB key to get to a button and do see the focus ring:

[netlify]

Deploy preview for gestalt ready!

Built with commit 574551d

https://deploy-preview-1073--gestalt.netlify.app

[AlbertCarreras]

@christianvuerings Interesting. is this a standard?

[themindfuldev]

Looks good to me. The only consideration I had was about the DOM event listeners being global and then any DOM event will be fired off for all the handlers, in case this could cause unnecessary firing of these handlers. But since it's a global listener, it should not consume more memory and also will only fire at specific events. I'd just suggest keeping a look in the future to see if this can ever become a perf issue, if a page has too many components using useFocusVisible.

If that ever becomes an issue, an idea is to debounce the mousemove and pointermove events to reduce the number of handler callbacks.

[christianvuerings]

@christianvuerings Interesting. is this a standard?

Yes, this is https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible - however, since browser support is so low, we have to implement this in JavaScript right now.

https://caniuse.com/#search=focus%20visible