diff options
| author | Patrick H. Lauke <[email protected]> | 2022-09-01 02:30:23 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2022-08-31 18:30:23 -0700 |
| commit | cda901f2444d6b09cfa3261c84ef98288e3b9834 (patch) | |
| tree | bd4fd58e7d3c5776e1c9ab5d59570317a37396d0 | |
| parent | 87aaf9499620c9a7b592711a6e8d86e9a30467b6 (diff) | |
| download | bootstrap-cda901f2444d6b09cfa3261c84ef98288e3b9834.tar.xz bootstrap-cda901f2444d6b09cfa3261c84ef98288e3b9834.zip | |
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
| -rw-r--r-- | scss/_buttons.scss | 6 | ||||
| -rw-r--r-- | 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 30f435c01..09bdf032b 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 6f3256894..f4865daf8 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 { |