rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-29 21:52:22 +01:00
Code Issues Actions Packages Releases Activity

v5/docs: reintroduce outline for docs code samples, buttons when :not(:focus-visible) (#36507)

Browse Source 
* 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
This commit is contained in:
Patrick H. Lauke 2022-09-01 02:30:23 +01:00 committed by GitHub
parent 87aaf94996
commit cda901f244
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
scss/_buttons.scss
View File

@ -52,7 +52,6 @@
color: var(--#{$prefix}btn-hover-color); color: var(--#{$prefix}btn-hover-color);
@include gradient-bg(var(--#{$prefix}btn-hover-bg)); @include gradient-bg(var(--#{$prefix}btn-hover-bg));
border-color: var(--#{$prefix}btn-hover-border-color); border-color: var(--#{$prefix}btn-hover-border-color);
outline: 0;
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows { @if $enable-shadows {
box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); 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:checked + &,
.btn-check:active + &, .btn-check:active + &,
&:active, &:active,

6
site/assets/scss/_component-examples.scss
View File

@ -320,15 +320,11 @@
pre { pre {
padding: 0; padding: 0;
margin-top: .625rem; margin-top: .625rem;
margin-right: 1.875rem;
margin-bottom: .625rem; margin-bottom: .625rem;
white-space: pre; white-space: pre;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
// Undo tabindex that's automatically added by Hugo
&:focus {
outline: 0;
}
} }
pre code { pre code {