Rework button focus/active styling, with extra changes for checks/radios (#37026)

* Replace :focus styles with :focus-visible

* Remove :active / .active styles

* Don't apply :hover styles for `.btn` that follows a `.btn-check`

This removes a large part of the visual confusion of button checks/radios - that you currently have to move your mouse away from them to see what they actually changed to (checked or unchecked)

* Reintroduce :active, but *not* for button checks/radios

* Sort focus styling specifically for button checks/radios

don't change background on focus, just give it the border/outline. again, avoids confusion whether something is checked or not while focused

* Re-add `outline:0` which was lost when resolving last merge conflict

Co-authored-by: Mark Otto <markd.otto@gmail.com>

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 09bdf032b8159937bf989f37173f9477cd1522b0..89483d5764a7bcca9465b8249484cf11edbd2684 100644 (file)
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -40,18 +40,19 @@
   @include box-shadow(var(--#{$prefix}btn-box-shadow));
   @include transition($btn-transition);
 
-  &:hover {
+  :not(.btn-check) + &:hover,
+  &:first-child:hover {
     color: var(--#{$prefix}btn-hover-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
     background-color: var(--#{$prefix}btn-hover-bg);
     border-color: var(--#{$prefix}btn-hover-border-color);
   }
 
-  .btn-check:focus + &,
-  &:focus {
+  &:focus-visible {
     color: var(--#{$prefix}btn-hover-color);
     @include gradient-bg(var(--#{$prefix}btn-hover-bg));
     border-color: var(--#{$prefix}btn-hover-border-color);
+    outline: 0;
     // 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);
@@ -60,14 +61,20 @@
     }
   }
 
-  .btn-check:focus:not(:focus-visible) + &,
-  &:focus:not(:focus-visible) {
+  .btn-check:focus-visible + & {
+    border-color: var(--#{$prefix}btn-hover-border-color);
     outline: 0;
+    // 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);
+    } @else {
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    }
   }
 
   .btn-check:checked + &,
-  .btn-check:active + &,
-  &:active,
+  :not(.btn-check) + &:active,
+  &:first-child:active,
   &.active,
   &.show {
     color: var(--#{$prefix}btn-active-color);
@@ -77,7 +84,7 @@
     border-color: var(--#{$prefix}btn-active-border-color);
     @include box-shadow(var(--#{$prefix}btn-active-shadow));
 
-    &:focus {
+    &:focus-visible {
       // Avoid using mixin so we can pass custom focus shadow properly
       @if $enable-shadows {
         box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
@@ -162,11 +169,11 @@
   text-decoration: $link-decoration;
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     text-decoration: $link-hover-decoration;
   }
 
-  &:focus {
+  &:focus-visible {
     color: var(--#{$prefix}btn-color);
   }