rustdoc: make source sidebar toggle a real button

This fixes tab focus, so that you can open and close the sidebar
from keyboard.
This commit is contained in:
Michael Howell 2022-07-01 11:05:38 -07:00
parent 0075bb4fad
commit c147c0daa3
2 changed files with 21 additions and 6 deletions

View File

@ -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;

View File

@ -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;