Carousel navigation focus

scss/_carousel.scss

@@ -104,6 +104,7 @@
   text-align: center;
   background: none;
   border: 0;
+  outline: 0;
   opacity: $carousel-control-opacity;
   @include transition($carousel-control-transition);
 
@@ -124,9 +125,20 @@
   }
 
   &:active {
-    --#{$boosted-prefix}control-bg: #{$carousel-control-icon-active-bg}; // Boosted mod
+    --#{$boosted-prefix}control-bg: #{$carousel-control-icon-active-bg};
     color: $carousel-control-color;
   }
+
+  &:focus:focus-visible,
+  &:focus {
+    &[data-focus-visible-added] {
+      & > span {
+        outline: map-get($border-widths, 3) solid $brand-orange;
+        outline-offset: $outline-offset;
+        box-shadow: 0 0 0 $outline-offset $white;
+      }
+    }
+  }
   // End mod
 }
 
@@ -208,12 +220,24 @@
     &:hover,
     &:focus {
       background-color: color-contrast($carousel-indicator-active-bg);
-      transform: scale($carousel-indicator-hover-scale);
+    }
 
+    &:hover {
+      transform: scale($carousel-indicator-hover-scale);
       &::before {
         transform: translate3d(-50%, -50%, 0) scale($carousel-indicator-active-scale);
       }
     }
+
+    &: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;
+      }
+    }
+
   }
 
   .active {

scss/_variables.scss

@@ -563,7 +563,8 @@ $container-padding-x: $grid-gutter-width !default;
 $border-width:                .125rem !default;
 $border-widths: (
   1: $border-width * .5,
-  2: $border-width
+  2: $border-width,
+  3: $border-width * 1.5
 ) !default;
 
 $border-style:                solid !default;