Skip to content

rustdoc: sidebar usability improvements #98772

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from
Closed

rustdoc: sidebar usability improvements #98772

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9d78242
Improve scroll locking in the rustdoc sidebars
notriddle Jul 1, 2022
f7c6061
Improve click behavior of the source code mobile full-screen "sidebar"
notriddle Jul 1, 2022
3073109
rustdoc: use <details> tag for the source code sidebar
notriddle Jul 1, 2022
6ca314e
rustdoc: make source sidebar toggle a real button
notriddle Jul 1, 2022
5594341
rustdoc cleanup: remove unused function
notriddle Jul 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
rustdoc: make source sidebar toggle a real button 
This fixes tab focus, so that you can open and close the sidebar
from keyboard.
  • Loading branch information
@notriddle
notriddle committed Jul 1, 2022
commit 6ca314e2a37ccfc938a1ee433cf7ca5d060192dd
19 changes: 17 additions & 2 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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%;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you need to set the width here? Also why all these changes?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The essential problem here is that the sidebar toggle element for the source code view is a <div>, rather than a <button>. That's bad, because it won't get reported correctly by accessibility tools, and will also not have a tab position, so you can't get at it with a keyboard.

Fixing that involves making it a <button>, but keeping the appearance the same means having to reset all the default button styles.

/* iOS button gradient: https://stackoverflow.com/q/5438567 */
-webkit-appearance: none;
opacity: 1;
}
#settings-menu, #help-button {
margin-left: 4px;
outline: none;
Expand Down
2 changes: 1 addition & 1 deletion src/librustdoc/html/static/css/themes/ayu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/librustdoc/html/static/css/themes/dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/librustdoc/html/static/css/themes/light.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
6 changes: 3 additions & 3 deletions src/librustdoc/html/static/js/source-script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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;
Expand Down