Skip to content
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

Rustdoc accessibility: use an icon for the [-]/[+] controls #87207

Closed
wants to merge 3 commits into from
Closed

Rustdoc accessibility: use an icon for the [-]/[+] controls #87207

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d8282d1
Rustdoc accessibility: use an icon for the [-]/[+] controls
notriddle Jul 17, 2021
add535d
Pull the "Expand" / "Collapse" text to the end of the line, instead o…
notriddle Jul 17, 2021
887526c
Use empty string instead of single space
notriddle Jul 17, 2021
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
24 changes: 17 additions & 7 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 @@ -1489,24 +1489,29 @@ details.rustdoc-toggle > summary.hideme > span {
}

details.rustdoc-toggle > summary::before {
content: "Expand";
font-weight: 300;
font-size: 0.8em;
letter-spacing: 1px;
content: " ";
notriddle marked this conversation as resolved.
Show resolved Hide resolved
cursor: pointer;
width: 17px;
height: max(17px, 1.1em);
background: data-url(plus-17x17.png) no-repeat top left;
Copy link
Member

Choose a reason for hiding this comment

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

Why not simply using the image directly instead of going through a data-url?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Right now, the CSS file never links to images. This is probably because the images have version numbers (plus.png becomes plus1.55.0.png), so it would require patching the style sheet either way.

Copy link
Member

Choose a reason for hiding this comment

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

Ah right, my PR doing that hasn't been merged yet. Take a look at how I did: https://github.com/rust-lang/rust/pull/86892/files#diff-39d31d43319757bdd745b6b58f1d8593af4d28454f8ad0259b802bd776898e58R178-R203

That will allow you to simply add the background url from the rust side directly.

display: inline-block;
vertical-align: middle;
opacity: .5;
text-indent: 17px;
}

/* Screen readers see the text version at the end the line.
Visual readers see the icon at the start of the line, but small and transparent. */
details.rustdoc-toggle > summary::after {
content: "Expand";
overflow: hidden;
width: 0;
height: 0;
position: absolute;
}

details.rustdoc-toggle > summary.hideme::before {
details.rustdoc-toggle > summary.hideme::after {
/* "hideme" toggles already have a description when they're contracted */
content: " ";
content: "";
}

details.rustdoc-toggle > summary:focus::before {
Expand Down Expand Up @@ -1569,6 +1574,11 @@ details.rustdoc-toggle[open] > summary.hideme::before {
height: max(17px, 1.1em);
background: data-url(minus-17x17.png) no-repeat top left;
display: inline-block;
content: " ";
}

details.rustdoc-toggle[open] > summary::after,
details.rustdoc-toggle[open] > summary.hideme::after {
content: "Collapse";
}

Expand Down