Fixes from my review

Orange-OpenSource · Aug 30, 2022 · 449d2c9 · 449d2c9
1 parent 6f7378c
commit 449d2c9
Show file tree

Hide file tree

Showing 17 changed files with 124 additions and 127 deletions.
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
@@ -48,11 +48,10 @@
 
   /* rtl:remove */
   letter-spacing: var(--#{$prefix}accordion-btn-letter-spacing); // Boosted mod
-  background-color: transparent;
+  background-color: var(--#{$prefix}accordion-btn-bg);
   border: 0;
   @include border-radius(0);
   overflow-anchor: none;
-  outline: 0;
 
   &:not(.collapsed) {
     color: var(--#{$prefix}accordion-active-color);
@@ -72,6 +71,13 @@
     z-index: 2;
     color: var(--#{$prefix}accordion-active-color); // Boosted mod
   }
+
+  &:focus {
+    z-index: 3;
+    // Boosted mod: no border-color
+    outline: 0;
+    // Boosted mod: no box-shadow
+  }
 }
 
 .accordion-header {
@@ -112,9 +118,11 @@
     }
   }
 
+  // Boosted mod: outline the item instead of button only
   &:focus-within {
     @include focus-visible();
   }
+  // End mod
 }
 
 .accordion-body {

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -39,6 +39,7 @@
   @include border-radius(var(--#{$prefix}btn-border-radius));
   @include gradient-bg(var(--#{$prefix}btn-bg));
   @include box-shadow(var(--#{$prefix}btn-box-shadow));
+  @include transition($btn-transition);
 
   &:hover {
     color: var(--#{$prefix}btn-hover-color);
@@ -70,7 +71,6 @@
     // Remove CSS gradients if they're enabled
     background-image: if($enable-gradients, none, null);
     border-color: var(--#{$prefix}btn-active-border-color);
-    outline-color: var(--#{$prefix}btn-active-border-color); // Boosted mod
     // Boosted mod: no box shadow modification for the active state
   }
 
@@ -195,21 +195,7 @@
     text-decoration: $link-hover-decoration;
   }
 
-  // Boosted mod
-  &:focus {
-    &:not(:hover) {
-      color: var(--#{$prefix}btn-color);
-      outline-color: var(--#{$prefix}btn-color);
-      &[data-focus-visible-added] {
-        @include focus-visible();
-      }
-    }
-
-    &:hover {
-      outline-color: var(--#{$prefix}btn-active-color);
-    }
-  }
-  // End mod
+  // Boosted mod: no focus/hover color
 
   // No need for an active state here
 }
@@ -240,19 +226,12 @@
   @include border-radius(50%, 50%);
   @include button-icon(var(--#{$boosted-prefix}network-logo));
 
-  &:focus {
-    // Boosted mod: added `&[data-focus-visible-added]`
-    color: var(--#{$prefix}btn-hover-color);
-    &[data-focus-visible-added] {
-      @include focus-visible();
-    }
-  }
   &:hover {
     color: $white;
     background-color: var(--#{$boosted-prefix}network-color, $black);
     border-color: var(--#{$boosted-prefix}network-color, $black);
-    outline-color: var(--#{$boosted-prefix}network-color, $black);
   }
+
   &:active,
   &.active {
     color: $white;

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
@@ -108,9 +108,9 @@
   opacity: $carousel-control-opacity;
   @include transition($carousel-control-transition);
 
+  // Boosted mod: no focus
   // Hover/focus state
-  &:hover,
-  &:focus {
+  &:hover {
     --#{$boosted-prefix}control-bg: #{color-contrast($carousel-indicator-active-bg)}; // Boosted mod
     color: color-contrast($carousel-control-color);
     text-decoration: none;
@@ -231,7 +231,7 @@
     &:focus {
       &[data-focus-visible-added] {
         @include focus-visible();
-        box-shadow: 0 0 0 $outline-offset $white;
+        box-shadow: 0 0 0 map-get($border-widths, 3) $white;
         transform: none;
       }
     }

diff --git a/scss/_close.scss b/scss/_close.scss
@@ -8,7 +8,6 @@
   color: $btn-close-color;
   background-color: transparent; // include transparent for button elements
   border: $btn-border-width solid transparent; // Boosted mod
-  outline-offset: map-get($spacers, 2); // Boosted mod
   @include border-radius();
   @include button-icon($btn-close-bg, $btn-close-width, $btn-close-height, $btn-close-icon-size); // Boosted mod: using mask instead of background
 
@@ -26,6 +25,7 @@
 
   &:focus {
     &[data-focus-visible-added] {
+      box-shadow: $btn-close-focus-shadow;
       @include focus-visible();
     }
   }

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
@@ -216,18 +216,21 @@
   background-color: transparent; // For `<button>`s
   border: 0; // For `<button>`s
 
+  // Boosted mod: no focus
   &:hover {
     color: var(--#{$prefix}dropdown-link-hover-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
-    outline-color: var(--#{$prefix}dropdown-link-hover-bg); // Boosted mod
     @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
   }
 
+  // Boosted mod
   &:focus {
     &[data-focus-visible-added] {
       @include focus-visible();
+      outline-offset: -3px;
     }
   }
+  // End mod
 
   &.active,
   &:active {

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
@@ -52,23 +52,24 @@
   width: 100%; // For `<button>`s (anchors become 100% by default though)
   color: var(--#{$prefix}list-group-action-color);
   text-align: inherit; // For `<button>`s (anchors inherit)
-  outline-offset: $spacer; // Boosted mod
 
+  // Boosted mod: no focus
   // Hover state
   &:hover{
     z-index: 1; // Place hover/focus items above their siblings for proper border styling
     color: var(--#{$prefix}list-group-action-hover-color);
     text-decoration: none;
-    outline-color: var(--#{$prefix}list-group-action-color); // Boosted mod
-    outline-offset: var(--#{$prefix}list-group-border-width); // Boosted mod
     // Boosted mod: no background change
   }
 
+  // Boosted mod
   &:focus {
     &[data-focus-visible-added] {
       @include focus-visible();
+      outline-offset: -3px;
     }
   }
+  // End mod
 
   &:active {
     color: var(--#{$prefix}list-group-action-active-color);

diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -22,6 +22,7 @@
 }
 
 .nav-link {
+  position: relative; // Boosted mod: ensure that the outline goes over the next elements.
   display: flex; // Boosted mod
   align-items: center; // Boosted mod
   padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
@@ -30,17 +31,21 @@
   color: var(--#{$prefix}nav-link-color);
   text-decoration: if($link-decoration == none, null, none);
   background: none; // Boosted mod: Prevent dropdown's background to interfere
+  @include transition($nav-link-transition);
 
+  // Boosted mod: no focus
   &:hover {
     color: var(--#{$prefix}nav-link-hover-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
+  // Boosted mod
   &:focus {
     &[data-focus-visible-added] {
       @include focus-visible();
     }
   }
+  // End mod
 
   // Disabled state lightens text
   &.disabled {
@@ -84,20 +89,13 @@
     border-bottom-width: 0; // Boosted mod
     @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
 
+    // Boosted mod: no focus
     &:hover {
       color: color-contrast($nav-tabs-link-hover-border-color); // Boosted mod
       background-color: var(--#{$prefix}nav-tabs-link-hover-border-color); // Boosted mod
       // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
       isolation: isolate;
       border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
-      outline-color: var(--#{$prefix}nav-tabs-link-hover-border-color); // Boosted mod
-      outline-offset: var(--#{$prefix}nav-tabs-border-width); // Boosted mod
-    }
-
-    &:focus {
-      &[data-focus-visible-added] {
-        @include focus-visible();
-      }
     }
 
     &.disabled,
@@ -113,7 +111,6 @@
     color: var(--#{$prefix}nav-tabs-link-active-color);
     background-color: var(--#{$prefix}nav-tabs-link-active-bg);
     border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
-    outline-color: var(--#{$prefix}nav-tabs-link-active-border-color); // Boosted mod
   }
 
   .dropdown-menu {
@@ -140,18 +137,11 @@
       color: $accessible-orange;
       background: none;
       border-color: transparent;
-      outline-color: currentcolor;
     }
 
     &.active {
       border-bottom-color: $accessible-orange;
     }
-
-    &:focus {
-      &[data-focus-visible-added] {
-        @include focus-visible();
-      }
-    }
   }
 }
 // End mod
@@ -185,7 +175,6 @@
   .nav-link.active,
   .show > .nav-link {
     color: var(--#{$prefix}nav-pills-link-active-color);
-    outline-color: var(--#{$prefix}nav-pills-link-active-bg); // Boosted mod
     @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
   }
 

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -119,8 +119,8 @@
   white-space: nowrap;
   @include transition($navbar-brand-transition);
 
-  &:hover,
-  &:focus {
+  // Boosted mod: no focus
+  &:hover {
     color: var(--#{$prefix}navbar-brand-hover-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
   }
@@ -184,11 +184,18 @@
     padding-top: subtract(var(--#{$prefix}navbar-nav-link-padding-y), var(--#{$prefix}navbar-border-width));
     margin-left: calc(var(--#{$prefix}navbar-nav-link-padding-x) * -1); /* stylelint-disable-line function-disallowed-list */
     word-break: break-all;
-    outline-offset: $spacer;
 
     &:hover {
       z-index: 1;
-      outline-offset: 0;
+    }
+
+    @include media-breakpoint-down(lg) {
+      &:focus {
+        &[data-focus-visible-added] {
+          @include focus-visible();
+          outline-offset: -3px;
+        }
+      }
     }
   }
 
@@ -242,9 +249,9 @@
   padding-bottom: var(--#{$prefix}navbar-nav-link-padding-y); // Boosted mod
   color: var(--#{$prefix}navbar-color);
 
+  // Boosted mod: no focus
   a,
-  a:hover,
-  a:focus  {
+  a:hover {
     color: var(--#{$prefix}navbar-active-color);
   }
 }
@@ -297,8 +304,6 @@
   color: var(--#{$prefix}navbar-color);
   background-color: transparent; // remove default button style
   border: 0; // Boosted mod: remove border to simplify calculations
-  outline-color: var(--#{$prefix}navbar-active-color); // Boosted mod
-  outline-offset: $spacer; // Boosted mod
   @include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
   @include transition(var(--#{$prefix}navbar-toggler-transition));
 
@@ -308,13 +313,19 @@
 
   &:focus {
     text-decoration: none;
-    outline-offset: calc(var(--#{$prefix}navbar-border-width) * -1); /* stylelint-disable-line function-disallowed-list */ // Boosted mod
+    // Boosted mod: no outline;
     box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
+
+    // Boosted mod
+    &[data-focus-visible-added] {
+      @include focus-visible();
+      outline-offset: -3px;
+    }
+    // End mod
   }
 
   // Boosted mod: close icon when opened & color state
   &:hover .navbar-toggler-icon,
-  &:focus .navbar-toggler-icon,
   &:active .navbar-toggler-icon {
     filter: $orange-filter;
   }