v5/docs: reintroduce `outline` for docs code samples, buttons when `:not(:focus-visib...

* 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

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 30f435c0190a56f674979690d24d09c58b942c43..09bdf032b8159937bf989f37173f9477cd1522b0 100644 (file)
--- 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 6f325689462ee132681edeb353c658e36535a85e..f4865daf8a42b9878363a61f5bc66a2c21bb0428 100644 (file)
--- 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 {