feat(focus-visible): increase focus visibility everywhere

Orange-OpenSource · May 27, 2020 · 7b4e6b3 · 7b4e6b3
1 parent 6112898
commit 7b4e6b3
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 26 deletions.
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
@@ -201,11 +201,15 @@
       border-color: $gray-500;
     }
 
-    &:active {
+    // stylelint-disable selector-max-class
+    &:active,
+    &.active.focus {
       color: $white;
       background-color: $primary;
       border-color: $primary;
+      outline-color: $primary;
     }
+    // stylelint-enable selector-max-class
 
     &.active {
       color: $white;

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -17,6 +17,7 @@
   user-select: none;
   background-color: transparent;
   border: $btn-border-width solid transparent;
+  outline-offset: map-get($spacers, 1); // Boosted mod
   @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
   @include transition($btn-transition);
 
@@ -27,6 +28,7 @@
 
   &:focus,
   &.focus {
+    outline-offset: $btn-border-width; // Boosted mod
     box-shadow: $btn-focus-box-shadow;
   }
 

diff --git a/scss/_card.scss b/scss/_card.scss
@@ -248,6 +248,7 @@
       border: 0;
 
       .btn {
+        position: relative;
         width: add(100%, $accordion-spacer * 2);
         padding: $card-cap-padding-y;
         margin: 0 -#{$accordion-spacer};

diff --git a/scss/_close.scss b/scss/_close.scss
@@ -21,6 +21,12 @@
     outline-offset: -#{$border-width};
   }
 
+  // Boosted mod
+  &:focus {
+    @include transition($transition-focus);
+  }
+  // End mod
+
   &:disabled,
   &.disabled {
     pointer-events: none;

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
@@ -152,6 +152,7 @@
   &:focus {
     color: $dropdown-link-hover-color;
     text-decoration: if($link-hover-decoration == underline, none, null);
+    outline-color: $dropdown-link-hover-bg; // Boosted mod
     @include gradient-bg($dropdown-link-hover-bg);
   }
 

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
@@ -22,13 +22,17 @@
   width: 100%; // For `<button>`s (anchors become 100% by default though)
   color: $list-group-action-color;
   text-align: inherit; // For `<button>`s (anchors inherit)
+  outline-offset: $spacer; // Boosted mod
+  @include transition($transition-focus); // Boosted mod
 
   // Hover state
   &:hover,
   &:focus {
     z-index: 1; // Place hover/focus items above their siblings for proper border styling
     color: $list-group-action-hover-color;
     text-decoration: none;
+    outline-color: $list-group-action-color; // Boosted mod
+    outline-offset: $list-group-border-width; // Boosted mod
     // Boosted mod: no background change
   }
 

diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -63,6 +63,9 @@
       color: color-contrast($nav-tabs-link-hover-border-color); // Boosted mod
       background-color: $nav-tabs-link-hover-border-color; // Boosted mod
       border-color: $nav-tabs-link-hover-border-color;
+      outline-color: $nav-tabs-link-hover-border-color; // Boosted mod
+      // stylelint-disable-next-line function-blacklist
+      outline-offset: var(--bs-tabs-spacing); // Boosted mod
     }
 
     &.disabled {
@@ -77,6 +80,7 @@
     color: $nav-tabs-link-active-color;
     background-color: $nav-tabs-link-active-bg;
     border-color: $nav-tabs-link-active-border-color;
+    outline-color: $nav-tabs-link-active-border-color; // Boosted mod
   }
 
   .dropdown-menu {
@@ -102,6 +106,7 @@
       color: $primary;
       background: none;
       border-color: transparent;
+      outline-color: currentColor;
     }
 
     &.active {
@@ -123,6 +128,7 @@
   .nav-link.active,
   .show > .nav-link {
     color: $nav-pills-link-active-color;
+    outline-color: $nav-pills-link-active-bg; // Boosted mod
     @include gradient-bg($nav-pills-link-active-bg);
   }
 

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -136,6 +136,10 @@
     outline-offset: $spacer;
     @include transition($navbar-transition);
 
+    &:focus {
+      outline-offset: 0;
+    }
+
     &.active::before {
       position: absolute;
       right: $nav-link-padding-y / 2;
@@ -196,6 +200,7 @@
   line-height: 1;
   background-color: transparent; // remove default button style
   border: $border-width solid transparent; // remove default button style
+  outline-offset: $spacer; // Boosted mod
   @include border-radius($navbar-toggler-border-radius);
   @include transition($navbar-toggler-transition);
 
@@ -205,6 +210,7 @@
 
   &:focus {
     text-decoration: none;
+    outline-offset: -$border-width; // Boosted mod
     box-shadow: 0 0 0 $navbar-toggler-focus-width;
   }
 

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
@@ -29,6 +29,7 @@
 
   &:focus {
     z-index: 3;
+    color: $pagination-focus-color; // Boosted mod
     outline: $pagination-focus-outline;
     box-shadow: $pagination-focus-box-shadow;
   }
@@ -37,6 +38,7 @@
     color: $pagination-active-color;
     background-color: $pagination-active-item-bg;
     border-color: $pagination-active-item-border-color;
+    outline-color: $pagination-active-item-border-color; // Boosted mod
   }
 
   // Boosted mod
@@ -57,6 +59,7 @@
     color: $pagination-active-color;
     @include gradient-bg($pagination-active-bg);
     border-color: $pagination-active-border-color;
+    outline-color: $pagination-active-bg; // Boosted mod
   }
 
   &.disabled .page-link {
@@ -89,6 +92,7 @@
       color: $pagination-hover-bg;
       background-color: $pagination-hover-color;
       border-color: $pagination-hover-color;
+      outline-color: $pagination-hover-color; // Boosted mod
     }
 
     &:active {

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -309,6 +309,7 @@ sup { top: -.5em; }
 // Links
 
 a {
+  display: inline-block; // Boosted mod: To make `outline` wrap multiple lines
   color: $link-color;
   text-decoration: $link-decoration;
   // Boosted mod
@@ -483,14 +484,7 @@ button {
   border-radius: 0;
 }
 
-// Work around a Firefox bug where the transparent `button` background
-// results in a loss of the default `button` focus styles.
-// Credit https://github.com/suitcss/base/
-
-button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
+// Boosted mod: we customized focus, no need to restore defaults
 
 // 1. Remove the margin in Firefox and Safari
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -386,10 +386,12 @@ $caret-width:                 add($spacer / 4, $border-width) !default;
 $caret-vertical-align:        center !default;
 $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:            outline-offset .2s ease-in-out !default; // Boosted mod
+$transition-duration: .2s !default; // Boosted mod
+$transition-timing:   ease-in-out !default; // Boosted mod
+$transition-base:     all $transition-duration $transition-timing !default;
+$transition-fade:     opacity $transition-timing linear !default;
+$transition-collapse: height .35s ease !default;
+$transition-focus:    outline-offset $transition-duration $transition-timing !default; // Boosted mod
 
 // scss-docs-start embed-responsive-aspect-ratios
 $embed-responsive-aspect-ratios: (
@@ -627,7 +629,7 @@ $btn-border-radius:           $border-radius !default;
 $btn-border-radius-sm:        $border-radius-sm !default;
 $btn-border-radius-lg:        $border-radius-lg !default;
 
-$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
+$btn-transition:              color $transition-duration $transition-timing, background-color $transition-duration $transition-timing, border-color $transition-duration $transition-timing, $transition-focus !default;
 
 
 // Forms
@@ -688,7 +690,7 @@ $input-height:                          add($input-line-height * 1em, add($input
 // Boosted mod: no input-sm
 $input-height-lg:                       add($input-line-height * (20 / 18) * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
 
-$input-transition:                      border-color .15s ease-in-out !default;
+$input-transition:                      border-color $transition-duration $transition-timing, $transition-focus !default;
 
 
 $form-check-input-width:                  1.25em !default;
@@ -697,7 +699,7 @@ $form-check-padding-left:                 $form-check-input-width + .5em !defaul
 $form-check-margin-bottom:                .125rem !default;
 $form-check-label-color:                  null !default;
 $form-check-label-cursor:                 null !default;
-$form-check-transition:                   background-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out !default;
+$form-check-transition:                   background-color $transition-duration $transition-timing, background-position $transition-duration $transition-timing, border-color $transition-duration $transition-timing !default;
 
 $form-check-input-active-filter:          null !default;
 $form-check-input-active-bg-color:        $component-active-bg !default; // Boosted mod
@@ -706,7 +708,7 @@ $form-check-input-bg:                     $body-bg !default;
 $form-check-input-border:                 $border-width solid $input-border-color !default;
 $form-check-input-border-radius:          null !default;
 $form-check-radio-border-radius:          50% !default;
-$form-check-input-focus-border:           $input-focus-border-color !default;
+$form-check-input-focus-border:           null !default;
 $form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow !default;
 
 $form-check-input-checked-color:          $component-active-color !default;
@@ -794,7 +796,7 @@ $form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For f
 $form-range-thumb-active-bg:               null !default;
 $form-range-thumb-active-border:           $component-active-bg !default; // Boosted mod
 $form-range-thumb-disabled-bg:             $gray-500 !default;
-$form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$form-range-thumb-transition:              background-color $transition-duration $transition-timing, border-color $transition-duration $transition-timing, box-shadow $transition-duration $transition-timing !default;
 
 $form-file-height:                $input-height !default;
 $form-file-focus-border-color:    $input-focus-border-color !default;
@@ -901,10 +903,10 @@ $navbar-brand-logo-minimized-height:   $spacer * 1.5 !default;
 $navbar-brand-name-margin:             0 $spacer 0 add($spacer / 2, $spacer / 4) !default;
 //$navbar-supra-padding-y:               $navbar-brand-logo-height / 10 !default;
 //$navbar-supra-padding-x:               $spacer / 4 * 1.5 !default;
-$navbar-transition-duration:           .2s !default;
-$navbar-transition-timing-function:    ease-in-out !default;
-$navbar-transition:                    padding $navbar-transition-duration $navbar-transition-timing-function !default;
-$navbar-brand-transition:              margin $navbar-transition-duration $navbar-transition-timing-function !default;
+$navbar-transition-duration:           $transition-duration !default;
+$navbar-transition-timing-function:    $transition-timing !default;
+$navbar-transition:                    padding $navbar-transition-duration $navbar-transition-timing-function, $transition-focus !default;
+$navbar-brand-transition:              margin $navbar-transition-duration $navbar-transition-timing-function, $transition-focus !default;
 $navbar-brand-logo-transition:         width $navbar-transition-duration $navbar-transition-timing-function, height $navbar-transition-duration $navbar-transition-timing-function !default;
 $navbar-active-transition:             bottom $navbar-transition-duration $navbar-transition-timing-function !default;
 // End mod
@@ -919,7 +921,7 @@ $navbar-toggler-padding-x:          .5rem !default;
 $navbar-toggler-font-size:          $font-size-base !default;
 $navbar-toggler-border-radius:      $btn-border-radius !default;
 $navbar-toggler-focus-width:        null !default;
-$navbar-toggler-transition:         null !default;
+$navbar-toggler-transition:         $transition-focus !default;
 
 $navbar-dark-color:                 $white !default;
 $navbar-dark-hover-color:           $orange-2 !default;
@@ -990,7 +992,8 @@ $pagination-margin-left:            $spacer / 2 !default;
 $pagination-border-color:           transparent !default;
 
 $pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
-$pagination-focus-outline:          $pagination-border-width solid $gray-500 !default;
+$pagination-focus-color:            $primary !default; // Boosted mod
+$pagination-focus-outline:          $pagination-border-width solid $pagination-focus-color !default;
 
 $pagination-hover-color:            $black !default;
 $pagination-hover-bg:               $white !default;
@@ -1259,7 +1262,7 @@ $carousel-control-color:             $black !default;
 $carousel-control-width:             $spacer * 1.5 !default;
 $carousel-control-opacity:           null !default;
 $carousel-control-hover-opacity:     null !default;
-$carousel-control-transition:        outline-offset .2s ease-in-out !default;
+$carousel-control-transition:        $transition-focus !default;
 $carousel-control-offset:            $spacer / 2 !default; // Boosted mod
 
 $carousel-indicator-width:           $spacer / 2 !default;
@@ -1281,7 +1284,7 @@ $carousel-control-icon-size:         $spacer * 1.5 !default; // Boosted mod
 $carousel-control-prev-icon-bg:      $chevron-icon !default;
 
 $carousel-transition-duration:       .6s !default;
-$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+$carousel-transition:                transform $carousel-transition-duration $transition-timing !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
 
 
 // Spinners

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
@@ -33,6 +33,7 @@
     color: $hover-color;
     @include gradient-bg($hover-background);
     border-color: $hover-border;
+    outline-color: $hover-border; // Boosted mod
     @if $enable-shadows {
       @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
     } @else {
@@ -49,6 +50,7 @@
     // Remove CSS gradients if they're enabled
     background-image: if($enable-gradients, none, null);
     border-color: $active-border;
+    outline-color: $active-border; // Boosted mod
 
     &:focus {
       @if $enable-shadows {