Add focus state on tab keypress

[pattyde]

• [x] I’ve read and understood the Contributing guidelines and have done my best effort to follow them.
• [x] I’ve read and agree to the Code of Conduct.
• [x] I’ve searched for any related issues and avoided creating a duplicate issue.

Description

What happened

The focus state appears whenever I click a button or a link.

What I expected to happen

The focus state should be disabled until the tab key is pressed.

Reproducing

• Module name: Core
• Module version: latest

Steps to reproduce:

1. Build the design system documentation site locally
2. Click any link or button

Attachments

Westpac's GEL does something similar

[theartofpeople]

Just a note as we've been tossing up between the two approaches to this.

We've been trying out What Input (https://github.com/ten1seven/what-input) to apply visible focus styles selectively.

It seems workable for (HTML native) links and buttons, but I've avoided using it with our forms, because where we use non-native form elements (e.g. where a styleable visual element is layered over the top of a form control) What Input doesn't reliably pick up and apply changes in input mode.

My personal preference to be honest would be to show focus styles universally (ie as currently in the DTA components), this also removes the need to maintain the extra Javascript.

[alex-page]

We will probably end up using this modern CSS selector to adjust the focus state. This would gracefully degrade to showing the focus state on older browsers.

Note: this is not supported yet so hold your horses

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

https://twitter.com/LeaVerou/status/1045768279753666562