diff options
| author | Patrick H. Lauke <redux@splintered.co.uk> | 2022-09-01 04:30:23 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-09-01 04:30:23 +0300 |
| commit | cda901f2444d6b09cfa3261c84ef98288e3b9834 (patch) | |
| tree | bd4fd58e7d3c5776e1c9ab5d59570317a37396d0 /scss | |
| parent | 87aaf9499620c9a7b592711a6e8d86e9a30467b6 (diff) | |
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
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_buttons.scss | 6 |
1 files changed, 5 insertions, 1 deletions
diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 30f435c019..09bdf032b8 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, |