From c942ef17a56287928289eaa4a840bec2494afe63 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 25 Aug 2022 19:51:02 +0100
Subject: [PATCH] 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
---
 scss/_buttons.scss | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index ad69ba73b..b2e6df558 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -47,7 +47,6 @@
     border-color: var(--#{$prefix}btn-hover-border-color);
   }
 
-  .btn-check:focus-visible + &,
   &:focus-visible {
     color: var(--#{$prefix}btn-hover-color);
     @include gradient-bg(var(--#{$prefix}btn-hover-bg));
@@ -61,6 +60,17 @@
     }
   }
 
+  .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 + &,
   :not(.btn-check) + &:active,
   &:first-child:active,