bjoernager/rust
bjoernager/rust
1
Fork 0
Code Activity

rustdoc: use <details> tag for the source code sidebar

Browse source 
This fixes the extremely poor accessibility of the old system, making it
possible to navigate the sidebar by keyboard, and also implicitly gives the
sidebar items the correct ARIA roles.
This commit is contained in:
Michael Howell 2022-07-01 10:33:06 -07:00
parent 5b9775fe17
commit 2852443f48
7 changed files with 54 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/librustdoc/html/static/css/rustdoc.css
View file

@ -1528,37 +1528,18 @@ kbd {
margin-bottom: 1em; margin-bottom: 1em;
} }
div.children { details.dir-entry > summary {
padding-left: 27px; margin: 0 0 0 13px;
display: none; list-style-position: outside;
}
div.name {
cursor: pointer; cursor: pointer;
position: relative;
margin-left: 16px;
} }
div.files > a {
details.dir-entry div.folders, details.dir-entry div.files {
padding-left: 27px;
}
details.dir-entry a {
display: block; display: block;
padding: 0 3px;
}
div.files > a:hover, div.name:hover {
background-color: #a14b4b;
}
div.name.expand + .children {
display: block;
}
div.name::before {
content: "\25B6";
padding-left: 4px;
font-size: 0.625rem;
position: absolute;
left: -16px;
top: 4px;
}
div.name.expand::before {
transform: rotate(90deg);
left: -15px;
top: 2px;
} }
/* The hideme class is used on summary tags that contain a span with /* The hideme class is used on summary tags that contain a span with

3
src/librustdoc/html/static/css/themes/ayu.css
View file

@ -630,7 +630,8 @@ kbd {
color: #fff; color: #fff;
border-bottom-color: #5c6773; border-bottom-color: #5c6773;
} }
#source-sidebar div.files > a:hover, div.name:hover { #source-sidebar div.files > a:hover, details.dir-entry summary:hover,
#source-sidebar div.files > a:focus, details.dir-entry summary:focus {
background-color: #14191f; background-color: #14191f;
color: #ffb44c; color: #ffb44c;
} }

3
src/librustdoc/html/static/css/themes/dark.css
View file

@ -500,7 +500,8 @@ kbd {
#source-sidebar > .title { #source-sidebar > .title {
border-bottom-color: #ccc; border-bottom-color: #ccc;
} }
#source-sidebar div.files > a:hover, div.name:hover { #source-sidebar div.files > a:hover, details.dir-entry summary:hover,
#source-sidebar div.files > a:focus, details.dir-entry summary:focus {
background-color: #444; background-color: #444;
} }
#source-sidebar div.files > .selected { #source-sidebar div.files > .selected {

3
src/librustdoc/html/static/css/themes/light.css
View file

@ -484,7 +484,8 @@ kbd {
#source-sidebar > .title { #source-sidebar > .title {
border-bottom-color: #ccc; border-bottom-color: #ccc;
} }
#source-sidebar div.files > a:hover, div.name:hover { #source-sidebar div.files > a:hover, details.dir-entry summary:hover,
#source-sidebar div.files > a:focus, details.dir-entry summary:focus {
background-color: #E0E0E0; background-color: #E0E0E0;
} }
#source-sidebar div.files > .selected { #source-sidebar div.files > .selected {

29
src/librustdoc/html/static/js/source-script.js
View file

@ -13,33 +13,27 @@ const rootPath = document.getElementById("rustdoc-vars").attributes["data-root-p
let oldScrollPosition = 0; let oldScrollPosition = 0;
function createDirEntry(elem, parent, fullPath, hasFoundFile) { function createDirEntry(elem, parent, fullPath, hasFoundFile) {
const name = document.createElement("div"); const dirEntry = document.createElement("details");
name.className = "name"; const summary = document.createElement("summary");
dirEntry.className = "dir-entry";
fullPath += elem["name"] + "/"; fullPath += elem["name"] + "/";
name.onclick = ev => { summary.innerText = elem["name"];
if (hasClass(ev.target, "expand")) { dirEntry.appendChild(summary);
removeClass(ev.target, "expand");
} else {
addClass(ev.target, "expand");
}
};
name.innerText = elem["name"];
const children = document.createElement("div");
children.className = "children";
const folders = document.createElement("div"); const folders = document.createElement("div");
folders.className = "folders"; folders.className = "folders";
if (elem.dirs) { if (elem.dirs) {
for (const dir of elem.dirs) { for (const dir of elem.dirs) {
if (createDirEntry(dir, folders, fullPath, hasFoundFile)) { if (createDirEntry(dir, folders, fullPath, hasFoundFile)) {
addClass(name, "expand"); dirEntry.open = true;
hasFoundFile = true; hasFoundFile = true;
} }
} }
} }
children.appendChild(folders); dirEntry.appendChild(folders);
const files = document.createElement("div"); const files = document.createElement("div");
files.className = "files"; files.className = "files";
@ -51,15 +45,14 @@ function createDirEntry(elem, parent, fullPath, hasFoundFile) {
const w = window.location.href.split("#")[0]; const w = window.location.href.split("#")[0];
if (!hasFoundFile && w === file.href) { if (!hasFoundFile && w === file.href) {
file.className = "selected"; file.className = "selected";
addClass(name, "expand"); dirEntry.open = true;
hasFoundFile = true; hasFoundFile = true;
} }
files.appendChild(file); files.appendChild(file);
} }
} }
children.appendChild(files); dirEntry.appendChild(files);
parent.appendChild(name); parent.appendChild(dirEntry);
parent.appendChild(children);
return hasFoundFile; return hasFoundFile;
} }

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

@ -27,29 +27,29 @@ reload:
// Waiting for the sidebar to be displayed... // Waiting for the sidebar to be displayed...
wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1}) wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
assert-css: ( assert-css: (
"#source-sidebar .expand + .children a.selected", "#source-sidebar details[open] > .files a.selected",
{"color": "rgb(0, 0, 0)", "background-color": "rgb(255, 255, 255)"}, {"color": "rgb(0, 0, 0)", "background-color": "rgb(255, 255, 255)"},
) )
// Without hover. // Without hover.
assert-css: ( assert-css: (
"#source-sidebar .expand + .children > .files a:not(.selected)", "#source-sidebar details[open] > .files a:not(.selected)",
{"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"}, {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
) )
// With hover. // With hover.
move-cursor-to: "#source-sidebar .expand + .children > .files a:not(.selected)" move-cursor-to: "#source-sidebar details[open] > .files a:not(.selected)"
assert-css: ( assert-css: (
"#source-sidebar .expand + .children > .files a:not(.selected)", "#source-sidebar details[open] > .files a:not(.selected)",
{"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"}, {"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
) )
// Without hover. // Without hover.
assert-css: ( assert-css: (
"#source-sidebar .expand + .children .folders .name", "#source-sidebar details[open] > .folders > details > summary",
{"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"}, {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
) )
// With hover. // With hover.
move-cursor-to: "#source-sidebar .expand + .children .folders .name" move-cursor-to: "#source-sidebar details[open] > .folders > details > summary"
assert-css: ( assert-css: (
"#source-sidebar .expand + .children .folders .name", "#source-sidebar details[open] > .folders > details > summary",
{"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"}, {"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
) )
@ -59,29 +59,29 @@ reload:
// Waiting for the sidebar to be displayed... // Waiting for the sidebar to be displayed...
wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1}) wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
assert-css: ( assert-css: (
"#source-sidebar .expand + .children a.selected", "#source-sidebar details[open] > .files > a.selected",
{"color": "rgb(221, 221, 221)", "background-color": "rgb(51, 51, 51)"}, {"color": "rgb(221, 221, 221)", "background-color": "rgb(51, 51, 51)"},
) )
// Without hover. // Without hover.
assert-css: ( assert-css: (
"#source-sidebar .expand + .children > .files a:not(.selected)", "#source-sidebar details[open] > .files > a:not(.selected)",
{"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"}, {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
) )
// With hover. // With hover.
move-cursor-to: "#source-sidebar .expand + .children > .files a:not(.selected)" move-cursor-to: "#source-sidebar details[open] > .files a:not(.selected)"
assert-css: ( assert-css: (
"#source-sidebar .expand + .children > .files a:not(.selected)", "#source-sidebar details[open] > .files a:not(.selected)",
{"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"}, {"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
) )
// Without hover. // Without hover.
assert-css: ( assert-css: (
"#source-sidebar .expand + .children .folders .name", "#source-sidebar details[open] > .folders > details > summary",
{"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"}, {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
) )
// With hover. // With hover.
move-cursor-to: "#source-sidebar .expand + .children .folders .name" move-cursor-to: "#source-sidebar details[open] > .folders > details > summary"
assert-css: ( assert-css: (
"#source-sidebar .expand + .children .folders .name", "#source-sidebar details[open] > .folders > details > summary",
{"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"}, {"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
) )
@ -91,29 +91,29 @@ reload:
// Waiting for the sidebar to be displayed... // Waiting for the sidebar to be displayed...
wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1}) wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
assert-css: ( assert-css: (
"#source-sidebar .expand + .children a.selected", "#source-sidebar details[open] > .files a.selected",
{"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"}, {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
) )
// Without hover. // Without hover.
assert-css: ( assert-css: (
"#source-sidebar .expand + .children > .files a:not(.selected)", "#source-sidebar details[open] > .files a:not(.selected)",
{"color": "rgb(197, 197, 197)", "background-color": "rgba(0, 0, 0, 0)"}, {"color": "rgb(197, 197, 197)", "background-color": "rgba(0, 0, 0, 0)"},
) )
// With hover. // With hover.
move-cursor-to: "#source-sidebar .expand + .children > .files a:not(.selected)" move-cursor-to: "#source-sidebar details[open] > .files a:not(.selected)"
assert-css: ( assert-css: (
"#source-sidebar .expand + .children > .files a:not(.selected)", "#source-sidebar details[open] > .files a:not(.selected)",
{"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"}, {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
) )
// Without hover. // Without hover.
assert-css: ( assert-css: (
"#source-sidebar .expand + .children .folders .name", "#source-sidebar details[open] > .folders > details > summary",
{"color": "rgb(197, 197, 197)", "background-color": "rgba(0, 0, 0, 0)"}, {"color": "rgb(197, 197, 197)", "background-color": "rgba(0, 0, 0, 0)"},
) )
// With hover. // With hover.
move-cursor-to: "#source-sidebar .expand + .children .folders .name" move-cursor-to: "#source-sidebar details[open] > .folders > details > summary"
assert-css: ( assert-css: (
"#source-sidebar .expand + .children .folders .name", "#source-sidebar details[open] > .folders > details > summary",
{"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"}, {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
) )

20
src/test/rustdoc-gui/source-code-page.goml
View file

@ -34,19 +34,13 @@ assert-document-property: ({"URL": "/lib.rs.html"}, ENDS_WITH)
click: "#sidebar-toggle" click: "#sidebar-toggle"
assert: ".source-sidebar-expanded" assert: ".source-sidebar-expanded"
// We check that the first entry of the sidebar is collapsed (which, for whatever reason, // We check that the first entry of the sidebar is collapsed
// is number 2 and not 1...). assert-property: ("#source-sidebar details:first-of-type", {"open": "false"})
assert-attribute: ("#source-sidebar .name:nth-child(2)", {"class": "name"}) assert-text: ("#source-sidebar details:first-of-type > summary", "implementors")
assert-text: ("#source-sidebar .name:nth-child(2)", "implementors")
// We also check its children are hidden too.
assert-css: ("#source-sidebar .name:nth-child(2) + .children", {"display": "none"})
// We now click on it. // We now click on it.
click: "#source-sidebar .name:nth-child(2)" click: "#source-sidebar details:first-of-type > summary"
assert-attribute: ("#source-sidebar .name:nth-child(2)", {"class": "name expand"}) assert-property: ("#source-sidebar details:first-of-type", {"open": "true"})
// Checking that its children are displayed as well.
assert-css: ("#source-sidebar .name:nth-child(2) + .children", {"display": "block"})
// And now we collapse it again. // And now we collapse it again.
click: "#source-sidebar .name:nth-child(2)" click: "#source-sidebar details:first-of-type > summary"
assert-attribute: ("#source-sidebar .name:nth-child(2)", {"class": "name"}) assert-property: ("#source-sidebar details:first-of-type", {"open": "false"})
assert-css: ("#source-sidebar .name:nth-child(2) + .children", {"display": "none"})