From 2c7c22f94dc51b8b48a1590ba6d6d4b28fdcab82 Mon Sep 17 00:00:00 2001
From: Florian Perucki <florian.perucki@silvr.co>
Date: Fri, 23 Sep 2022 15:51:30 +0200
Subject: [PATCH] Fixed #34033 -- Improved accessibility of switch button for
 dark mode in the admin.

Bug in bc7aa2a5e91cf65fc7510edaf1776528c7ad07b4.

Thanks Thibaud Colas for the report and review.
---
 .../admin/static/admin/css/dark_mode.css      | 20 +++++++++++++++++++
 .../templates/admin/color_theme_toggle.html   | 11 ++++++----
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/django/contrib/admin/static/admin/css/dark_mode.css b/django/contrib/admin/static/admin/css/dark_mode.css
index 7407447398..b899a420d4 100644
--- a/django/contrib/admin/static/admin/css/dark_mode.css
+++ b/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,
diff --git a/django/contrib/admin/templates/admin/color_theme_toggle.html b/django/contrib/admin/templates/admin/color_theme_toggle.html
index 8df59f58b0..f5a326d501 100644
--- a/django/contrib/admin/templates/admin/color_theme_toggle.html
+++ b/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>
-  <svg class="theme-icon-when-auto">
+  <div class="visually-hidden theme-label-when-auto">{% translate 'Toggle theme (current theme: auto)' %}</div>
+  <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>