Skip to content

Commit c147c0d

Browse files
committed
rustdoc: make source sidebar toggle a real button
This fixes tab focus, so that you can open and close the sidebar from keyboard.
1 parent 0075bb4 commit c147c0d

File tree

2 files changed

+21
-6
lines changed

2 files changed

+21
-6
lines changed

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

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -418,7 +418,7 @@ nav.sub {
418418
background-color: var(--sidebar-background-color);
419419
}
420420

421-
#sidebar-toggle:hover {
421+
#sidebar-toggle:hover, #sidebar-toggle > button:focus {
422422
background-color: var(--sidebar-background-color-hover);
423423
}
424424

@@ -1401,7 +1401,6 @@ pre.rust {
14011401
position: sticky;
14021402
top: 0;
14031403
left: 0;
1404-
cursor: pointer;
14051404
font-weight: bold;
14061405
font-size: 1.25rem;
14071406
border-bottom: 1px solid;
@@ -1422,7 +1421,23 @@ pre.rust {
14221421
border-bottom: 1px solid;
14231422
margin-bottom: 6px;
14241423
}
1425-
1424+
#sidebar-toggle > button {
1425+
background: none;
1426+
color: inherit;
1427+
cursor: pointer;
1428+
text-align: center;
1429+
border: none;
1430+
outline: none;
1431+
position: absolute;
1432+
top: 0;
1433+
bottom: 0;
1434+
left: 0;
1435+
right: 0;
1436+
width: 100%;
1437+
/* iOS button gradient: https://stackoverflow.com/q/5438567 */
1438+
-webkit-appearance: none;
1439+
opacity: 1;
1440+
}
14261441
#settings-menu, #help-button {
14271442
margin-left: 4px;
14281443
outline: none;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ function createDirEntry(elem, parent, fullPath, hasFoundFile) {
6464
}
6565

6666
function toggleSidebar() {
67-
const child = this.children[0];
67+
const child = this.parentNode.children[0];
6868
if (child.innerText === ">") {
6969
if (window.innerWidth < 701) {
7070
// This is to keep the scroll position on mobile.
@@ -93,15 +93,15 @@ function toggleSidebar() {
9393
function createSidebarToggle() {
9494
const sidebarToggle = document.createElement("div");
9595
sidebarToggle.id = "sidebar-toggle";
96-
sidebarToggle.onclick = toggleSidebar;
9796

98-
const inner = document.createElement("div");
97+
const inner = document.createElement("button");
9998

10099
if (getCurrentValue("source-sidebar-show") === "true") {
101100
inner.innerText = "<";
102101
} else {
103102
inner.innerText = ">";
104103
}
104+
inner.onclick = toggleSidebar;
105105

106106
sidebarToggle.appendChild(inner);
107107
return sidebarToggle;

0 commit comments

Comments
 (0)