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 /site | |
| 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 'site')
| -rw-r--r-- | site/assets/scss/_component-examples.scss | 6 |
1 files changed, 1 insertions, 5 deletions
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 6f32568946..f4865daf8a 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 { |