]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Remove explicit suppression of focus outline
authorPatrick H. Lauke <redux@splintered.co.uk>
Tue, 9 Feb 2021 18:19:31 +0000 (18:19 +0000)
committerMark Otto <otto@github.com>
Thu, 11 Feb 2021 03:35:52 +0000 (19:35 -0800)
It's unclear what the reason for first introducing the original hack here (for `[tabindex="-1"]:focus {...}`) was. Seems something that may have been useful/necessary in SuitCSS, but don't think BS ever relied on this. https://github.com/twbs/bootstrap/issues/18330
It's since been modified to only apply when the browser wouldn't apply a visible outline anyway based on its own heuristics (the `:not(:focus-visible)` part) https://github.com/twbs/bootstrap/pull/28437/

But now, thinking this through more...in browsers that do support this pseudo-selector, what this is essentially saying is redundant: don't apply outline in cases where a `tabindex="-1"` element receives focus but the browser wouldn't normally apply focus outline". at best, this is unnecessary. at worst, this actually overrides things an author may explicitly be trying to do with adding `:focus { outline: ... }` explicitly.

scss/_reboot.scss

index 973b5d16c70209e1bd7ad1d9ca79398598353e6c..7b153d1a84563fe421058fa31116071c8d573397 100644 (file)
@@ -57,20 +57,6 @@ body {
 }
 
 
-// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
-// on elements that programmatically receive focus but wouldn't normally show a visible
-// focus outline. In general, this would mean that the outline is only applied if the
-// interaction that led to the element receiving programmatic focus was a keyboard interaction,
-// or the browser has somehow determined that the user is primarily a keyboard user and/or
-// wants focus outlines to always be presented.
-// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
-// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
-
-[tabindex="-1"]:focus:not(:focus-visible) {
-  outline: 0 !important;
-}
-
-
 // Content grouping
 //
 // 1. Reset Firefox's gray color