Focus: Remove default z-index (#2501)

---------

Co-authored-by: Hannah Issermann <[email protected]>

Author: louismaximepiton

scss/_accordion.scss

@@ -81,6 +81,7 @@
   &:focus {
     // Boosted mod
     &[data-focus-visible-added] {
+      z-index: $focus-visible-zindex; // Make sure the focused accordion button is displayed over its next sibling
       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);
     }

scss/_buttons.scss

@@ -52,6 +52,12 @@
     border-color: var(--#{$prefix}btn-hover-border-color);
   }
 
+  // Boosted mod: make sure the focused button is displayed over its next sibling
+  &:focus[data-focus-visible-added] {
+    z-index: $focus-visible-zindex;
+  }
+  // End mod
+
   // Boosted mod: no .btn-check + &:hover
 
   // Boosted mod: no &:focus-visible to avoid issue in button tags

scss/_list-group.scss

@@ -117,11 +117,6 @@
     &[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

scss/_nav.scss

@@ -34,12 +34,18 @@
   border: 0;
   @include transition($nav-link-transition);
 
-  // Boosted mod: no focus
+  // Boosted mod: handle focus differently
   &:hover {
     color: var(--#{$prefix}nav-link-hover-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
+  // Boosted mod: make sure the focused nav link is displayed over its next sibling
+  &:focus[data-focus-visible-added] {
+    z-index: $focus-visible-zindex;
+  }
+  // End mod
+
   // Boosted mod: no `&:focus-visible`
 
   // Disabled state lightens text

scss/_pagination.scss

@@ -72,7 +72,11 @@
     border-color: var(--#{$prefix}pagination-hover-border-color);
   }
 
-  // Boosted mod: no focus
+  // Boosted mod: make sure the focused page link is displayed over its next sibling
+  &:focus[data-focus-visible-added] {
+    z-index: $focus-visible-zindex;
+  }
+  // End mod
 
   // Boosted mod
   &:active,

scss/forms/_form-check.scss

@@ -60,6 +60,7 @@
   }
 
   &:focus {
+    z-index: $focus-visible-zindex; // Boosted mod: make sure the focused input is displayed over its next sibling
     border-color: $form-check-input-focus-border;
     // Boosted mod: default outline
     box-shadow: $form-check-input-focus-box-shadow;
@@ -266,6 +267,7 @@
   &[data-focus-visible-added]:focus {
     + .btn,
     + .tag {
+      z-index: $focus-visible-zindex; // Make sure the focused button check is displayed over its next sibling
       @include focus-visible();
     }
   }

scss/forms/_star-rating.scss

@@ -9,6 +9,7 @@
   --#{$prefix}star-rating-checked-icon: #{$form-star-rating-checked-icon};
   --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-unchecked-icon};
 
+  display: inline-flex;
   font-size: $form-star-size;
   background-color: transparent;
 
@@ -24,7 +25,6 @@
 
   > label,
   span {
-    float: left;
     width: 1em;
     height: 1em;
 
@@ -42,6 +42,10 @@
     }
   }
 
+  span {
+    float: left;
+  }
+
   > input:checked ~ label::before,
   .checked ~ span::before {
     background-color: var(--#{$prefix}star-rating-unchecked-color);
@@ -54,6 +58,7 @@
   }
 
   > [data-focus-visible-added]:focus + label {
+    z-index: $focus-visible-zindex; // Make sure the focused star is displayed over its next sibling
     @include focus-visible();
     outline-offset: -1px;
     box-shadow: inset 0 0 0 add(1px, $focus-visible-inner-width) var(--#{$prefix}focus-visible-inner-color);

scss/mixins/_focus.scss

@@ -1,6 +1,5 @@
 // scss-docs-start focus-visible
-@mixin focus-visible($zindex: $focus-visible-zindex, $color: var(--#{$prefix}focus-visible-outer-color), $width: $focus-visible-outer-width, $offset: $focus-visible-outer-offset, $box-width: $focus-visible-inner-width, $box-color: var(--#{$prefix}focus-visible-inner-color)) {
-  z-index: $zindex;
+@mixin focus-visible($color: var(--#{$prefix}focus-visible-outer-color), $width: $focus-visible-outer-width, $offset: $focus-visible-outer-offset, $box-width: $focus-visible-inner-width, $box-color: var(--#{$prefix}focus-visible-inner-color)) {
   isolation: isolate;
   outline: $width solid $color;
   outline-offset: $offset;

site/content/docs/5.3/migration.md

@@ -11,6 +11,8 @@ toc: true
 
 ## v5.3.4
 
+<hr class="mb-4">
+
 ### Core
 
 - **Colors**
@@ -61,6 +63,10 @@ toc: true
     </ul>
   </details>
 
+### CSS and Sass variables
+
+- <span class="badge text-bg-danger">Breaking</span> A parameter from the `focus-visible()` mixin has been removed. If you use the `focus-visible()` mixin in your scss files with a `z-index` as a parameter, please adapt your code.
+
 ## v5.3.3
 
 <hr class="mb-4">