Apply visible focus design guidelines in all components

.bundlewatch.config.json

@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "38.75 kB"
+      "maxSize": "38.5 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "36.0 kB"
+      "maxSize": "35.5 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",
@@ -42,7 +42,7 @@
     },
     {
       "path": "./dist/js/boosted.esm.js",
-      "maxSize": "33.25 kB"
+      "maxSize": "33.0 kB"
     },
     {
       "path": "./dist/js/boosted.esm.min.js",

js/index.esm.js

@@ -14,7 +14,7 @@ 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,7 +12,7 @@ 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'
@@ -29,7 +29,7 @@ export default {
   Dropdown,
   Modal,
   Offcanvas,
-  OrangeNavbar,
+  OrangeNavbar, // Boosted mod
   Popover,
   QuantitySelector, // Boosted mod
   ScrollSpy,

scss/_accordion.scss

@@ -74,8 +74,12 @@
   }
 
   &:focus {
-    z-index: 3;
-    outline-offset: calc(-1 * var(--#{$prefix}accordion-border-width)); /* stylelint-disable-line function-disallowed-list */ // Boosted mod
+    // Boosted mod
+    &[data-focus-visible-added] {
+      outline-offset: add($focus-visible-outer-offset, var(--#{$prefix}accordion-border-width));
+      box-shadow: 0 0 0 add(var(--#{$prefix}accordion-border-width), $focus-visible-inner-width) var(--#{$prefix}focus-visible-inner-color);
+    }
+    // End mod
   }
 }
 

scss/_back-to-top.scss

@@ -66,8 +66,7 @@
       background-color: var(--#{$prefix}back-to-top-title-bg-color);
     }
 
-    &[data-#{$prefix}label]:hover::before,
-    &[data-#{$prefix}label]:focus::before {
+    &[data-#{$prefix}label]:hover::before {
       text-decoration: var(--#{$prefix}back-to-top-title-active-decoration);
     }
   }

scss/_buttons.scss

@@ -39,7 +39,6 @@
   cursor: if($enable-button-pointers, pointer, null);
   user-select: none;
   border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
-  outline-offset: map-get($spacers, 1); // Boosted mod
   @include border-radius(var(--#{$prefix}btn-border-radius));
   @include gradient-bg(var(--#{$prefix}btn-bg));
   @include box-shadow(var(--#{$prefix}btn-box-shadow));
@@ -54,25 +53,11 @@
 
   // Boosted mod: no .btn-check + &:hover
 
-  &:focus { // Boosted mod: no &:focus-visible to avoid issue in button tags
-    color: var(--#{$prefix}btn-hover-color);
-    @include gradient-bg(var(--#{$prefix}btn-hover-bg));
-    border-color: var(--#{$prefix}btn-hover-border-color);
-    // Boosted mod: no outline: 0;
-    outline-color: var(--#{$prefix}btn-hover-border-color); // Boosted mod
-    outline-offset: $outline-width; // Boosted mod
-    &[data-focus-visible-added] { // Boosted mod: added `&[data-focus-visible-added]`
-      // Avoid using mixin so we can pass custom focus shadow properly
-      @if $enable-shadows {
-        box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
-      } @else {
-        box-shadow: var(--#{$prefix}btn-focus-box-shadow);
-      }
-    }
-  }
-
   // Boosted mod: no `.btn-check:focus-visible + &` rule to remove the outline
 
+  // Boosted mod: no &:focus-visible to avoid issue in button tags
+
+  // Boosted mod: custom styles for .btn-check
   // Boosted mod: simpler rule
   &:active,
   &.active,
@@ -82,7 +67,6 @@
     // Remove CSS gradients if they're enabled
     background-image: if($enable-gradients, none, null);
     border-color: var(--#{$prefix}btn-active-border-color);
-    outline-color: var(--#{$prefix}btn-active-border-color); // Boosted mod
     // Boosted mod: no box shadow modification for the active state
   }
 
@@ -154,7 +138,7 @@
 
 // Boosted mod: no .btn-outline
 
-// Boosted mod: border-only on :hover, :focus and :active
+// Boosted mod: border-only on :hover and :active
 .btn-no-outline {
   --#{$prefix}btn-hover-border-color: #{$gray-500};
   --#{$prefix}btn-active-color: #{$accessible-orange};
@@ -202,18 +186,9 @@
     text-decoration: $link-hover-decoration;
   }
 
-  // Boosted mod
-  &:focus-visible {
-    &:not(:hover) {
-      color: var(--#{$prefix}btn-color);
-      outline-color: var(--#{$prefix}btn-color);
-    }
-
-    &:hover {
-      outline-color: var(--#{$prefix}btn-active-color);
-    }
-  }
+  // Boosted mod: no focus-visible color change
 
+  // Boosted mod: btn inverse
   &.btn-inverse {
     --#{$prefix}btn-disabled-color: #{$gray-700};
   }
@@ -257,10 +232,6 @@
   @include border-radius(50%, 50%);
   @include button-icon(var(--#{$boosted-prefix}network-logo));
 
-  &:focus {
-    outline-color: var(--#{$boosted-prefix}network-color, $black);
-  }
-
   &.btn-inverse {
     --#{$prefix}btn-color: #{$white};
     --#{$prefix}btn-active-color: #{$black};

scss/_carousel.scss

@@ -102,12 +102,13 @@
   background: none;
   border: 0;
   outline: 0; // Boosted mod
+  box-shadow: none; // Boosted mod
   opacity: $carousel-control-opacity;
   @include transition($carousel-control-transition);
 
+  // Boosted mod: no focus
   // Hover/focus state
-  &:hover,
-  &:focus {
+  &:hover {
     --#{$boosted-prefix}control-bg: #{color-contrast($carousel-indicator-active-bg)}; // Boosted mod
     color: color-contrast($carousel-control-color);
     text-decoration: none;
@@ -126,16 +127,15 @@
     color: $carousel-control-color;
   }
 
+  // scss-docs-start focus-visible-carousel
   &:focus {
     &[data-focus-visible-added] {
-      // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
-      & > span {
-        outline: map-get($border-widths, 3) solid $brand-orange;
-        outline-offset: $outline-offset;
-        box-shadow: 0 0 0 $outline-offset $white;
+      > span {
+        @include focus-visible();
       }
     }
   }
+  // scss-docs-end focus-visible-carousel
   // End mod
 }
 
@@ -228,9 +228,6 @@
 
     &:focus {
       &[data-focus-visible-added] {
-        outline: map-get($border-widths, 3) solid $brand-orange;
-        outline-offset: $outline-offset;
-        box-shadow: 0 0 0 $outline-offset $white;
         transform: none;
       }
     }

scss/_close.scss

@@ -20,7 +20,6 @@
   color: var(--#{$prefix}btn-close-color); // Boosted mod
   background-color: var(--#{$prefix}btn-close-bg); // Boosted mod
   border: var(--#{$prefix}btn-close-border-width) solid var(--#{$prefix}btn-close-border-color); // Boosted mod
-  outline-offset: map-get($spacers, 2); // Boosted mod
   @include border-radius();
   @include button-icon($btn-close-bg, $btn-close-width, $btn-close-height, $btn-close-icon-size); // Boosted mod: using mask instead of background
 
@@ -32,20 +31,10 @@
 
   // Boosted mod: matching .btn-no-outline
   &:hover,
-  &:focus,
   &:active {
     border: var(--#{$prefix}btn-close-border-width) solid var(--#{$prefix}btn-close-active-border-color);
   }
 
-  &:focus {
-    outline-offset: $outline-width;
-    @include transition($transition-focus);
-
-    &[data-focus-visible-added] {
-      box-shadow: $btn-close-focus-shadow;
-    }
-  }
-
   &:active {
     color: var(--#{$prefix}btn-close-active-color);
   }
@@ -56,6 +45,7 @@
     color: var(--#{$prefix}btn-close-disabled-color); // Boosted mod
     pointer-events: none;
     user-select: none;
+    // Boosted mod: no opacity
   }
 }
 
@@ -70,11 +60,5 @@
   --#{$prefix}btn-close-active-border-color: #{$btn-close-white-active-border-color}; // Boosted mod
   --#{$prefix}btn-close-disabled-color: #{$btn-close-white-disabled-color}; // Boosted mod
   // scss-docs-end btn-close-white-css-vars
-
-  &:focus {
-    &[data-focus-visible-added] {
-      box-shadow: 0 0 0 $btn-focus-width $black;
-    }
-  }
 }
 // End mod

scss/_dropdown.scss

@@ -194,11 +194,10 @@
   background-color: transparent; // For `<button>`s
   border: 0; // For `<button>`s
 
-  &:hover,
-  &:focus {
+  // Boosted mod: no focus
+  &:hover {
     color: var(--#{$prefix}dropdown-link-hover-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
-    outline-color: var(--#{$prefix}dropdown-link-hover-bg); // Boosted mod
     @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
   }
 
@@ -217,6 +216,20 @@
     // Remove CSS gradients if they're enabled
     background-image: if($enable-gradients, none, null);
   }
+
+  // Boosted mod: focus
+  &:focus {
+    &[data-focus-visible-added] {
+      outline-offset: -$focus-visible-outer-width;
+      box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-inner-color);
+
+      &.active {
+        outline-color: var(--#{$prefix}focus-visible-inner-color);
+        box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-outer-color);
+      }
+    }
+  }
+  // End mod
 }
 
 .dropdown-menu.show {

scss/_footer.scss

@@ -26,7 +26,7 @@
       gap: var(--#{$prefix}footer-gap);
 
       .nav-link {
-        outline-offset: 5px;
+        outline-offset: $focus-visible-outer-offset; // Override outline offset coming from .navbar-nav
 
         &.active::before {
           content: unset;

scss/_list-group.scss

@@ -52,17 +52,13 @@
   width: 100%; // For `<button>`s (anchors become 100% by default though)
   color: var(--#{$prefix}list-group-action-color);
   text-align: inherit; // For `<button>`s (anchors inherit)
-  outline-offset: $spacer; // Boosted mod
-  @include transition($transition-focus); // Boosted mod
 
+  // Boosted mod: default focus
   // Hover state
-  &:hover,
-  &:focus {
+  &:hover{
     z-index: 1; // Place hover/focus items above their siblings for proper border styling
     color: var(--#{$prefix}list-group-action-hover-color);
     text-decoration: none;
-    outline-color: var(--#{$prefix}list-group-action-color); // Boosted mod
-    outline-offset: var(--#{$prefix}list-group-border-width); // Boosted mod
     // Boosted mod: no background change
   }
 
@@ -85,6 +81,7 @@
   text-decoration: if($link-decoration == none, null, none);
   background-color: var(--#{$prefix}list-group-bg);
   border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
+  box-shadow: none; // Boosted mod
 
   &:first-child {
     @include border-top-radius(inherit);
@@ -118,6 +115,20 @@
       border-top-width: var(--#{$prefix}list-group-border-width);
     }
   }
+
+  // Boosted mod: focus
+  &:focus {
+    &[data-focus-visible-added] {
+      outline-offset: subtract(-$focus-visible-outer-width, var(--#{$prefix}list-group-border-width));
+      box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-inner-color);
+
+      &.active {
+        outline-color: var(--#{$prefix}focus-visible-inner-color);
+        box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-outer-color);
+      }
+    }
+  }
+  // End mod
 }
 
 // Horizontal

scss/_mixins.scss

@@ -38,6 +38,7 @@
 @import "mixins/box-shadow";
 @import "mixins/gradients";
 @import "mixins/transition";
+@import "mixins/focus"; // Boosted mod
 
 // Layout
 @import "mixins/clearfix";