Final round of fixes

js/index.esm.js

@@ -5,16 +5,14 @@
  * --------------------------------------------------------------------------
  */
 
-import '../node_modules/focus-visible/dist/focus-visible.js' // Boosted mod
-
 export { default as Alert } from './src/alert'
 export { default as Button } from './src/button'
 export { default as Carousel } from './src/carousel'
 export { default as Collapse } from './src/collapse'
 export { default as Dropdown } from './src/dropdown'
 export { default as Modal } from './src/modal'
 export { default as Offcanvas } from './src/offcanvas'
-export { default as OrangeNavbar } from './src/orange-navbar'
+export { default as OrangeNavbar } from './src/orange-navbar' // Boosted mod
 export { default as Popover } from './src/popover'
 export { default as QuantitySelector } from './src/quantity-selector' // Boosted mod
 export { default as ScrollSpy } from './src/scrollspy'

js/index.umd.js

@@ -12,14 +12,13 @@ import Collapse from './src/collapse'
 import Dropdown from './src/dropdown'
 import Modal from './src/modal'
 import Offcanvas from './src/offcanvas'
-import OrangeNavbar from './src/orange-navbar'
+import OrangeNavbar from './src/orange-navbar' // Boosted mod
 import Popover from './src/popover'
 import QuantitySelector from './src/quantity-selector' // Boosted mod
 import ScrollSpy from './src/scrollspy'
 import Tab from './src/tab'
 import Toast from './src/toast'
 import Tooltip from './src/tooltip'
-import '../node_modules/focus-visible/dist/focus-visible.js' // Boosted mod
 
 export default {
   Alert,
@@ -29,7 +28,7 @@ export default {
   Dropdown,
   Modal,
   Offcanvas,
-  OrangeNavbar,
+  OrangeNavbar, // Boosted mod
   Popover,
   QuantitySelector, // Boosted mod
   ScrollSpy,

package.json

@@ -120,7 +120,6 @@
     "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-unicorn": "^42.0.0",
     "find-unused-sass-variables": "^4.0.4",
-    "focus-visible": "^5.2.0",
     "globby": "^11.1.0",
     "hammer-simulator": "0.0.1",
     "hugo-bin": "^0.89.0",

scss/_buttons.scss

@@ -49,16 +49,17 @@
     border-color: var(--#{$prefix}btn-hover-border-color);
   }
 
-  // Boosted mod: custom styles for .btn-check
-  &:focus { // Boosted mod: no &:focus-visible to avoid issue in button tags
-    // Boosted mod: added `&[data-focus-visible-added]`
-    &[data-focus-visible-added] {
-      @include focus-box();
-    }
+  &:focus-visible {
+    @include focus-box();
+  }
+
+  &.btn-inverse:focus-visible {
+    @include focus-box($box-color: $black);
   }
 
   // Boosted mod: no `.btn-check:focus-visible + &` rule to remove the outline
 
+  // Boosted mod: custom styles for .btn-check
   // Boosted mod: simpler rule
   &:active,
   &.active,

scss/_carousel.scss

@@ -130,13 +130,10 @@
   }
 
   // scss-docs-start focus-visible-carousel
-  &:focus {
-    &[data-focus-visible-added] {
-      // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
-      & > span {
-        @include focus-visible();
-        @include focus-box();
-      }
+  &:focus-visible {
+    > span {
+      @include focus-visible();
+      @include focus-box();
     }
   }
   // scss-docs-end focus-visible-carousel
@@ -230,12 +227,10 @@
       }
     }
 
-    &:focus {
-      &[data-focus-visible-added] {
-        @include focus-visible();
-        @include focus-box();
-        transform: none;
-      }
+    &:focus-visible {
+      @include focus-visible();
+      @include focus-box();
+      transform: none;
     }
 
   }

scss/_reboot.scss

@@ -90,18 +90,9 @@ body {
 //    See https://github.com/WICG/focus-visible
 // 3. Using the :focus-visible pseudo-class if supported by the browser
 // scss-docs-start focus-visibility
-:focus {
+:focus-visible {
   @include focus-visible(); // 1
 }
-
-.js-focus-visible :focus:not([data-focus-visible-added]),
-.js-focus-visible .focus:not([data-focus-visible-added]) { // 2
-  outline: 0 !important;
-}
-
-:focus:not(:focus-visible) { // 3
-  outline: 0 !important;
-}
 // scss-docs-end focus-visibility
 // End mod
 

scss/_stepped-process.scss

@@ -108,14 +108,9 @@
     text-decoration: if($link-hover-decoration == underline, null, underline);
   }
 
-  &:focus {
-    .active &[data-focus-visible-added] {
-      outline-color: var(--#{$prefix}stepped-process-link-active-color);
-    }
-  }
-
   .active & {
     color: var(--#{$prefix}stepped-process-link-active-color);
+    outline-color: var(--#{$prefix}stepped-process-link-active-color);
   }
 
   .active ~ .stepped-process-item & {

scss/_variables.scss

@@ -840,7 +840,7 @@ $input-btn-line-height:       1.25 !default;
 
 $input-btn-focus-width:       $outline-offset !default; // Boosted mod
 // Boosted mod: no need for a blur variable
-$input-btn-focus-box-shadow:  null !default;
+$input-btn-focus-box-shadow:  null !default; // Boosted mod
 
 $input-btn-padding-y-sm:      $spacer * .25 !default;
 $input-btn-padding-x-sm:      $spacer * .5 !default;
@@ -879,7 +879,7 @@ $btn-border-width:            $input-btn-border-width !default;
 
 $btn-font-weight:             $font-weight-bold !default;
 $btn-box-shadow:              null !default;
-$btn-focus-width:             $outline-offset !default;
+$btn-focus-width:             $input-btn-focus-width !default;
 $btn-focus-box-shadow:        0 0 0 $btn-focus-width $white !default;
 $btn-disabled-opacity:        1 !default;
 $btn-active-box-shadow:       null !default;
@@ -1524,15 +1524,6 @@ $accordion-transition:                    $btn-transition, border-radius .15s ea
 $accordion-button-active-bg:              null !default; // Boosted mod
 $accordion-button-active-color:           $accessible-orange !default; // Boosted mod
 
-// Boosted mod: dark variant
-$accordion-dark-color:                    $white !default;
-$accordion-dark-bg:                       $black !default;
-$accordion-dark-border-color:             $gray-700 !default;
-$accordion-dark-button-color:             $accordion-dark-color !default;
-$accordion-dark-button-bg:                transparent !default;
-$accordion-dark-button-active-color:      $brand-orange !default;
-// End mod
-
 // Boosted mod: no $accordion-button-focus-border-color
 // Boosted mod: no $accordion-button-focus-box-shadow
 

scss/forms/_form-check.scss

@@ -263,7 +263,7 @@
     z-index: 0;
   }
 
-  &[data-focus-visible-added] {
+  &:focus-visible {
     + .btn {
       @include focus-visible();
       @include focus-box();

scss/forms/_form-range.scss

@@ -11,26 +11,19 @@
   background-color: transparent;
   appearance: none;
 
-  &:focus {
+  &:focus-visible {
     outline: 0;
 
     // Pseudo-elements must be split across multiple rulesets to have an effect.
     // No box-shadow() mixin for focus accessibility.
-    &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
-    &::-moz-range-thumb     { box-shadow: $form-range-thumb-focus-box-shadow; }
-
-    // Boosted mod: added `&[data-focus-visible-added]`
-    &[data-focus-visible-added] {
-      // Boosted mod: better focus visibility
-      &::-webkit-slider-thumb {
-        @include focus-visible();
-      }
-      &::-moz-range-thumb {
-        @include focus-visible();
-      }
-      // End mod
+    &::-webkit-slider-thumb {
+      box-shadow: $form-range-thumb-focus-box-shadow;
+      @include focus-visible(); // Boosted mod
+    }
+    &::-moz-range-thumb     {
+      box-shadow: $form-range-thumb-focus-box-shadow;
+      @include focus-visible(); // Boosted mod
     }
-    // End mod
   }
 
   &::-moz-focus-outer {

scss/forms/_star-rating.scss

@@ -39,7 +39,7 @@
     @include form-star-rating($accessible-orange);
   }
 
-  > [data-focus-visible-added]:focus + label {
+  > :focus-visible + label {
     @include focus-visible();
     outline-offset: -1px;
   }

scss/mixins/_focus.scss

@@ -8,6 +8,8 @@
 
 // scss-docs-start focus-box
 @mixin focus-box($offset: $outline-offset, $box-color: $outline-box-color) {
-  box-shadow: 0 0 0 $offset $box-color;
+  @if $enable-shadows {
+    box-shadow: 0 0 0 $offset $box-color;
+  }
 }
 // scss-docs-end focus-box

site/assets/scss/_anchor.scss

@@ -10,6 +10,7 @@
     content: "#";
   }
 
+  &:focus,
   &:hover,
   :hover > &,
   :target > & {

site/assets/scss/_clipboard-js.scss

@@ -31,9 +31,7 @@
     color: $primary;
   }
 
-  &:focus {
-    z-index: 3;
-  }
+  // Boosted mod: no focus rule
 
   // Boosted mod
   .bi {

site/assets/scss/_navbar.scss

@@ -10,8 +10,7 @@
   .nav-link { // Boosted mod: Needed since the dropdowns define their own color (could be removed once they are tackled)
     // Boosted mod: no display, no padding, no color
 
-    &:hover,
-    &:focus {
+    &:hover {
       color: var(--#{$prefix}link-hover-color); // Boosted mod
     }