From c17b2b834dadee6dd3604e7f22c53ddb029da834 Mon Sep 17 00:00:00 2001 From: patrickhlauke Date: Sat, 9 Mar 2019 10:59:33 +0000 Subject: [PATCH] Remove indiscriminate outline suppression for tabindex="-1" elements instead, only apply outline suppression if the browser wouldn't normally apply the focus outline, using the (currently experimental) `:focus-visible` pseudo-class --- scss/_reboot.scss | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/scss/_reboot.scss b/scss/_reboot.scss index c55d42e44a37..4955f7fe8fe3 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; }