From 6822bbcee032b0edbd9f758085fe735c1d694ead Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Tue, 2 Aug 2022 14:27:20 +0200 Subject: [PATCH 01/90] Add new mixin and first test on form controls --- scss/_mixins.scss | 3 +++ scss/_variables.scss | 4 ---- scss/forms/_form-control.scss | 13 +------------ scss/mixins/_focus.scss | 4 ++++ 4 files changed, 8 insertions(+), 16 deletions(-) create mode 100644 scss/mixins/_focus.scss diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 652cc77469..f4c3eb1a12 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -43,3 +43,6 @@ @import "mixins/clearfix"; @import "mixins/container"; @import "mixins/grid"; + +// Utilities +@import "mixins/focus" // Boosted mod diff --git a/scss/_variables.scss b/scss/_variables.scss index 8386d7f59b..1187139648 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1004,11 +1004,7 @@ $input-border-radius: $border-radius !default; // Boosted mod: no input-sm $input-border-radius-lg: $border-radius-lg !default; -$input-focus-bg: $input-bg !default; -$input-focus-border-color: currentcolor !default; -$input-focus-color: $input-color !default; $input-focus-width: $input-btn-focus-width !default; -$input-focus-box-shadow: $input-btn-focus-box-shadow !default; $input-placeholder-color: $gray-700 !default; $input-plaintext-color: var(--#{$prefix}body-color) !default; diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index 07037cd78e..be633a1ee7 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -20,7 +20,6 @@ @include border-radius($input-border-radius, 0); @include box-shadow($input-box-shadow); - @include transition($input-transition); &[type="file"] { overflow: hidden; // prevent pseudo element button overlap @@ -30,18 +29,8 @@ } } - // Customize the `:focus` state to imitate native WebKit styles. &:focus { - color: $input-focus-color; - background-color: $input-focus-bg; - border-color: $input-focus-border-color !important; // stylelint-disable-line declaration-no-important - outline: 0; - @if $enable-shadows { - @include box-shadow($input-box-shadow, $input-focus-box-shadow); - } @else { - // Avoid using mixin so we can pass custom focus shadow properly - box-shadow: $input-focus-box-shadow; - } + @include focus-visible(); } // Add some height to date inputs on iOS diff --git a/scss/mixins/_focus.scss b/scss/mixins/_focus.scss new file mode 100644 index 0000000000..ad60378755 --- /dev/null +++ b/scss/mixins/_focus.scss @@ -0,0 +1,4 @@ +@mixin focus-visible { + outline: $brand-orange solid 3px; + outline-offset: 3px; +} From eb8629e7ef419b1ff43bdbc42ed24c63ef70ca33 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Thu, 4 Aug 2022 16:26:56 +0200 Subject: [PATCH 02/90] Add new focus to buttons --- scss/_buttons.scss | 5 ++++- scss/_variables.scss | 4 ++++ scss/forms/_form-control.scss | 16 +++++++++++++++- 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index a8394d9d6e..3bc4cec52d 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -43,7 +43,6 @@ @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); @@ -68,6 +67,7 @@ } @else { box-shadow: var(--#{$prefix}btn-focus-box-shadow); } + @include focus-visible(); } } @@ -207,6 +207,9 @@ &:not(:hover) { color: var(--#{$prefix}btn-color); outline-color: var(--#{$prefix}btn-color); + &[data-focus-visible-added] { + @include focus-visible(); + } } &:hover { diff --git a/scss/_variables.scss b/scss/_variables.scss index 1187139648..8386d7f59b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1004,7 +1004,11 @@ $input-border-radius: $border-radius !default; // Boosted mod: no input-sm $input-border-radius-lg: $border-radius-lg !default; +$input-focus-bg: $input-bg !default; +$input-focus-border-color: currentcolor !default; +$input-focus-color: $input-color !default; $input-focus-width: $input-btn-focus-width !default; +$input-focus-box-shadow: $input-btn-focus-box-shadow !default; $input-placeholder-color: $gray-700 !default; $input-plaintext-color: var(--#{$prefix}body-color) !default; diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index be633a1ee7..2158504766 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -30,7 +30,21 @@ } &:focus { - @include focus-visible(); + color: $input-focus-color; + background-color: $input-focus-bg; + border-color: $input-focus-border-color !important; // stylelint-disable-line declaration-no-important + outline: 0; + @if $enable-shadows { + @include box-shadow($input-box-shadow, $input-focus-box-shadow); + } @else { + // Avoid using mixin so we can pass custom focus shadow properly + box-shadow: $input-focus-box-shadow; + } + + // Boosted mod : update focus for WCAG + &[data-focus-visible-added] { + @include focus-visible(); + } } // Add some height to date inputs on iOS From 98b50a591f62d3609c6e2cee97f0fa06723ca52f Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Thu, 4 Aug 2022 18:44:57 +0200 Subject: [PATCH 03/90] Fix hover effect on focus for buttons --- scss/_buttons.scss | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 3bc4cec52d..8c975fbee1 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -54,13 +54,8 @@ // Boosted mod: no .btn-check + &:hover &:focus { // Boosted mod: no &:focus-visible to avoid issue in button tags - color: var(--#{$prefix}btn-hover-color); - @include gradient-bg(var(--#{$prefix}btn-hover-bg)); - border-color: var(--#{$prefix}btn-hover-border-color); - // Boosted mod: no outline: 0; - outline-color: var(--#{$prefix}btn-hover-border-color); // Boosted mod - outline-offset: $outline-width; // Boosted mod - &[data-focus-visible-added] { // Boosted mod: added `&[data-focus-visible-added]` + // Boosted mod: added `&[data-focus-visible-added]` + &[data-focus-visible-added] { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); From 0b3373d78bbeb8d6014ff73dd19125d379d374a8 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Fri, 5 Aug 2022 14:32:41 +0200 Subject: [PATCH 04/90] Refactoring --- scss/mixins/_focus.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/mixins/_focus.scss b/scss/mixins/_focus.scss index ad60378755..570b2b5b04 100644 --- a/scss/mixins/_focus.scss +++ b/scss/mixins/_focus.scss @@ -1,4 +1,4 @@ @mixin focus-visible { - outline: $brand-orange solid 3px; - outline-offset: 3px; + outline: $brand-orange solid map-get($border-widths, 3); + outline-offset: map-get($border-widths, 3); } From 686a9621ebef11d37969a83130b5be7427d085c0 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Fri, 5 Aug 2022 14:39:21 +0200 Subject: [PATCH 05/90] Fix for carousels --- scss/_carousel.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/scss/_carousel.scss b/scss/_carousel.scss index e093127567..6c4d88d74b 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -130,8 +130,7 @@ &[data-focus-visible-added] { // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector & > span { - outline: map-get($border-widths, 3) solid $brand-orange; - outline-offset: $outline-offset; + @include focus-visible(); box-shadow: 0 0 0 $outline-offset $white; } } @@ -228,8 +227,7 @@ &:focus { &[data-focus-visible-added] { - outline: map-get($border-widths, 3) solid $brand-orange; - outline-offset: $outline-offset; + @include focus-visible(); box-shadow: 0 0 0 $outline-offset $white; transform: none; } From 6e8a80973c31a49172516d4be9a8034e89fc48d0 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Fri, 5 Aug 2022 15:30:47 +0200 Subject: [PATCH 06/90] Fix for social buttons --- scss/_buttons.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 8c975fbee1..b3e6e8e776 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -256,7 +256,10 @@ @include button-icon(var(--#{$boosted-prefix}network-logo)); &:focus { - outline-color: var(--#{$boosted-prefix}network-color, $black); + &[data-focus-visible-added] { + color: var(--#{$prefix}btn-color); + @include focus-visible(); + } } &.btn-inverse { From 9271562acd68eeece5c840654276be1275f8a1b3 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Mon, 8 Aug 2022 16:11:10 +0200 Subject: [PATCH 07/90] Fix after review --- scss/_buttons.scss | 3 +-- scss/_reboot.scss | 4 ---- scss/mixins/_focus.scss | 2 +- 3 files changed, 2 insertions(+), 7 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index b3e6e8e776..fd75e89e70 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -39,7 +39,6 @@ cursor: if($enable-button-pointers, pointer, null); user-select: none; border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color); - outline-offset: map-get($spacers, 1); // Boosted mod @include border-radius(var(--#{$prefix}btn-border-radius)); @include gradient-bg(var(--#{$prefix}btn-bg)); @include box-shadow(var(--#{$prefix}btn-box-shadow)); @@ -149,7 +148,7 @@ // Boosted mod: no .btn-outline -// Boosted mod: border-only on :hover, :focus and :active +// Boosted mod: border-only on :hover and :active .btn-no-outline { --#{$prefix}btn-hover-border-color: #{$gray-500}; --#{$prefix}btn-active-color: #{$accessible-orange}; diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 514678ab62..c071f4c50a 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -336,13 +336,9 @@ sup { top: -.5em; } a { color: var(--#{$prefix}link-color); text-decoration: $link-decoration; - // Boosted mod - outline-offset: $outline-offset * 4; - @include transition($transition-focus); &:focus { color: var(--#{$prefix}link-hover-color); - outline-offset: $outline-offset; } // End mod diff --git a/scss/mixins/_focus.scss b/scss/mixins/_focus.scss index 570b2b5b04..c20cbc71f1 100644 --- a/scss/mixins/_focus.scss +++ b/scss/mixins/_focus.scss @@ -1,4 +1,4 @@ @mixin focus-visible { - outline: $brand-orange solid map-get($border-widths, 3); + outline: var(--#{$prefix}link-hover-color) solid map-get($border-widths, 3); outline-offset: map-get($border-widths, 3); } From cd6f53bfc9ee7b4feaea34c0707438f3e1b7b3ca Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Tue, 9 Aug 2022 09:55:20 +0200 Subject: [PATCH 08/90] Fix hover on dark social buttons when focus --- scss/_buttons.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index fd75e89e70..5e53e35cd5 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -255,8 +255,9 @@ @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] { - color: var(--#{$prefix}btn-color); @include focus-visible(); } } From f24f71a4942d88fe321a6bb8ae045593e9d2aaef Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Tue, 9 Aug 2022 16:07:58 +0200 Subject: [PATCH 09/90] Focus on select --- scss/_variables.scss | 6 ------ scss/forms/_form-select.scss | 13 +++---------- 2 files changed, 3 insertions(+), 16 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 8386d7f59b..5654254e54 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1132,11 +1132,6 @@ $form-select-feedback-icon-size: $input-height-inner-half $input-height-i $form-select-border-width: $input-border-width !default; $form-select-border-color: $input-border-color !default; -$form-select-border-radius: $input-border-radius !default; -$form-select-box-shadow: $box-shadow-inset !default; - -$form-select-focus-border-color: $input-color !default; // Boosted mod: for border to show in Firefox -$form-select-focus-box-shadow: null !default; // Boosted mod: no .form-select-sm @@ -1145,7 +1140,6 @@ $form-select-padding-x-lg: $input-padding-x-lg !default; $form-select-font-size-lg: $input-font-size-lg !default; $form-select-border-radius-lg: $input-border-radius-lg !default; -$form-select-transition: $input-transition !default; // scss-docs-end form-select-variables // scss-docs-start form-range-variables diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss index 025e102504..1dc5b019b1 100644 --- a/scss/forms/_form-select.scss +++ b/scss/forms/_form-select.scss @@ -19,19 +19,12 @@ background-position: $form-select-bg-position; background-size: $form-select-bg-size; border: $form-select-border-width solid $form-select-border-color; - @include border-radius($form-select-border-radius, 0); - @include box-shadow($form-select-box-shadow); - @include transition($form-select-transition); appearance: none; &:focus { - border-color: $form-select-focus-border-color !important; // stylelint-disable-line declaration-no-important - outline: 0; - @if $enable-shadows { - @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow); - } @else { - // Avoid using mixin so we can pass custom focus shadow properly - box-shadow: $form-select-focus-box-shadow; + // Boosted mod : update focus for WCAG + &[data-focus-visible-added] { + @include focus-visible(); } } From 32e30de22e78a7b322f71c5fe5de066c6463f6b8 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Tue, 9 Aug 2022 16:47:40 +0200 Subject: [PATCH 10/90] Focus on checkboxes and radios --- scss/_variables.scss | 5 ----- scss/forms/_form-check.scss | 8 ++++---- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 5654254e54..0a2417d508 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1022,8 +1022,6 @@ $input-height-sm: 1.875rem !default; $input-height-lg: 3.125rem !default; $input-line-height-lg: $h5-line-height !default; // Boosted mod -$input-transition: border-color $transition-duration $transition-timing, $transition-focus !default; - $form-color-width: 3rem !default; // scss-docs-end form-input-variables @@ -1035,7 +1033,6 @@ $form-check-margin-bottom: .125rem !default; $form-check-label-padding-top: .4375rem !default; // Boosted mod $form-check-label-color: null !default; $form-check-label-cursor: null !default; -$form-check-transition: null !default; $form-check-input-active-filter: null !default; $form-check-input-active-bg-color: $component-active-bg !default; // Boosted mod @@ -1044,8 +1041,6 @@ $form-check-input-bg: $input-bg !default; $form-check-input-border: $border-width solid $input-border-color !default; $form-check-input-border-radius: 0 !default; $form-check-radio-border-radius: 50% !default; -$form-check-input-focus-border: null !default; -$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default; $form-check-input-checked-color: $component-active-color !default; $form-check-input-checked-bg-color: $component-active-bg !default; diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index ed59fc7b68..a0171af48d 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -38,7 +38,6 @@ border: $form-check-input-border; appearance: none; print-color-adjust: exact; // Keep themed appearance for print - @include transition($form-check-transition); &[type="checkbox"] { @include border-radius($form-check-input-border-radius, $form-check-input-border-radius); // Boosted mod @@ -56,9 +55,10 @@ } &:focus { - border-color: $form-check-input-focus-border; - // Boosted mod: default outline - box-shadow: $form-check-input-focus-box-shadow; + // Boosted mod : update focus for WCAG + &[data-focus-visible-added] { + @include focus-visible(); + } } &:checked { From cc52e1c0204d6680c9e3d08ae4a26dce3ee798c1 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Wed, 10 Aug 2022 15:33:21 +0200 Subject: [PATCH 11/90] Focus on links and links with chevron --- scss/_reboot.scss | 2 +- scss/_type.scss | 11 +++++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/scss/_reboot.scss b/scss/_reboot.scss index c071f4c50a..440bc732d5 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -338,7 +338,7 @@ a { text-decoration: $link-decoration; &:focus { - color: var(--#{$prefix}link-hover-color); + @include focus-visible(); } // End mod diff --git a/scss/_type.scss b/scss/_type.scss index d5cbd8b774..61244e7b81 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -258,14 +258,21 @@ h2, transform: $linked-chevron-transform; } - &:hover, - &:focus { + &:hover { text-decoration: $link-decoration; &::after { filter: $orange-filter; } } + + &:focus { + text-decoration: $link-decoration; + + &::after { + filter: var(--#{$prefix}link-hover-color); + } + } } // End mod From 5dfada43411a6c1f38c3b1487b8e528a45dc6126 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Wed, 10 Aug 2022 16:28:08 +0200 Subject: [PATCH 12/90] Fix after review --- scss/_carousel.scss | 2 +- scss/mixins/_focus.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 6c4d88d74b..a644e4cf90 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -131,7 +131,7 @@ // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector & > span { @include focus-visible(); - box-shadow: 0 0 0 $outline-offset $white; + box-shadow: 0 0 0 map-get($border-widths, 3) $white; } } } diff --git a/scss/mixins/_focus.scss b/scss/mixins/_focus.scss index c20cbc71f1..1c0ab28011 100644 --- a/scss/mixins/_focus.scss +++ b/scss/mixins/_focus.scss @@ -1,4 +1,5 @@ @mixin focus-visible { outline: var(--#{$prefix}link-hover-color) solid map-get($border-widths, 3); outline-offset: map-get($border-widths, 3); + z-index: 3; } From 35a7a622a27756ddc675513d1a4b426abee0b7f5 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Wed, 10 Aug 2022 19:30:42 +0200 Subject: [PATCH 13/90] Fix hover on focused link with chevron --- scss/_type.scss | 4 ++++ scss/mixins/_focus.scss | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/scss/_type.scss b/scss/_type.scss index 61244e7b81..1b009df694 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -272,6 +272,10 @@ h2, &::after { filter: var(--#{$prefix}link-hover-color); } + + &:hover { + filter: $orange-filter; + } } } // End mod diff --git a/scss/mixins/_focus.scss b/scss/mixins/_focus.scss index 1c0ab28011..d5daf1b842 100644 --- a/scss/mixins/_focus.scss +++ b/scss/mixins/_focus.scss @@ -1,5 +1,5 @@ @mixin focus-visible { + z-index: 3; outline: var(--#{$prefix}link-hover-color) solid map-get($border-widths, 3); outline-offset: map-get($border-widths, 3); - z-index: 3; } From c04e1ed70adfe2cde3d9d4d06b37d4b441c5a070 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Thu, 11 Aug 2022 15:10:57 +0200 Subject: [PATCH 14/90] Focus on star rating --- scss/_variables.scss | 6 ------ scss/forms/_star-rating.scss | 11 ++++------- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 0a2417d508..15e43d9660 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1065,12 +1065,6 @@ $form-star-size: 1.5625rem !default; $form-star-size-sm: 1.25rem !default; $form-star-margin-between: -.125rem !default; -$form-star-focus-box-shadow: $input-btn-focus-box-shadow !default; -$form-star-focus-color: $black !default; -$form-star-focus-outline: $border-width solid $form-star-focus-color !default; - -$form-star-focus-color-dark: $white !default; -$form-star-focus-outline-dark: $border-width solid $form-star-focus-color-dark !default; // End mod // scss-docs-end form-check-variables diff --git a/scss/forms/_star-rating.scss b/scss/forms/_star-rating.scss index dc445ca0a9..0280e036d2 100644 --- a/scss/forms/_star-rating.scss +++ b/scss/forms/_star-rating.scss @@ -3,10 +3,6 @@ // .star-rating { - &:focus-within { - outline: $form-star-focus-outline; - box-shadow: $form-star-focus-box-shadow; - } &.disabled, &:disabled { @@ -41,6 +37,8 @@ > input:focus + label { @include form-star-rating($accessible-orange); + @include focus-visible(); + // outline-offset: -1px; } &:hover input + label { @@ -57,9 +55,6 @@ } .star-rating-dark { - &:focus-within { - outline: $form-star-focus-outline-dark; - } > label { @include form-star-rating($brand-orange); @@ -79,6 +74,8 @@ > input:focus + label { @include form-star-rating($brand-orange); + @include focus-visible(); + // outline-offset: -1px; } &:hover input + label { From fe46e2d71137d3d1384745a061676033b8451335 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Thu, 11 Aug 2022 15:55:13 +0200 Subject: [PATCH 15/90] Focus on close button --- scss/_close.scss | 8 ++------ scss/_variables.scss | 1 - 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/scss/_close.scss b/scss/_close.scss index 8e55326031..455116f911 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -32,17 +32,13 @@ // Boosted mod: matching .btn-no-outline &:hover, - &:focus, &:active { border: var(--#{$prefix}btn-close-border-width) solid var(--#{$prefix}btn-close-active-border-color); } &:focus { - outline-offset: $outline-width; - @include transition($transition-focus); - &[data-focus-visible-added] { - box-shadow: $btn-close-focus-shadow; + @include focus-visible(); } } @@ -73,7 +69,7 @@ &:focus { &[data-focus-visible-added] { - box-shadow: 0 0 0 $btn-focus-width $black; + @include focus-visible(); } } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 15e43d9660..008fad2f01 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1950,7 +1950,6 @@ $btn-close-border-width: $border-width !default; // Boosted mod $btn-close-border-color: transparent !default; // Boosted mod $btn-close-color: $black !default; $btn-close-bg: var(--#{$boosted-prefix}close-icon) !default; // Boosted mod -$btn-close-focus-shadow: $btn-focus-box-shadow !default; // Boosted mod: no opacity/filter // Boosted mod From 4bf92d20c3cd88cbda1324294af76204ef997043 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Thu, 11 Aug 2022 16:22:52 +0200 Subject: [PATCH 16/90] Focus on toggle buttons --- scss/_variables.scss | 1 - scss/forms/_form-check.scss | 4 +--- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 008fad2f01..0566270f74 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -884,7 +884,6 @@ $btn-border-width: $input-btn-border-width !default; $btn-font-weight: $font-weight-bold !default; $btn-box-shadow: null !default; $btn-focus-width: $border-width !default; -$btn-focus-box-shadow: 0 0 0 $btn-focus-width $white !default; $btn-disabled-opacity: 1 !default; $btn-active-box-shadow: null !default; diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index a0171af48d..236457dc32 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -278,9 +278,7 @@ &[data-focus-visible-added] { + .btn { - outline: $outline-width solid; - outline-offset: $outline-width; - box-shadow: $btn-focus-box-shadow; + @include focus-visible(); } &:checked + .btn-no-outline { From 731fd49a9fe70610884c1a36ea2ca1987fecbc85 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Tue, 16 Aug 2022 16:40:23 +0200 Subject: [PATCH 17/90] Focus on switches --- scss/_variables.scss | 2 -- scss/forms/_form-check.scss | 22 ++++++++++++++-------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 0566270f74..cac92cc63a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1075,8 +1075,6 @@ $form-switch-bg-image: var(--#{$boosted-prefix}close-icon) !default; $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, $transition-focus !default; // Boosted mod // Boosted mod: no $form-switch-focus-color // Boosted mod: no $form-switch-focus-bg-image diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index 236457dc32..0d794a3f71 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -163,8 +163,6 @@ border-color: $white; // Boosted mod outline-color: $white; // Boosted mod outline-offset: $spacer; // Boosted mod - @include border-radius($form-switch-border-radius); - @include transition($form-switch-transition); &:checked { background-color: $primary; @@ -181,11 +179,16 @@ background-size: $form-switch-checked-bg-size, $form-switch-bg-square-size 100%; } - &:active, - &:focus { + &:active { outline-color: $primary; } + &:focus { + &[data-focus-visible-added] { + @include focus-visible(); + } + } + // Boosted mod &:not(:disabled) { --#{$boosted-prefix}switch-gradient: #{linear-gradient(to right, $white $form-switch-bg-square-size, transparent)}; @@ -193,16 +196,19 @@ // End mod } - &:focus { - outline-offset: $outline-width * .5; - } - &:active { background-color: $form-check-input-active-bg-color; filter: none; border-color: $form-check-input-active-bg-color; } + &:focus { + &[data-focus-visible-added] { + @include focus-visible(); + outline-color: #0e91ff; /* Inverted color of var(--#{$prefix}link-hover-color) to compose with filter: invert(1)*/ + } + } + // Boosted mod &:disabled { background-color: $form-check-input-disabled-color; From 5fff5328c6c04ec54e0d7a86e2a366ac6fc00b2f Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Wed, 17 Aug 2022 14:56:31 +0200 Subject: [PATCH 18/90] Focus on nav & tabs --- scss/_nav.scss | 48 +++++++++++++++++++++++++++++-------- scss/forms/_form-check.scss | 2 +- 2 files changed, 39 insertions(+), 11 deletions(-) diff --git a/scss/_nav.scss b/scss/_nav.scss index 0bbff97ab3..8729abfd78 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -32,12 +32,17 @@ background: none; // Boosted mod: Prevent dropdown's background to interfere @include transition($nav-link-transition); - &:hover, - &:focus { + &:hover { color: var(--#{$prefix}nav-link-hover-color); text-decoration: if($link-hover-decoration == underline, none, null); } + &:focus { + &[data-focus-visible-added] { + @include focus-visible(); + } + } + // Disabled state lightens text &.disabled { color: var(--#{$prefix}nav-link-disabled-color); @@ -83,10 +88,9 @@ border-width: var(--#{$prefix}nav-tabs-link-border-width); // Boosted mod @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius)); - &:hover, - &:focus { - color: var(--#{$prefix}nav-tabs-link-hover-color); // Boosted mod - background-color: var(--#{$prefix}nav-tabs-link-hover-bg); // Boosted mod + &: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); @@ -94,6 +98,12 @@ outline-offset: var(--#{$prefix}nav-tabs-border-width); // Boosted mod } + &:focus { + &[data-focus-visible-added] { + @include focus-visible(); + } + } + &.disabled, &:disabled { color: var(--#{$prefix}nav-link-disabled-color); @@ -129,10 +139,28 @@ --#{$prefix}nav-tabs-link-active-border-color: #{$accessible-orange}; // scss-docs-end nav-tabs-light-css-vars - .nav-link:hover, - .nav-link:focus { - color: var(--#{$prefix}nav-tabs-link-hover-color); - outline-color: currentcolor; + border-color: $gray-500; + + .nav-link { + // stylelint-disable-next-line function-disallowed-list + border-width: 0 0 calc(var(--#{$prefix}nav-tabs-border-width) * 4); + + &:hover { + 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 diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index 0d794a3f71..7b0a19b663 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -205,7 +205,7 @@ &:focus { &[data-focus-visible-added] { @include focus-visible(); - outline-color: #0e91ff; /* Inverted color of var(--#{$prefix}link-hover-color) to compose with filter: invert(1)*/ + outline-color: #0e91ff; /* Inverted color of var(--#{$prefix}link-hover-color) to compose with filter: invert(1) */ } } From af3dd9c91fea137feb57d5180baa48895b2a2fc6 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Wed, 17 Aug 2022 15:33:53 +0200 Subject: [PATCH 19/90] Focus on pagination --- scss/_pagination.scss | 21 +++++++++++---------- scss/_variables.scss | 2 -- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 7e6a6922d2..0411dc9435 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -52,7 +52,6 @@ text-decoration: if($link-decoration == none, null, none); background-color: var(--#{$prefix}pagination-bg); border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color); - @include transition($pagination-transition); // Boosted mod: embed icon as mask-image @include button-icon( var(--#{$prefix}pagination-icon), @@ -71,13 +70,8 @@ border-color: var(--#{$prefix}pagination-hover-border-color); } - &:focus { - z-index: 3; - color: var(--#{$prefix}pagination-focus-color); - background-color: var(--#{$prefix}pagination-focus-bg); - border-color: var(--#{$prefix}pagination-hover-border-color); // Boosted mod - outline: $pagination-focus-outline; - box-shadow: var(--#{$prefix}pagination-focus-box-shadow); + &[data-focus-visible-added] { + @include focus-visible(); } // Boosted mod @@ -97,6 +91,10 @@ @include gradient-bg(var(--#{$prefix}pagination-active-bg)); border-color: var(--#{$prefix}pagination-active-border-color); outline-color: var(--#{$prefix}pagination-active-bg); // Boosted mod + + &[data-focus-visible-added] { + @include focus-visible(); + } } &.disabled, @@ -137,13 +135,16 @@ &:last-child:not(.active) .page-link { border-color: currentcolor; - &:hover, - &:focus { + &:hover { color: var(--#{$prefix}pagination-active-color); background-color: var(--#{$prefix}pagination-active-bg); border-color: var(--#{$prefix}pagination-active-border-color); } + &[data-focus-visible-added] { + @include focus-visible(); + } + &.active { border-color: var(--#{$prefix}pagination-border-color); } diff --git a/scss/_variables.scss b/scss/_variables.scss index cac92cc63a..06af25fbcb 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1421,8 +1421,6 @@ $pagination-disabled-color: $gray-500 !default; $pagination-disabled-bg: $white !default; $pagination-disabled-border-color: $pagination-disabled-color !default; -$pagination-transition: $transition-focus !default; - // Boosted mod $pagination-padding-end: 1.125rem !default; $pagination-icon: var(--#{$boosted-prefix}chevron-icon) !default; From d88bb48992d3020284ebc101d5f1e9d49f21812a Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Wed, 17 Aug 2022 16:16:40 +0200 Subject: [PATCH 20/90] Focus on responsive tables --- scss/_tables.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/scss/_tables.scss b/scss/_tables.scss index 3f80b529fe..4e424ad7f1 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -131,6 +131,10 @@ .table-responsive#{$infix} { overflow-x: auto; -webkit-overflow-scrolling: touch; + + &[data-focus-visible-added] { + @include focus-visible(); + } } } } From 9b5c1cb338980760d837d5d029c60a18a6c2b339 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Wed, 17 Aug 2022 16:58:02 +0200 Subject: [PATCH 21/90] Focus on validation --- scss/forms/_form-control.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index 2158504766..09b58872d8 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -32,7 +32,7 @@ &:focus { color: $input-focus-color; background-color: $input-focus-bg; - border-color: $input-focus-border-color !important; // stylelint-disable-line declaration-no-important + border-color: $input-focus-border-color; outline: 0; @if $enable-shadows { @include box-shadow($input-box-shadow, $input-focus-box-shadow); From c4eb2c7f5a7637f97c884ce0b37379a07f1bd6ba Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Wed, 17 Aug 2022 18:17:02 +0200 Subject: [PATCH 22/90] Focus on list group --- scss/_list-group.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 2ebecc6e65..3daef3cef8 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -53,11 +53,9 @@ color: var(--#{$prefix}list-group-action-color); text-align: inherit; // For `', ' ', diff --git a/site/layouts/partials/skippy.html b/site/layouts/partials/skippy.html index e08bfb4414..f965a510e7 100644 --- a/site/layouts/partials/skippy.html +++ b/site/layouts/partials/skippy.html @@ -1,9 +1,9 @@
From 6d4c139d739966f5f99c172fc4b19de6dfd9f5c1 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Thu, 29 Dec 2022 09:47:43 +0100 Subject: [PATCH 70/90] Small fixes --- site/content/docs/5.2/forms/checks-radios.md | 6 +++--- site/layouts/shortcodes/ods-incompatibility-alert.html | 4 +--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/site/content/docs/5.2/forms/checks-radios.md b/site/content/docs/5.2/forms/checks-radios.md index eb2ec52b2a..180f9cec49 100644 --- a/site/content/docs/5.2/forms/checks-radios.md +++ b/site/content/docs/5.2/forms/checks-radios.md @@ -328,21 +328,21 @@ Drop borders using `.btn-no-outline`, too. {{< example >}}
- + - + - +