From ac85fdb72a6ae8068fe09bae1adb57f3d76d01f0 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Wed, 6 Jan 2021 00:26:50 +0000
Subject: [PATCH] Suppress focus outline for buttons when it shouldn't be
 visible in Chromium

Follow-up to https://github.com/twbs/bootstrap/pull/32631
---
 scss/_reboot.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 58e1a34d0275..973b5d16c702 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -411,6 +411,15 @@ button {
   border-radius: 0;
 }
 
+// Explicitly remove focus outline in Chromium when it shouldn't be
+// visible (e.g. as result of mouse click or touch tap). It already
+// should be doing this automatically, but seems to currently be
+// confused and applies its very visible two-tone outline anyway.
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
 // 1. Remove the margin in Firefox and Safari
 
 input,