Rollup merge of #98774 - notriddle:notriddle/source-code-sidebar-button, r=GuillaumeGomez

rustdoc: make source sidebar toggle a real button

This fixes tab focus, so that you can open and close the sidebar from keyboard.

This should cause no visible change in appearance at all. The only way you'd know anything different is if you tried to use keyboard controls to open the source code file navigation sidebar.

Separated out from #98772

Author: matthiaskrgr

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: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,24 @@ 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;
+	/* work around button layout strangeness: https://stackoverflow.com/q/7271561 */
+	width: 100%;
+	/* iOS button gradient: https://stackoverflow.com/q/5438567 */
+	-webkit-appearance: none;
+	opacity: 1;
+}
 #settings-menu, #help-button {
 	margin-left: 4px;
 	outline: none;

src/librustdoc/html/static/js/source-script.js

@@ -57,7 +57,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.
@@ -86,15 +86,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;

src/test/rustdoc-gui/sidebar-source-code-display.goml

@@ -30,6 +30,15 @@ assert-css: (
     "#source-sidebar details[open] > .files 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 details[open] > .files a:not(.selected)",
@@ -76,6 +85,15 @@ assert-css: (
     "#source-sidebar details[open] > .files > 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 details[open] > .files > a:not(.selected)",
@@ -122,6 +140,15 @@ assert-css: (
     "#source-sidebar details[open] > .files 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 details[open] > .files a:not(.selected)",