From cc54152fd6662b0501f7f0a23794bc052565ec6e Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 9 Feb 2021 18:19:31 +0000 Subject: [PATCH] Remove explicit suppression of focus outline 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 | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 973b5d16c702..7b153d1a8456 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -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