bjoernager/rust
bjoernager/rust
1
Fork 0
Code Activity

Rollup merge of #103554 - notriddle:notriddle/summary-focus-visible, r=jsha

Browse source 
rustdoc: add visible focus outline to rustdoc-toggle

The change in opacity is inconsistent with most of rustdoc, which uses default browser styles for the focus outline. Unfortunately, just using the default focus outline here won't work, because it gets applied to the summary itself instead of the pseudo-element "real button."

Preview: https://notriddle.com/notriddle-rustdoc-demos/focus-outline/test_dingus/fn.test.html

## Screenshots

### light

![image](https://user-images.githubusercontent.com/1593513/197903818-61ce09e2-024e-4ca9-9aba-764039561d0a.png)

### dark

![image](https://user-images.githubusercontent.com/1593513/197903765-76e428ea-71e8-4724-ad21-7a4f9d923ea2.png)

### ayu

![image](https://user-images.githubusercontent.com/1593513/197903790-322e22ae-64b5-4138-b931-9ff3ff54f3b0.png)
This commit is contained in:
Dylan DPC 2022-10-26 17:32:56 +05:30 • committed by GitHub
commit 74a4c679b3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/librustdoc/html/static/css/rustdoc.css
View file

@ -1585,6 +1585,15 @@ details.rustdoc-toggle > summary:hover::before {
opacity: 1; opacity: 1;
} }
details.rustdoc-toggle > summary:focus-visible::before {
/* The SVG is black, and gets turned white using a filter in the dark themes.
Do the same with the outline.
The dotted 1px style is copied from Firefox's focus ring style.
*/
outline: 1px dotted #000;
outline-offset: 1px;
}
details.rustdoc-toggle.top-doc > summary, details.rustdoc-toggle.top-doc > summary,
details.rustdoc-toggle.top-doc > summary::before, details.rustdoc-toggle.top-doc > summary::before,
details.rustdoc-toggle.non-exhaustive > summary, details.rustdoc-toggle.non-exhaustive > summary,