From 2641c611311dcc308aaa81a5440bd1c51fa288f8 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Tue, 30 Aug 2022 16:42:28 +0200 Subject: [PATCH] Fix(spec meeting) --- scss/_accordion.scss | 14 ++------------ scss/_carousel.scss | 4 +++- scss/_footer.scss | 8 ++------ scss/_variables.scss | 15 ++++++--------- scss/forms/_form-control.scss | 2 +- scss/forms/_form-select.scss | 2 +- scss/forms/_star-rating.scss | 5 ++++- scss/mixins/_focus.scss | 2 ++ .../docs/5.2/getting-started/accessibility.md | 10 ++++++++-- 9 files changed, 29 insertions(+), 33 deletions(-) diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 8fe8afaf88..326616b6a3 100644 --- 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 index ec68aff8ba..d172334b46 100644 --- 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 index eea541f098..ce070b3efc 100644 --- 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 index 6ee39945aa..8ec7c1be0b 100644 --- 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 index b8323ac9ae..b8d8b9ec7b 100644 --- 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 index 4b1c26ddb4..684953681a 100644 --- 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 index 07d069b475..3d651a49f2 100644 --- 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 index fa8519b816..b39085a9f0 100644 --- 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 index 0ab1cafc83..52df6ba65e 100644 --- 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