From: Patrick H. Lauke <redux@splintered.co.uk>
Date: Tue, 12 Mar 2019 13:16:18 +0000 (+0000)
Subject: Remove indiscriminate outline suppression for tabindex="-1" elements (#28437)
X-Git-Tag: v5.0.0-alpha1~1216
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=3e05d016cf18e99725b9e77491a501c97b8dc7ac;p=thirdparty%2Fbootstrap.git

Remove indiscriminate outline suppression for tabindex="-1" elements (#28437)

instead, only apply outline suppression if the browser wouldn't normally apply the focus outline, using the (currently experimental) `:focus-visible` pseudo-class
---

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index c55d42e44a..4955f7fe8f 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -54,12 +54,16 @@ body {
   background-color: $body-bg; // 2
 }
 
-// Suppress the focus outline on elements that cannot be accessed via keyboard.
-// This prevents an unwanted focus outline from appearing around elements that
-// might still respond to pointer events.
-//
-// Credit: https://github.com/suitcss/base
-[tabindex="-1"]:focus {
+// 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;
 }