feat(focus-visible): default enhanced focus styles using outline-offset

Orange-OpenSource · May 27, 2020 · 0ab40fb · 0ab40fb
1 parent 64ad4b6
commit 0ab40fb
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -70,11 +70,18 @@ body {
  outline: 0 !important;
 }
 
-// Boosted mod
-// Using the :focus-visible polyfill to hide outline defensively
+// Boosted mod: focus state
+//
+// 1. Default focus state
+// 2. Using the :focus-visible polyfill to hide outline defensively
 // See https:/WICG/focus-visible
+
+:focus {
+ outline: $outline-width solid; // 1
+}
+
 .js-focus-visible :focus:not([data-focus-visible-added]),
-.js-focus-visible .focus:not([data-focus-visible-added]) {
+.js-focus-visible .focus:not([data-focus-visible-added]) { // 2
  outline: 0 !important;
 }
 // End mod
@@ -207,13 +214,14 @@ ul {
 
 // Future-proof markers' color
 // See https://developer.mozilla.org/fr/docs/Web/CSS/::marker
+// stylelint-disable selector-max-type
 li::marker {
  color: $primary;
  vertical-align: middle;
 }
 
 li li::marker { color: $gray-600; }
-// stylelint-disable-next-line selector-max-type
+
 li li li::marker { color: $gray-500; }
 
 // Bullet-proof markers' color
@@ -225,8 +233,9 @@ li::before {
 }
 
 li li::before { color: $gray-600; }
-// stylelint-disable-next-line selector-max-type
+
 li li li::before { color: $gray-500; }
+// stylelint-enable selector-max-type
 // End mod
 
 dt {
@@ -253,6 +262,7 @@ blockquote {
 // Add the correct font weight in Chrome, Edge, and Safari
 
 b,
+em, // Boosted mod
 strong {
  font-weight: $font-weight-bold; // Boosted mod: ensure 700
 }
@@ -301,6 +311,15 @@ sup { top: -.5em; }
 a {
  color: $link-color;
  text-decoration: $link-decoration;
+ // Boosted mod
+ outline-offset: $outline-offset * 4;
+ @include transition($transition-focus);
+
+ &:focus {
+ color: $link-hover-color;
+ outline-offset: $outline-offset;
+ }
+ // End mod
 
  &:hover {
  color: $link-hover-color;
@@ -606,7 +625,7 @@ legend {
 // https:/twbs/bootstrap/issues/11586.
 
 [type="search"] {
- outline-offset: -2px; // 1
+ outline-offset: -#{$outline-offset}; // 1 // Boosted mod
  -webkit-appearance: textfield; // 2
 }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -370,6 +370,9 @@ $border-radius: null !default;
 $border-radius-sm: null !default;
 $border-radius-lg: null !default;
 
+$outline-width: $border-width !default; // Boosted mod
+$outline-offset: $outline-width !default; // Boosted mod
+
 $rounded-pill: 50rem !default;
 
 $box-shadow: null !default;
@@ -386,7 +389,7 @@ $caret-spacing: $spacer / 2 !default;
 $transition-base: all .2s ease-in-out !default;
 $transition-fade: opacity .15s linear !default;
 $transition-collapse: height .35s ease !default;
-//$transition-focus: null !default;
+$transition-focus: outline-offset .2s ease-in-out !default; // Boosted mod
 
 // scss-docs-start embed-responsive-aspect-ratios
 $embed-responsive-aspect-ratios: (