iSharkFly-Open
/
python-peps
mirror of https://github.com/python/peps.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Infra: Make colour theme cycler button accessible (#2619)

This commit is contained in:
Hugo van Kemenade 2022-06-18 21:07:06 +03:00 committed by GitHub
parent 2849a582b3
commit b4032e7e3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
pep_sphinx_extensions/pep_theme/static/style.css
View File

@ -2,7 +2,7 @@
/* Styles for PEPs */ /* Styles for PEPs */
/* /*
* `initial` works like undefined variables, so `var(intial, x)` will resolve to `x`. * `initial` works like undefined variables, so `var(initial, x)` will resolve to `x`.
* A space means an empty value, so `var( , x) y` will resolve to `y`. * A space means an empty value, so `var( , x) y` will resolve to `y`.
*/ */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -359,3 +359,15 @@ dl.footnote > dd {
.reference.external > strong { .reference.external > strong {
font-weight: normal; /* Fix strong links for :pep: and :rfc: roles */ font-weight: normal; /* Fix strong links for :pep: and :rfc: roles */
} }
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}

7
pep_sphinx_extensions/pep_theme/templates/page.html
View File

@ -31,9 +31,10 @@
<li>{{ title.split("–")[0].strip() }}</li> <li>{{ title.split("–")[0].strip() }}</li>
</ul> </ul>
<button id="colour-scheme-cycler" onClick="setColourScheme(nextColourScheme())"> <button id="colour-scheme-cycler" onClick="setColourScheme(nextColourScheme())">
<svg class="colour-scheme-icon-when-auto"><use href="#svg-sun-half"></use></svg> <svg aria-hidden="true" class="colour-scheme-icon-when-auto"><use href="#svg-sun-half"></use></svg>
<svg class="colour-scheme-icon-when-dark"><use href="#svg-moon"></use></svg> <svg aria-hidden="true" class="colour-scheme-icon-when-dark"><use href="#svg-moon"></use></svg>
<svg class="colour-scheme-icon-when-light"><use href="#svg-sun"></use></svg> <svg aria-hidden="true" class="colour-scheme-icon-when-light"><use href="#svg-sun"></use></svg>
<span class="visually-hidden">Toggle light / dark / auto colour theme</span>
</button> </button>
</header> </header>
<article> <article>