From 2eaee6557c60d1794a65f2773d9fa63029d9d6f3 Mon Sep 17 00:00:00 2001 From: Almost-Senseless-Coder <109462027+Almost-Senseless-Coder@users.noreply.github.com> Date: Wed, 4 Oct 2023 12:41:31 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90=20fix(theme-switcher):=20properly?= =?UTF-8?q?=20translate=20aria-label=20(#192)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Tim Böttcher Co-authored-by: welpo --- static/js/themeSwitcher.js | 1 - static/js/themeSwitcher.min.js | 2 +- templates/partials/theme_switcher.html | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/static/js/themeSwitcher.js b/static/js/themeSwitcher.js index 608a6a9..0cff465 100644 --- a/static/js/themeSwitcher.js +++ b/static/js/themeSwitcher.js @@ -32,7 +32,6 @@ function switchTheme() { // Initialize the theme switcher button. themeSwitcher.addEventListener("click", switchTheme, false); themeSwitcher.setAttribute("role", "button"); -themeSwitcher.setAttribute("aria-label", "Toggle dark mode"); let togglePressed = currentTheme === "dark" ? "true" : "false"; themeSwitcher.setAttribute("aria-pressed", togglePressed); diff --git a/static/js/themeSwitcher.min.js b/static/js/themeSwitcher.min.js index bb57a19..63a311e 100644 --- a/static/js/themeSwitcher.min.js +++ b/static/js/themeSwitcher.min.js @@ -1 +1 @@ -const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme")||document.documentElement.getAttribute("data-theme");function setTheme(e,t=!1){document.documentElement.setAttribute("data-theme",e);var r="dark"===(currentTheme=e)?"true":"false",r=(themeSwitcher.setAttribute("aria-pressed",r),t&&localStorage.setItem("theme",e),new CustomEvent("themeChanged",{detail:{theme:e}}));window.dispatchEvent(r)}function switchTheme(){setTheme("dark"===currentTheme?"light":"dark",!0)}themeSwitcher.addEventListener("click",switchTheme,!1),themeSwitcher.setAttribute("role","button"),themeSwitcher.setAttribute("aria-label","Toggle dark mode");let togglePressed="dark"===currentTheme?"true":"false";themeSwitcher.setAttribute("aria-pressed",togglePressed),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{setTheme(e.matches?"dark":"light")}); +const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme")||document.documentElement.getAttribute("data-theme");function setTheme(e,t=!1){document.documentElement.setAttribute("data-theme",e),currentTheme=e;let r="dark"===e?"true":"false";themeSwitcher.setAttribute("aria-pressed",r),t&&localStorage.setItem("theme",e);const h=new CustomEvent("themeChanged",{detail:{theme:e}});window.dispatchEvent(h)}function switchTheme(){setTheme("dark"===currentTheme?"light":"dark",!0)}themeSwitcher.addEventListener("click",switchTheme,!1),themeSwitcher.setAttribute("role","button");let togglePressed="dark"===currentTheme?"true":"false";themeSwitcher.setAttribute("aria-pressed",togglePressed),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(e=>{setTheme(e.matches?"dark":"light")})); diff --git a/templates/partials/theme_switcher.html b/templates/partials/theme_switcher.html index 784b848..b87bfff 100644 --- a/templates/partials/theme_switcher.html +++ b/templates/partials/theme_switcher.html @@ -6,7 +6,7 @@ {%- set combined_mode_str = dark_str ~ "/" ~ light_str -%} {%- set title_label = toggle_str | replace(from="$MODE", to=combined_mode_str) -%} - {%- set aria_label = 'Toggle ' ~ dark_str ~ ' mode' -%} + {%- set aria_label = toggle_str | replace(from="$MODE", to=dark_str) -%}