From 60b5f6dc9190c1fa10c2ca22d472d32f9689253e Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Tue, 25 Oct 2022 16:52:50 -0700 Subject: [PATCH 1/2] 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." --- src/librustdoc/html/static/css/rustdoc.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 173553ed47749..84a1fa2e28ece 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1585,6 +1585,14 @@ 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. + Do the same with the outline. + */ + 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, From b857138d3bad1372618cb925963a9e1fb512fd8e Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Wed, 26 Oct 2022 02:41:34 -0700 Subject: [PATCH 2/2] Update src/librustdoc/html/static/css/rustdoc.css Co-authored-by: Jacob Hoffman-Andrews --- src/librustdoc/html/static/css/rustdoc.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 84a1fa2e28ece..8424b2c4e2932 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1586,8 +1586,9 @@ details.rustdoc-toggle > summary:hover::before { } details.rustdoc-toggle > summary:focus-visible::before { - /* The SVG is black, and gets turned white using a filter. + /* 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;