From c147c0daa3ad30072dcf6c502334d69547281800 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Fri, 1 Jul 2022 11:05:38 -0700 Subject: [PATCH 1/4] rustdoc: make source sidebar toggle a real button This fixes tab focus, so that you can open and close the sidebar from keyboard. --- src/librustdoc/html/static/css/rustdoc.css | 21 ++++++++++++++++--- .../html/static/js/source-script.js | 6 +++--- 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index f7b4fdb736c50..07ab18d9ade31 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -418,7 +418,7 @@ nav.sub { background-color: var(--sidebar-background-color); } -#sidebar-toggle:hover { +#sidebar-toggle:hover, #sidebar-toggle > button:focus { background-color: var(--sidebar-background-color-hover); } @@ -1401,7 +1401,6 @@ pre.rust { position: sticky; top: 0; left: 0; - cursor: pointer; font-weight: bold; font-size: 1.25rem; border-bottom: 1px solid; @@ -1422,7 +1421,23 @@ pre.rust { border-bottom: 1px solid; margin-bottom: 6px; } - +#sidebar-toggle > button { + background: none; + color: inherit; + cursor: pointer; + text-align: center; + border: none; + outline: none; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + /* iOS button gradient: https://stackoverflow.com/q/5438567 */ + -webkit-appearance: none; + opacity: 1; +} #settings-menu, #help-button { margin-left: 4px; outline: none; diff --git a/src/librustdoc/html/static/js/source-script.js b/src/librustdoc/html/static/js/source-script.js index acb1d8d7b5c8d..10b07335ed076 100644 --- a/src/librustdoc/html/static/js/source-script.js +++ b/src/librustdoc/html/static/js/source-script.js @@ -64,7 +64,7 @@ function createDirEntry(elem, parent, fullPath, hasFoundFile) { } function toggleSidebar() { - const child = this.children[0]; + const child = this.parentNode.children[0]; if (child.innerText === ">") { if (window.innerWidth < 701) { // This is to keep the scroll position on mobile. @@ -93,15 +93,15 @@ function toggleSidebar() { function createSidebarToggle() { const sidebarToggle = document.createElement("div"); sidebarToggle.id = "sidebar-toggle"; - sidebarToggle.onclick = toggleSidebar; - const inner = document.createElement("div"); + const inner = document.createElement("button"); if (getCurrentValue("source-sidebar-show") === "true") { inner.innerText = "<"; } else { inner.innerText = ">"; } + inner.onclick = toggleSidebar; sidebarToggle.appendChild(inner); return sidebarToggle; From a7c0c9f2bbea6eb0597590fb266c822f01700793 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Fri, 1 Jul 2022 14:56:56 -0700 Subject: [PATCH 2/4] rustdoc: add explanatory comment to `width: 100%` line --- src/librustdoc/html/static/css/rustdoc.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 07ab18d9ade31..132650d9381a3 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1433,6 +1433,7 @@ pre.rust { bottom: 0; left: 0; right: 0; + /* work around button layout strangeness: https://stackoverflow.com/q/7271561 */ width: 100%; /* iOS button gradient: https://stackoverflow.com/q/5438567 */ -webkit-appearance: none; From 26dccbf4cfca9bba81b72a0ccc49570c62f48737 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Fri, 1 Jul 2022 15:14:49 -0700 Subject: [PATCH 3/4] rustdoc: add test case for background color of the sidebar toggle button --- src/librustdoc/html/static/css/rustdoc.css | 2 +- .../sidebar-source-code-display.goml | 27 +++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 132650d9381a3..98ed222b4b1a3 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -418,7 +418,7 @@ nav.sub { background-color: var(--sidebar-background-color); } -#sidebar-toggle:hover, #sidebar-toggle > button:focus { +#sidebar-toggle > button:hover:hover, #sidebar-toggle > button:focus { background-color: var(--sidebar-background-color-hover); } diff --git a/src/test/rustdoc-gui/sidebar-source-code-display.goml b/src/test/rustdoc-gui/sidebar-source-code-display.goml index c441f84a82135..daffebf8f51f8 100644 --- a/src/test/rustdoc-gui/sidebar-source-code-display.goml +++ b/src/test/rustdoc-gui/sidebar-source-code-display.goml @@ -30,6 +30,15 @@ assert-css: ( "#source-sidebar .expand + .children a.selected", {"color": "rgb(0, 0, 0)", "background-color": "rgb(255, 255, 255)"}, ) +// Without hover or focus. +assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(0, 0, 0, 0)"}) +// With focus. +focus: "#sidebar-toggle > button" +assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(224, 224, 224)"}) +focus: ".search-input" +// With hover. +move-cursor-to: "#sidebar-toggle > button" +assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(224, 224, 224)"}) // Without hover. assert-css: ( "#source-sidebar .expand + .children > .files a:not(.selected)", @@ -62,6 +71,15 @@ assert-css: ( "#source-sidebar .expand + .children a.selected", {"color": "rgb(221, 221, 221)", "background-color": "rgb(51, 51, 51)"}, ) +// Without hover or focus. +assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(0, 0, 0, 0)"}) +// With focus. +focus: "#sidebar-toggle > button" +assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(103, 103, 103)"}) +focus: ".search-input" +// With hover. +move-cursor-to: "#sidebar-toggle > button" +assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(103, 103, 103)"}) // Without hover. assert-css: ( "#source-sidebar .expand + .children > .files a:not(.selected)", @@ -94,6 +112,15 @@ assert-css: ( "#source-sidebar .expand + .children a.selected", {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"}, ) +// Without hover or focus. +assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(0, 0, 0, 0)"}) +// With focus. +focus: "#sidebar-toggle > button" +assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(70, 70, 70, 0.33)"}) +focus: ".search-input" +// With hover. +move-cursor-to: "#sidebar-toggle > button" +assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(70, 70, 70, 0.33)"}) // Without hover. assert-css: ( "#source-sidebar .expand + .children > .files a:not(.selected)", From 9938d56d8cefb09584f6b75136ecb22a3d3dd759 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Sun, 3 Jul 2022 11:42:44 -0700 Subject: [PATCH 4/4] Remove redundant pseudo-class --- src/librustdoc/html/static/css/rustdoc.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 98ed222b4b1a3..f4ec602535e40 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -418,7 +418,7 @@ nav.sub { background-color: var(--sidebar-background-color); } -#sidebar-toggle > button:hover:hover, #sidebar-toggle > button:focus { +#sidebar-toggle > button:hover, #sidebar-toggle > button:focus { background-color: var(--sidebar-background-color-hover); }