Add focus visibility on tabs with pills

scss/_nav.scss

@@ -81,6 +81,11 @@
 .nav-pills {
   .nav-link {
     @include border-radius($nav-pills-border-radius);
+    &:focus {
+      color: $nav-pills-link-hover-color;
+      text-decoration: if($link-hover-decoration == underline, none, null);
+      box-shadow: $nav-pills-link-focus-box-shadow;
+    }
   }
 
   .nav-link.active,

scss/_variables.scss

@@ -866,6 +866,11 @@ $nav-pills-border-radius:           $border-radius !default;
 $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
 
+$nav-pills-link-hover-color:              null !default;
+$nav-pills-link-focus-width:             .25rem !default;
+$nav-pills-link-focus-color-opacity:     .25 !default;
+$nav-pills-link-focus-color:             rgba($component-active-bg, $nav-pills-link-focus-color-opacity) !default;
+$nav-pills-link-focus-box-shadow:        0 0 0 $nav-pills-link-focus-width $nav-pills-link-focus-color !default;
 
 // Navbar