Fixed #34033 -- Improved accessibility of switch button for dark mode in the admin.

Bug in bc7aa2a5e9.

Thanks Thibaud Colas for the report and review.

django/contrib/admin/static/admin/css/dark_mode.css

@@ -83,6 +83,26 @@ html[data-theme="dark"] {
     display: none;
 }
 
+/*
+Fully hide screen reader text so we only show the one matching the current
+theme.
+*/
+.theme-toggle .visually-hidden {
+    display: none;
+}
+
+html[data-theme="auto"] .theme-toggle .theme-label-when-auto {
+    display: block;
+}
+
+html[data-theme="dark"] .theme-toggle .theme-label-when-dark {
+    display: block;
+}
+
+html[data-theme="light"] .theme-toggle .theme-label-when-light {
+    display: block;
+}
+
 /* ICONS */
 .theme-toggle svg.theme-icon-when-auto,
 .theme-toggle svg.theme-icon-when-dark,

django/contrib/admin/templates/admin/color_theme_toggle.html

@@ -1,12 +1,15 @@
+{% load i18n %}
 <button class="theme-toggle">
-  <div class="visually-hidden">Toggle Light / Dark / Auto color theme</div>
+  <div class="visually-hidden theme-label-when-auto">{% translate 'Toggle theme (current theme: auto)' %}</div>
-  <svg class="theme-icon-when-auto">
+  <div class="visually-hidden theme-label-when-light">{% translate 'Toggle theme (current theme: light)' %}</div>
+  <div class="visually-hidden theme-label-when-dark">{% translate 'Toggle theme (current theme: dark)' %}</div>
+  <svg aria-hidden="true" class="theme-icon-when-auto">
     <use xlink:href="#icon-auto" />
   </svg>
-  <svg class="theme-icon-when-dark">
+  <svg aria-hidden="true" class="theme-icon-when-dark">
     <use xlink:href="#icon-moon" />
   </svg>
-  <svg class="theme-icon-when-light">
+  <svg aria-hidden="true" class="theme-icon-when-light">
     <use xlink:href="#icon-sun" />
   </svg>
 </button>