From cdd3371bb4fceb9931be48700f5a70de7819df7c Mon Sep 17 00:00:00 2001 From: zopsicle <50083900+zopsicle@users.noreply.github.com> Date: Thu, 26 Sep 2024 01:44:06 +0200 Subject: [PATCH 1/2] rustdoc: do not animate when user prefers reduced motion This accessibility improvement gates the target flashing and tooltip fade-out behind an inverted prefers-reduced-motion media query. --- src/librustdoc/html/static/css/rustdoc.css | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index ae9727a4d4f57..61e32aa5d3097 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1687,7 +1687,12 @@ instead, we check that it's not a "finger" cursor. padding-right: 3px; background-color: var(--target-background-color); border-right: 3px solid var(--target-border-color); - animation: 0.65s cubic-bezier(0, 0, 0.1, 1.0) 0.1s targetfadein; +} + +@media not (prefers-reduced-motion) { + :target { + animation: 0.65s cubic-bezier(0, 0, 0.1, 1.0) 0.1s targetfadein; + } } .code-header a.tooltip { @@ -1712,12 +1717,14 @@ a.tooltip:hover::after { content: "\00a0"; } -/* This animation is layered onto the mistake-proofing delay for dismissing - a hovered tooltip, to ensure it feels responsive even with the delay. - */ -.fade-out { - opacity: 0; - transition: opacity 0.45s cubic-bezier(0, 0, 0.1, 1.0); +@media not (prefers-reduced-motion) { + /* This animation is layered onto the mistake-proofing delay for dismissing + a hovered tooltip, to ensure it feels responsive even with the delay. + */ + .fade-out { + opacity: 0; + transition: opacity 0.45s cubic-bezier(0, 0, 0.1, 1.0); + } } .popover.tooltip .content { From 5b5848188d4b3e0652267d56d8e0ec8de34eaa89 Mon Sep 17 00:00:00 2001 From: zopsicle Date: Thu, 26 Sep 2024 23:59:13 +0200 Subject: [PATCH 2/2] rustdoc: consolidate prefers-reduced-motion-gated rulesets --- src/librustdoc/html/static/css/rustdoc.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 61e32aa5d3097..40391b1b4dfee 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1689,12 +1689,6 @@ instead, we check that it's not a "finger" cursor. border-right: 3px solid var(--target-border-color); } -@media not (prefers-reduced-motion) { - :target { - animation: 0.65s cubic-bezier(0, 0, 0.1, 1.0) 0.1s targetfadein; - } -} - .code-header a.tooltip { color: inherit; margin-right: 15px; @@ -1718,6 +1712,10 @@ a.tooltip:hover::after { } @media not (prefers-reduced-motion) { + :target { + animation: 0.65s cubic-bezier(0, 0, 0.1, 1.0) 0.1s targetfadein; + } + /* This animation is layered onto the mistake-proofing delay for dismissing a hovered tooltip, to ensure it feels responsive even with the delay. */