kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code 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);
@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,

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

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