rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source 
instead, only apply outline suppression if the browser wouldn't normally apply the focus outline, using the (currently experimental) `:focus-visible` pseudo-class
This commit is contained in:
Patrick H. Lauke 2019-03-12 13:16:18 +00:00 committed by XhmikosR
parent 87527d8149
commit 86a97d197e
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
scss/_reboot.scss
View File

@ -54,12 +54,16 @@ body {
background-color: $body-bg; // 2 background-color: $body-bg; // 2
} }
// Suppress the focus outline on elements that cannot be accessed via keyboard. // Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
// This prevents an unwanted focus outline from appearing around elements that // on elements that programmatically receive focus but wouldn't normally show a visible
// might still respond to pointer events. // 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.
// //
// Credit: https://github.com/suitcss/base // See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
[tabindex="-1"]:focus { // and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
[tabindex="-1"]:focus:not(:focus-visible) {
outline: 0 !important; outline: 0 !important;
} }