Use `:focus-visible` polyfill

Created by: ffoodd

This is a very rough first try to include and use WICG's :focus-visible polyfill in Bootstrap. Let me add some background.

What

:focus-visible belong to CSS Selectors level 4 specification. As per the spec:

The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the user agent determines via heuristics that the focus should be made evident on the element.

Thus it's a very helpful selector to massively enhance accessibility. I suggest you read ":focus-visible and backwards compatibility" by @patrickhlauke for more explanation and even more background.

Why

First of all: it's an easy way to safely drop the (sometimes) ugly default outlines when activating things using a mouse. This PR, as-is, fixes #27163 (closed) and may help with #29875 (closed).

For years, Bootstrap has been using box-shadow for focus states, which can lead to some confusion since there's also a $enable-shadows variable that may cause some focus style to not render appropriately. See #26802 (closed) for an example.

But what's more promising here is that it'd allow us to make focus styles stronger and more obvious.

It would allow us to increase contrasts on :focus, which had been requested a few times (#23329 (closed) and #29422).

And I'm quite sure there's probably a few cases with our components where focus could be better. :)

How

There, I need some help from @twbs/js-review :D

I added the dependency, but this definetly require some JS love to be included in the best possible way. For now, I roughly imported the file form the node_modules—which can't obviously stay this way.

On the CSS side:

1. I added a global reset for default outlines: you can preview this in our docs navbar for example, which got the default outline until now.
2. This is using the [data-focus-visible-added] attribute instead of the .focus-visible class since it's environment-proof.
3. And we'll be able to enhance focus everywhere, but that's another story :) FYI in Boosted we chose to use 2px wide solid outlines, and a transition on outline-offset (which may vary, depending on the component). You can use keyboard to navigate through Boosted website to preview this.

Sidenote

@patrickhlauke mentionned in his post in 2018 the potential use of @supports—but it couldn't test for selector support at that time. Well, it can now and the support for, say, @supports selector(:focus-visible) is pretty much the same than support for :focus-visible.

So a future-proof, JS-free way to go might be using @supports—but it'd be much, much more verbose on the CSS side.