fix(review)

Orange-OpenSource · Jun 5, 2024 · c37ccf4 · c37ccf4
1 parent 666d5de
commit c37ccf4
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -20,7 +20,7 @@ toc: true
 
 ### CSS and Sass variables
 
-- <span class="badge text-bg-danger">Breaking</span> 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.
+- <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