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

@@ -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,

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 {