From b968ef8d198046bce1c77381a8069d2f837a2455 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Mon, 26 May 2025 15:04:48 +0200 Subject: [PATCH] Make macro expansion feature buttons accessible --- src/librustdoc/html/highlight.rs | 7 +++- src/librustdoc/html/static/css/rustdoc.css | 14 +++---- tests/rustdoc-gui/macro-expansion.goml | 49 +++++++++++++++++++--- 3 files changed, 55 insertions(+), 15 deletions(-) diff --git a/src/librustdoc/html/highlight.rs b/src/librustdoc/html/highlight.rs index 5a25d659b0ff..40530f67d6ec 100644 --- a/src/librustdoc/html/highlight.rs +++ b/src/librustdoc/html/highlight.rs @@ -332,8 +332,11 @@ fn get_expansion<'a, W: Write>( Cow::Owned(format!( "{closing}\ \ - \ - {reopening}", + {reopening}", )), Some(Class::Expansion), )); diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 0b7a8abdf090..86f1a42bc014 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -961,10 +961,10 @@ rustdoc-topbar { display: inline; } .example-wrap .expansion > input { - display: none; -} -.example-wrap .expansion > label { + display: block; position: absolute; + appearance: none; + content: '↕'; left: -20px; top: 0; border: 1px solid var(--border-color); @@ -973,11 +973,9 @@ rustdoc-topbar { color: var(--main-color); padding: 0 2px; line-height: 20px; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - +} +.example-wrap .expansion > input::after { + content: "↕"; } .example-wrap .expansion .expanded { display: none; diff --git a/tests/rustdoc-gui/macro-expansion.goml b/tests/rustdoc-gui/macro-expansion.goml index c398c58adacf..5e9a30494052 100644 --- a/tests/rustdoc-gui/macro-expansion.goml +++ b/tests/rustdoc-gui/macro-expansion.goml @@ -12,14 +12,14 @@ define-function: ( assert-css: ("a[id='" + |line| + "'] + .expansion .expanded", {"display": "none"}) // We "expand" the macro. - click: "a[id='" + |line| + "'] + .expansion label" + click: "a[id='" + |line| + "'] + .expansion input[type=checkbox]" // The "original" content is hidden. assert-css: ("a[id='" + |line| + "'] + .expansion .original", {"display": "none"}) // The expanded macro is visible. assert-css: ("a[id='" + |line| + "'] + .expansion .expanded", {"display": "inline"}) // We collapse the macro. - click: "a[id='" + |line| + "'] + .expansion label" + click: "a[id='" + |line| + "'] + .expansion input[type=checkbox]" // The "original" content is expanded. assert-css: ("a[id='" + |line| + "'] + .expansion .original", {"display": "inline"}) // The expanded macro is hidden. @@ -31,7 +31,7 @@ define-function: ( call-function: ("check-expansion", {"line": 33, "original_content": "Debug"}) // Then we check the `bar` macro expansion at line 41. call-function: ("check-expansion", {"line": 41, "original_content": "bar!(y)"}) -// Then we check the `println` macro expansion at line 23-25. +// Then we check the `println` macro expansion at line 42-44. call-function: ("check-expansion", {"line": 42, "original_content": 'println!(" 43 {y} 44 ")'}) @@ -56,7 +56,7 @@ assert-css: ('//*[@id="expand-50"]' + |repeat_e| + |repeat_e|, {"display": "none // We "expand" the macro (because the line starts with a string, the label is not at the "top // level" of the ``, so we need to use a different selector). -click: ".expansion label[for='expand-50']" +click: "#expand-50" // The "original" content is hidden. assert-css: ('//*[@id="expand-50"]' + |repeat_o|, {"display": "none"}) assert-css: ('//*[@id="expand-50"]' + |repeat_o| + |repeat_o|, {"display": "none"}) @@ -65,10 +65,49 @@ assert-css: ('//*[@id="expand-50"]' + |repeat_e|, {"display": "inline"}) assert-css: ('//*[@id="expand-50"]' + |repeat_e| + |repeat_e|, {"display": "inline"}) // We collapse the macro. -click: ".expansion label[for='expand-50']" +click: "#expand-50" // The "original" content is expanded. assert-css: ('//*[@id="expand-50"]' + |repeat_o|, {"display": "inline"}) assert-css: ('//*[@id="expand-50"]' + |repeat_o| + |repeat_o|, {"display": "inline"}) // The expanded macro is hidden. assert-css: ('//*[@id="expand-50"]' + |repeat_e|, {"display": "none"}) assert-css: ('//*[@id="expand-50"]' + |repeat_e| + |repeat_e|, {"display": "none"}) + +// Checking the line 46 `println` which needs to be handled differently because the line number is +// inside a "comment" span. +assert-text: ("#expand-46 ~ .original", 'println!(" +47 {y} +48 ")') +// The "original" content should be expanded. +assert-css: ("#expand-46 ~ .original", {"display": "inline"}) +// The expanded macro should be hidden. +assert-css: ("#expand-46 ~ .expanded", {"display": "none"}) + +// We "expand" the macro. +click: "#expand-46" +// The "original" content is hidden. +assert-css: ("#expand-46 ~ .original", {"display": "none"}) +// The expanded macro is visible. +assert-css: ("#expand-46 ~ .expanded", {"display": "inline"}) + +// We collapse the macro. +click: "#expand-46" +// The "original" content is expanded. +assert-css: ("#expand-46 ~ .original", {"display": "inline"}) +// The expanded macro is hidden. +assert-css: ("#expand-46 ~ .expanded", {"display": "none"}) + +// Ensure that the toggles are focusable and can be interacted with keyboard. +focus: "//a[@id='27']" +press-key: "Tab" +assert: "#expand-27:focus" +assert-css: ("#expand-27 ~ .expanded", {"display": "none"}) +assert-css: ("#expand-27 ~ .original", {"display": "inline"}) +// We now expand the macro. +press-key: "Space" +assert-css: ("#expand-27 ~ .expanded", {"display": "inline"}) +assert-css: ("#expand-27 ~ .original", {"display": "none"}) +// We collapse the macro. +press-key: "Space" +assert-css: ("#expand-27 ~ .expanded", {"display": "none"}) +assert-css: ("#expand-27 ~ .original", {"display": "inline"})