diff options
| author | Florian Perucki <florian.perucki@silvr.co> | 2022-09-23 15:51:30 +0200 |
|---|---|---|
| committer | Mariusz Felisiak <felisiak.mariusz@gmail.com> | 2022-09-24 14:26:54 +0100 |
| commit | 2c7c22f94dc51b8b48a1590ba6d6d4b28fdcab82 (patch) | |
| tree | 0e4621232c492020de6f8336feb00416a923e3eb | |
| parent | 0f31d10c7cf94318395f51d2613297acf1970e69 (diff) | |
Fixed #34033 -- Improved accessibility of switch button for dark mode in the admin.
Bug in bc7aa2a5e91cf65fc7510edaf1776528c7ad07b4.
Thanks Thibaud Colas for the report and review.
| -rw-r--r-- | django/contrib/admin/static/admin/css/dark_mode.css | 20 | ||||
| -rw-r--r-- | django/contrib/admin/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> |