aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/scss/_reboot.scss
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/twbs/bootstrap/scss/_reboot.scss')
-rw-r--r--vendor/twbs/bootstrap/scss/_reboot.scss29
1 files changed, 14 insertions, 15 deletions
diff --git a/vendor/twbs/bootstrap/scss/_reboot.scss b/vendor/twbs/bootstrap/scss/_reboot.scss
index c55d42e44..b6c98ccd7 100644
--- a/vendor/twbs/bootstrap/scss/_reboot.scss
+++ b/vendor/twbs/bootstrap/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;
}
@@ -184,30 +188,25 @@ a {
text-decoration: $link-decoration;
background-color: transparent; // Remove the gray background on active links in IE 10.
- @include hover {
+ @include hover() {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
}
}
-// And undo these styles for placeholder links/named anchors (without href)
-// which have not been made explicitly keyboard-focusable (without tabindex).
+// And undo these styles for placeholder links/named anchors (without href).
// It would be more straightforward to just use a[href] in previous block, but that
// causes specificity issues in many other styles that are too complex to fix.
// See https://github.com/twbs/bootstrap/issues/19402
-a:not([href]):not([tabindex]) {
+a:not([href]) {
color: inherit;
text-decoration: none;
- @include hover-focus {
+ @include hover() {
color: inherit;
text-decoration: none;
}
-
- &:focus {
- outline: 0;
- }
}