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

python · Jun 18, 2022 · b4032e7 · b4032e7
1 parent 2849a58
commit b4032e7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css
@@ -2,7 +2,7 @@
 /* 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`.
  */
 @media (prefers-color-scheme: dark) {
@@ -359,3 +359,15 @@ dl.footnote > dd {
 .reference.external > strong {
     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;
+}
diff --git a/pep_sphinx_extensions/pep_theme/templates/page.html b/pep_sphinx_extensions/pep_theme/templates/page.html
@@ -31,9 +31,10 @@ <h1>Python Enhancement Proposals</h1>
                 <li>{{ title.split("–")[0].strip() }}</li>
             </ul>
             <button id="colour-scheme-cycler" onClick="setColourScheme(nextColourScheme())">
-                <svg 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 class="colour-scheme-icon-when-light"><use href="#svg-sun"></use></svg>
+                <svg aria-hidden="true" class="colour-scheme-icon-when-auto"><use href="#svg-sun-half"></use></svg>
+                <svg aria-hidden="true" class="colour-scheme-icon-when-dark"><use href="#svg-moon"></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>
         </header>
         <article>