Fix(spec meeting)

Orange-OpenSource · Aug 30, 2022 · 2641c61 · 2641c61
1 parent ba2d559
commit 2641c61
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 33 deletions.
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
@@ -50,6 +50,7 @@
   letter-spacing: var(--#{$prefix}accordion-btn-letter-spacing); // Boosted mod
   background-color: var(--#{$prefix}accordion-btn-bg);
   border: 0;
+  outline-offset: add($outline-offset, var(--#{$prefix}accordion-border-width)); // Boosted mod
   @include border-radius(0);
   overflow-anchor: none;
 
@@ -72,12 +73,7 @@
     color: var(--#{$prefix}accordion-active-color); // Boosted mod
   }
 
-  &:focus {
-    z-index: 3;
-    // Boosted mod: no border-color
-    outline: 0;
-    // Boosted mod: no box-shadow
-  }
+  // Boosted mod: default focus style
 }
 
 .accordion-header {
@@ -117,12 +113,6 @@
       @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
     }
   }
-
-  // Boosted mod: outline the item instead of button only
-  &:focus-within {
-    @include focus-visible();
-  }
-  // End mod
 }
 
 .accordion-body {

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
@@ -129,6 +129,7 @@
     color: $carousel-control-color;
   }
 
+  // scss-docs-start focus-visible-carousel
   &:focus {
     &[data-focus-visible-added] {
       // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
@@ -138,6 +139,7 @@
       }
     }
   }
+  // scss-docs-end focus-visible-carousel
   // End mod
 }
 
@@ -231,7 +233,7 @@
     &:focus {
       &[data-focus-visible-added] {
         @include focus-visible();
-        box-shadow: 0 0 0 outline-offset $white;
+        box-shadow: 0 0 0 $outline-offset $white;
         transform: none;
       }
     }

diff --git a/scss/_footer.scss b/scss/_footer.scss
@@ -25,12 +25,8 @@
       flex-wrap: wrap;
       gap: var(--#{$prefix}footer-gap);
 
-      .nav-link {
-        outline-offset: 5px;
-
-        &.active::before {
-          content: unset;
-        }
+      .nav-link.active::before {
+        content: unset;
       }
     }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -584,8 +584,8 @@ $border-radius-pill:          50rem !default;
 // scss-docs-end border-radius-variables
 
 $outline-zindex:              5 !default; // Boosted mod
-$outline-width:               map-get($border-widths, 3) !default;  // Boosted mod
-$outline-offset:              map-get($border-widths, 3) !default; // Boosted mod
+$outline-width:               3px !default;  // Boosted mod
+$outline-offset:              2px !default; // Boosted mod
 $outline-color:               var(--#{$prefix}link-hover-color) !default; // Boosted mod
 
 // scss-docs-start box-shadow-variables
@@ -612,9 +612,6 @@ $transition-fade:     opacity $transition-timing linear !default;
 $transition-collapse:         height .35s ease !default;
 $transition-collapse-width:   width .35s ease !default;
 // scss-docs-end collapse-transition
-// scss-docs-start focus-transition
-$transition-focus:    outline-offset $transition-duration $transition-timing !default; // Boosted mod
-// scss-docs-end focus-transition
 
 // stylelint-disable function-disallowed-list
 // scss-docs-start aspect-ratios
@@ -1071,7 +1068,7 @@ $form-switch-bg-position:         right .5rem top 50% !default;  // Boosted mod
 $form-switch-bg-size:             .75rem !default;  // Boosted mod
 $form-switch-bg-square-size:      add(1rem, $spacer * .5) !default;  // Boosted mod
 $form-switch-border-radius:       null !default; // Boosted mod
-$form-switch-transition:          background-position .15s ease-in-out !default; // Boosted mod
+$form-switch-transition:          background-position .15s ease-in-out !default;
 
 // Boosted mod: no $form-switch-focus-color
 // Boosted mod: no $form-switch-focus-bg-image
@@ -1264,8 +1261,8 @@ $navbar-toggler-transition:         null !default; // Boosted mod
 // scss-docs-start orange-navbar-variables
 $navbar-transition-duration:              $transition-duration !default;
 $navbar-transition-timing-function:       $transition-timing !default;
-$navbar-transition:                       padding-top $navbar-transition-duration $navbar-transition-timing-function, padding-bottom $navbar-transition-duration $navbar-transition-timing-function, $transition-focus !default;
-$navbar-brand-transition:                 margin $navbar-transition-duration $navbar-transition-timing-function, $transition-focus !default;
+$navbar-transition:                       padding-top $navbar-transition-duration $navbar-transition-timing-function, padding-bottom $navbar-transition-duration $navbar-transition-timing-function !default;
+$navbar-brand-transition:                 margin $navbar-transition-duration $navbar-transition-timing-function !default;
 $navbar-brand-logo-transition:            width $navbar-transition-duration $navbar-transition-timing-function, height $navbar-transition-duration $navbar-transition-timing-function !default;
 $navbar-active-transition:                bottom $navbar-transition-duration $navbar-transition-timing-function !default;
 
@@ -1819,7 +1816,7 @@ $carousel-control-color:             $black !default;
 $carousel-control-width:             $spacer * 3 !default;
 $carousel-control-opacity:           null !default;
 $carousel-control-hover-opacity:     null !default;
-$carousel-control-transition:        $transition-focus !default;
+$carousel-control-transition:        null !default;
 
 $carousel-indicator-width:           .5rem !default;
 $carousel-indicator-height:          .5rem !default;

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
@@ -35,7 +35,7 @@
     color: $input-focus-color;
     background-color: $input-focus-bg;
     border-color: $input-focus-border-color;
-    // Boosted mod: default outline
+    outline: 0;
     @if $enable-shadows {
       @include box-shadow($input-box-shadow, $input-focus-box-shadow);
     } @else {

diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
@@ -26,7 +26,7 @@
 
   &:focus {
     border-color: $form-select-focus-border-color;
-    // Boosted mod: default outline
+    outline: 0;
     @if $enable-shadows {
       @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
     } @else {

diff --git a/scss/forms/_star-rating.scss b/scss/forms/_star-rating.scss
@@ -37,8 +37,11 @@
 
   > input:focus + label {
     @include form-star-rating($accessible-orange);
+  }
+
+  > [data-focus-visible-added]:focus + label {
     @include focus-visible();
-    // outline-offset: -1px;
+    outline-offset: -1px;
   }
 
   &:hover input + label {

diff --git a/scss/mixins/_focus.scss b/scss/mixins/_focus.scss
@@ -1,5 +1,7 @@
+// scss-docs-start focus-visible
 @mixin focus-visible {
   z-index: $outline-zindex;
   outline: $outline-color solid $outline-width;
   outline-offset: $outline-offset;
 }
+// scss-docs-end focus-visible
diff --git a/site/content/docs/5.2/getting-started/accessibility.md b/site/content/docs/5.2/getting-started/accessibility.md
@@ -60,9 +60,15 @@ Boosted includes [WICG's `:focus-visible` polyfill](https://github.com/WICG/focu
 
 {{< scss-docs name="focus-visibility" file="scss/_reboot.scss" >}}
 
-Each component then specifies its own focus style, usually a solid `2px` outline with an `outline-offset` transition.
+{{< added-in "5.2.1" >}}
 
-{{< scss-docs name="focus-transition" file="scss/_variables.scss" >}}
+Boosted provides `focus-visible()` mixin to ensure a proper focus state, usually a solid `3px` orange outline with an `outline-offset` of `2px`.
+
+{{< scss-docs name="focus-visible" file="scss/mixins/_focus.scss" >}}
+
+Each component then specifies its own focus style when needed, for example [carousels]({{< docsref "/components/carousel#with-indicators" >}}).
+
+{{< scss-docs name="focus-visible-carousel" file="scss/_carousel.scss" >}}
 
 #### Under a fixed header