From b4032e7e3d8f7b7d434cd097a7f2aabfb03dfc82 Mon Sep 17 00:00:00 2001
From: Hugo van Kemenade <hugovk@users.noreply.github.com>
Date: Sat, 18 Jun 2022 21:07:06 +0300
Subject: [PATCH] Infra: Make colour theme cycler button accessible (#2619)

---
 pep_sphinx_extensions/pep_theme/static/style.css   | 14 +++++++++++++-
 .../pep_theme/templates/page.html                  |  7 ++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css
index d10273251..598ea46b0 100644
--- 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
index c1a401405..30f7b5895 100644
--- a/pep_sphinx_extensions/pep_theme/templates/page.html
+++ b/pep_sphinx_extensions/pep_theme/templates/page.html
@@ -31,9 +31,10 @@
                 <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>