From 2c7c22f94dc51b8b48a1590ba6d6d4b28fdcab82 Mon Sep 17 00:00:00 2001 From: Florian Perucki 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 %}