about summary refs log tree commit diff
path: root/src
diff options
context:
space:
mode:
authorDylan DPC <99973273+Dylan-DPC@users.noreply.github.com>2022-10-26 17:32:56 +0530
committerGitHub <noreply@github.com>2022-10-26 17:32:56 +0530
commit74a4c679b37ee687cba88534c1e2b22da55f55be (patch)
treefbf5434dd75597c3e999c2f6a1dd7ef288897a6b /src
parent709462bfe113c20ed780e6ca2d8fe3516be2d124 (diff)
parentb857138d3bad1372618cb925963a9e1fb512fd8e (diff)
downloadrust-74a4c679b37ee687cba88534c1e2b22da55f55be.tar.gz
rust-74a4c679b37ee687cba88534c1e2b22da55f55be.zip
Rollup merge of #103554 - notriddle:notriddle/summary-focus-visible, r=jsha
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)
Diffstat (limited to 'src')
-rw-r--r--src/librustdoc/html/static/css/rustdoc.css9
1 files changed, 9 insertions, 0 deletions
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 173553ed477..8424b2c4e29 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -1585,6 +1585,15 @@ details.rustdoc-toggle > summary:hover::before {
 	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::before,
 details.rustdoc-toggle.non-exhaustive > summary,