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 outline
s 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:
- I added a global reset for default
outline
s: you can preview this in our docs navbar for example, which got the defaultoutline
until now. - This is using the
[data-focus-visible-added]
attribute instead of the.focus-visible
class since it's environment-proof. - And we'll be able to enhance focus everywhere, but that's another story :) FYI in Boosted we chose to use
2px
wide solidoutline
s, and atransition
onoutline-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.