🚸 fix(theme-switcher): improve accessibility and i18n

- Add ARIA roles and attributes to theme switcher for accessibility
- Implement translations for theme switcher toggle text

i18n/ca.toml

@@ -20,6 +20,9 @@ of = "de"  # E.g. Page 1 "of" 3
 all_posts = "Totes les entrades"
 all_tags = "Totes les etiquetes"
 language_selection = "Selecció d'idioma"
+toggle_mode = "Canvia el mode $MODE"  # $MODE will be replaced by a value (or both) below.
+dark = "obscur"
+light = "clar"
 
 # Post metadata.
 draft = "ESBORRANY"

i18n/de.toml

@@ -24,6 +24,9 @@ of = "von"  # E.g. Page 1 "of" 3
 all_posts = "Alle Beiträge"
 all_tags = "Alle Tags"
 language_selection = "Sprachauswahl"
+toggle_mode = "Wechsle in den $MODE Modus"  # $MODE will be replaced by a value (or both) below.
+dark = "dunkel"
+light = "hell"
 
 # Post metadata.
 draft = "ENTWURF"

i18n/en.toml

@@ -20,6 +20,9 @@ of = "of"  # E.g. Page 1 "of" 3
 all_posts = "All posts"
 all_tags = "All tags"
 language_selection = "Language selection"
+toggle_mode = "Toggle $MODE mode"  # $MODE will be replaced by a value (or both) below.
+dark = "dark"
+light = "light"
 
 # Post metadata.
 draft = "DRAFT"

i18n/es.toml

@@ -20,6 +20,9 @@ of = "sur"  # E.g. Page 1 "of" 3
 all_posts = "Todas las entradas"
 all_tags = "Todas las etiquetas"
 language_selection = "Selección de idioma"
+toggle_mode = "Cambiar a modo $MODE"  # $MODE will be replaced by a value (or both) below.
+dark = "oscuro"
+light = "claro"
 
 # Post metadata.
 draft = "BORRADOR"

i18n/fr.toml

@@ -24,6 +24,9 @@ of = "de"  # E.g. Page 1 "of" 3
 all_posts = "Tous les articles"
 all_tags = "Toutes les étiquettes"
 language_selection = "Sélection de la langue"
+toggle_mode = "Basculer en mode $MODE"  # $MODE will be replaced by a value (or both) below.
+dark = "sombre"
+light = "clair"
 
 # Post metadata.
 draft = "BROUILLON"

i18n/hi.toml

@@ -22,6 +22,9 @@ of = "का"  # E.g. Page 1 "of" 3
 all_posts = "सभी पोस्ट्स"
 all_tags = "सभी टैग्स"
 language_selection = "भाषा चयन"
+toggle_mode = "$MODE मोड में टॉगल करें"  # $MODE will be replaced by a value (or both) below.
+dark = "अंधेरा"
+light = "रोशनी"
 
 # Post metadata.
 draft = "मसौदा"

i18n/it.toml

@@ -20,6 +20,9 @@ of = "di"  # E.g. Page 1 "of" 3
 all_posts = "Tutti i post"
 all_tags = "Tutti i tag"
 language_selection = "Selezione della lingua"
+toggle_mode = "Passa alla modalità $MODE"  # $MODE will be replaced by a value (or both) below.
+dark = "scuro"
+light = "chiaro"
 
 # Post metadata.
 draft = "BOZZA"

i18n/ja.toml

@@ -24,6 +24,9 @@ of = "中"  # E.g. Page 1 "of" 3
 all_posts = "すべての投稿"
 all_tags = "すべてのタグ"
 language_selection = "言語選択"
+toggle_mode = "$MODE モードに切り替え"  # $MODE will be replaced by a value (or both) below.
+dark = "暗い"
+light = "明るい"
 
 # Post metadata.
 draft = "ドラフト"

i18n/ko.toml

@@ -24,6 +24,9 @@ of = "중"  # E.g. Page 1 "of" 3
 all_posts = "모든 게시물"
 all_tags = "모든 태그"
 language_selection = "언어 선택"
+toggle_mode = "$MODE 모드로 전환"  # $MODE will be replaced by a value (or both) below.
+dark = "어두운"
+light = "밝은"
 
 # Post metadata.
 draft = "임시 저장"

i18n/pt-PT.toml

@@ -20,6 +20,9 @@ of = "de"  # E.g. Page 1 "of" 3
 all_posts = "Todas as publicações"
 all_tags = "Todas as etiquetas"
 language_selection = "Seleção de idioma"
+toggle_mode = "Alternar para o modo $MODE"  # $MODE will be replaced by a value (or both) below.
+dark = "escuro"
+light = "claro"
 
 # Post metadata.
 draft = "RASCUNHO"

i18n/ru.toml

@@ -20,6 +20,9 @@ of = "из"  # E.g. Page 1 "of" 3
 all_posts = "Все посты"
 all_tags = "Все теги"
 language_selection = "Выбор языка"
+toggle_mode = "Переключить на режим $MODE"  # $MODE will be replaced by a value (or both) below.
+dark = "тёмный"
+light = "светлый"
 
 # Post metadata.
 draft = "ЧЕРНОВИК"

i18n/uk.toml

@@ -24,6 +24,9 @@ of = "з"  # E.g. Page 1 "of" 3
 all_posts = "Всі пости"
 all_tags = "Всі теги"
 language_selection = "Вибір мови"
+toggle_mode = "Перемкнути в режим $MODE"  # $MODE will be replaced by a value (or both) below.
+dark = "темний"
+light = "світлий"
 
 # Post metadata.
 draft = "ЧЕРНЕТКА"

i18n/zh-Hans.toml

@@ -20,6 +20,9 @@ of = "/"  # E.g. Page 1 "of" 3
 all_posts = "所有文章"
 all_tags = "所有标签"
 language_selection = "语言选择"  # Machine translated.
+toggle_mode = "切换到$MODE模式"  # $MODE will be replaced by a value (or both) below. Machine translated.
+dark = "暗"  # Machine translated. 
+light = "亮"  # Machine translated.
 
 # Post metadata.
 draft = "草稿"

i18n/zh-Hant.toml

@@ -20,6 +20,9 @@ of = "/"  # E.g. Page 1 "of" 3
 all_posts = "所有文章"
 all_tags = "所有標籤"
 language_selection = "語言選擇"  # Machine translated.
+toggle_mode = "切換到$MODE模式"  # $MODE will be replaced by a value (or both) below. Machine translated.
+dark = "暗"  # Machine translated.
+light = "亮"  # Machine translated.
 
 # Post metadata.
 draft = "草稿"

sass/parts/_theme-switch.scss

@@ -7,4 +7,7 @@
     background: var(--text-color);
     width: 1rem;
     height: 1rem;
+    &:hover {
+        background: var(--meta-color);
+    }
 }

static/js/themeSwitcher.js

@@ -8,6 +8,8 @@ let currentTheme = localStorage.getItem("theme") || document.documentElement.get
 function setTheme(theme, saveToLocalStorage = false) {
     document.documentElement.setAttribute("data-theme", theme);
     currentTheme = theme;
+    let togglePressed = theme === "dark" ? "true" : "false";
+    themeSwitcher.setAttribute("aria-pressed", togglePressed);
 
     if (saveToLocalStorage) {
         localStorage.setItem("theme", theme);
@@ -29,6 +31,10 @@ 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);
 
 // Update the theme based on system preference if the user hasn't manually changed the theme.
 window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {

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),currentTheme=e,t&&localStorage.setItem("theme",e);t=new CustomEvent("themeChanged",{detail:{theme:e}});window.dispatchEvent(t)}function switchTheme(){setTheme("dark"===currentTheme?"light":"dark",!0)}themeSwitcher.addEventListener("click",switchTheme,!1),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);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")});

templates/partials/nav.html

@@ -26,9 +26,7 @@
 
                     {# Theme switcher #}
                     {%- if config.extra.theme_switcher and config.extra.theme_switcher == true -%}
-                        <li class="theme-switcher-wrapper js">
-                            <div class="theme-switcher" title="Toggle dark/light theme"></div>
-                        </li>
+                    {%- include "partials/theme_switcher.html" -%}
                     {%- endif -%}
                 </ul>
             </div>

templates/partials/theme_switcher.html

@@ -0,0 +1,18 @@
+<li class="theme-switcher-wrapper js">
+    {#- Create the localised strings for the title and aria-label attributes -#}
+    {%- set toggle_str = macros_translate::translate(key='toggle_mode', default='Toggle $MODE mode', language_strings=language_strings) -%}
+    {%- set dark_str = macros_translate::translate(key='dark', default='dark', language_strings=language_strings) -%}
+    {%- set light_str = macros_translate::translate(key='light', default='light', language_strings=language_strings) -%}
+    
+    {%- 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' -%}
+    
+    <div 
+        title="{{ title_label }}"
+        class="theme-switcher" 
+        role="button" 
+        aria-label="{{ aria_label }}" 
+        aria-pressed="false">
+    </div>
+</li>