rustdoc: make source sidebar toggle a real button

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

Author: notriddle

src/librustdoc/html/static/css/rustdoc.css

@@ -1370,7 +1370,6 @@ pre.rust {
 	position: sticky;
 	top: 0;
 	left: 0;
-	cursor: pointer;
 	font-weight: bold;
 	font-size: 1.25rem;
 	border-bottom: 1px solid;
@@ -1391,7 +1390,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;

src/librustdoc/html/static/css/themes/ayu.css

@@ -620,7 +620,7 @@ kbd {
 #sidebar-toggle {
 	background-color: #14191f;
 }
-#sidebar-toggle:hover {
+#sidebar-toggle:hover, #sidebar-toggle > button:focus {
 	background-color: rgba(70, 70, 70, 0.33);
 }
 #source-sidebar {

src/librustdoc/html/static/css/themes/dark.css

@@ -491,7 +491,7 @@ kbd {
 #sidebar-toggle {
 	background-color: #565656;
 }
-#sidebar-toggle:hover {
+#sidebar-toggle:hover, #sidebar-toggle > button:focus {
 	background-color: #676767;
 }
 #source-sidebar {

src/librustdoc/html/static/css/themes/light.css

@@ -475,7 +475,7 @@ kbd {
 #sidebar-toggle {
 	background-color: #F5F5F5;
 }
-#sidebar-toggle:hover {
+#sidebar-toggle:hover, #sidebar-toggle > button:focus {
 	background-color: #E0E0E0;
 }
 #source-sidebar {

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 < window.RUSTDOC_MOBILE_BREAKPOINT) {
             // This is to keep the scroll position on mobile.
@@ -107,15 +107,15 @@ window.addEventListener("resize", () => {
 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;