diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 065e5ead24..c80054f201 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -30,7 +30,7 @@ }, { "path": "./dist/css/boosted.min.css", - "maxSize": "41.5 kB" + "maxSize": "41.75 kB" }, { "path": "./dist/js/boosted.bundle.js", diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 6e6de1f969..6e4fbe93ae 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -81,6 +81,7 @@ &:focus { // Boosted mod &[data-focus-visible-added] { + 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 c57f282dbb..b2a4ecccc0 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -52,6 +52,12 @@ border-color: var(--#{$prefix}btn-hover-border-color); } + // Boosted mod: make sure the focused button is displayed over its next sibling + &:focus[data-focus-visible-added] { + z-index: $focus-visible-zindex; + } + // End mod + // Boosted mod: no .btn-check + &:hover // Boosted mod: no &:focus-visible to avoid issue in button tags diff --git a/scss/_list-group.scss b/scss/_list-group.scss index ce5881fd71..13ac9212d7 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -142,11 +142,6 @@ &[data-focus-visible-added] { outline-offset: subtract(-$focus-visible-outer-width, var(--#{$prefix}list-group-border-width)); box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-inner-color); - - &.active { - outline-color: var(--#{$prefix}focus-visible-inner-color); - box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-outer-color); - } } } // End mod diff --git a/scss/_nav.scss b/scss/_nav.scss index 8de0c48c43..e467f0334a 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -34,12 +34,18 @@ border: 0; @include transition($nav-link-transition); - // Boosted mod: no 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: make sure the focused nav link is displayed over its next sibling + &:focus[data-focus-visible-added] { + z-index: $focus-visible-zindex; + } + // End mod + // Boosted mod: no `&:focus-visible` // Disabled state lightens text diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 7de7a280cb..12f3a9522c 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -72,7 +72,11 @@ border-color: var(--#{$prefix}pagination-hover-border-color); } - // Boosted mod: no focus + // Boosted mod: make sure the focused page link is displayed over its next sibling + &:focus[data-focus-visible-added] { + z-index: $focus-visible-zindex; + } + // End mod // Boosted mod &:active, diff --git a/scss/boosted.scss b/scss/boosted.scss index e9c9eb904f..daae6b9a0b 100644 --- a/scss/boosted.scss +++ b/scss/boosted.scss @@ -19,11 +19,11 @@ @import "containers"; @import "grid"; @import "tables"; -@import "forms"; @import "buttons"; @import "transitions"; @import "dropdown"; @import "button-group"; +@import "forms"; // Boosted mod: import after button-group for focus issue @import "nav"; @import "navbar"; @import "card"; diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index 9f488110f4..f618d54869 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -60,6 +60,7 @@ } &:focus { + 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; @@ -260,6 +261,7 @@ &[data-focus-visible-added]:focus { + .btn, + .tag { + 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 d3f35118fa..4970727937 100644 --- a/scss/forms/_star-rating.scss +++ b/scss/forms/_star-rating.scss @@ -9,6 +9,7 @@ --#{$prefix}star-rating-checked-icon: #{$form-star-rating-checked-icon}; --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-unchecked-icon}; + display: inline-flex; font-size: $form-star-size; background-color: transparent; @@ -24,7 +25,6 @@ > label, span { - float: left; width: 1em; height: 1em; @@ -54,6 +54,7 @@ } > [data-focus-visible-added]:focus + label { + 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/scss/mixins/_focus.scss b/scss/mixins/_focus.scss index 2bb602908e..874a46615c 100644 --- a/scss/mixins/_focus.scss +++ b/scss/mixins/_focus.scss @@ -1,6 +1,5 @@ // scss-docs-start focus-visible -@mixin focus-visible($zindex: $focus-visible-zindex, $color: var(--#{$prefix}focus-visible-outer-color), $width: $focus-visible-outer-width, $offset: $focus-visible-outer-offset, $box-width: $focus-visible-inner-width, $box-color: var(--#{$prefix}focus-visible-inner-color)) { - z-index: $zindex; +@mixin focus-visible($color: var(--#{$prefix}focus-visible-outer-color), $width: $focus-visible-outer-width, $offset: $focus-visible-outer-offset, $box-width: $focus-visible-inner-width, $box-color: var(--#{$prefix}focus-visible-inner-color)) { isolation: isolate; outline: $width solid $color; outline-offset: $offset; diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index 7693c3bb9a..4d9a97794f 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -11,11 +11,17 @@ toc: true ## v5.3.4 +