From cda901f2444d6b09cfa3261c84ef98288e3b9834 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 1 Sep 2022 02:30:23 +0100
Subject: [PATCH] v5/docs: reintroduce `outline` for docs code samples, buttons
 when `:not(:focus-visible)` (#36507)

* Remove outline suppression for focused `<pre>`

Sighted keyboard users rely on knowing where their focus is. If the `<pre>` receives focus (so that it can be scrolled by keyboard users, for instance) then it's essential that they know this is the case

* Only suppress outline for buttons when `:not(:focus-visible)`

* Add right-hand margin to pre

avoids having the focus outline awkwardly clipped by the copy button
---
 scss/_buttons.scss                        | 6 +++++-
 site/assets/scss/_component-examples.scss | 6 +-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 30f435c0190a..09bdf032b815 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -52,7 +52,6 @@
     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);
@@ -61,6 +60,11 @@
     }
   }
 
+  .btn-check:focus:not(:focus-visible) + &,
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
   .btn-check:checked + &,
   .btn-check:active + &,
   &:active,
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 6f325689462e..f4865daf8a42 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -320,15 +320,11 @@
   pre {
     padding: 0;
     margin-top: .625rem;
+    margin-right: 1.875rem;
     margin-bottom: .625rem;
     white-space: pre;
     background-color: transparent;
     border: 0;
-
-    // Undo tabindex that's automatically added by Hugo
-    &:focus {
-      outline: 0;
-    }
   }
 
   pre code {