diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index 7794a3064d..6e4fbe93ae 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -81,7 +81,7 @@
&:focus {
// Boosted mod
&[data-focus-visible-added] {
- z-index: $focus-visible-zindex;
+ 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);
}
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index bc2471d3a6..b2a4ecccc0 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -52,7 +52,7 @@
border-color: var(--#{$prefix}btn-hover-border-color);
}
- // Boosted mod
+ // Boosted mod: make sure the focused button is displayed over its next sibling
&:focus[data-focus-visible-added] {
z-index: $focus-visible-zindex;
}
diff --git a/scss/_nav.scss b/scss/_nav.scss
index f30f386b7f..e467f0334a 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -34,13 +34,13 @@
border: 0;
@include transition($nav-link-transition);
- // Boosted mod: handle focus differently 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
+ // Boosted mod: make sure the focused nav link is displayed over its next sibling
&:focus[data-focus-visible-added] {
z-index: $focus-visible-zindex;
}
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 0923973b6e..12f3a9522c 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -72,7 +72,7 @@
border-color: var(--#{$prefix}pagination-hover-border-color);
}
- // Boosted mod
+ // Boosted mod: make sure the focused page link is displayed over its next sibling
&:focus[data-focus-visible-added] {
z-index: $focus-visible-zindex;
}
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index a632ffa001..f618d54869 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -60,7 +60,7 @@
}
&:focus {
- z-index: $focus-visible-zindex;
+ 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;
@@ -261,7 +261,7 @@
&[data-focus-visible-added]:focus {
+ .btn,
+ .tag {
- z-index: $focus-visible-zindex;
+ z-index: $focus-visible-zindex; // Make sure the focused button check is displayed over its next sibling
@include focus-visible();
}
}
diff --git a/scss/forms/_star-rating.scss b/scss/forms/_star-rating.scss
index ba47ff12f3..4970727937 100644
--- a/scss/forms/_star-rating.scss
+++ b/scss/forms/_star-rating.scss
@@ -9,7 +9,7 @@
--#{$prefix}star-rating-checked-icon: #{$form-star-rating-checked-icon};
--#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-unchecked-icon};
- display: flex;
+ display: inline-flex;
font-size: $form-star-size;
background-color: transparent;
@@ -54,7 +54,7 @@
}
> [data-focus-visible-added]:focus + label {
- z-index: $focus-visible-zindex;
+ 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);
diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
index 469618aaea..4d9a97794f 100644
--- a/site/content/docs/5.3/migration.md
+++ b/site/content/docs/5.3/migration.md
@@ -20,7 +20,7 @@ toc: true
### CSS and Sass variables
-- Breaking A parameter from the `focus-visible()` mixin has been removed. You don't need the `z-index` parameter anymore. Please reflect these modifications inside your website.
+- Breaking 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