♿️ fix: improve accessibility and i18n (#183)
Óscar Fernández
1 year ago
committed by
GitHub
parent
28fb52581f
commit
2c6ac293ad
@ -1 +1 @@
|
||||
const changeIcon=(e,t)=>{e.classList.add(t),setTimeout(()=>e.classList.remove(t),2500)},addCopyEventListenerToDiv=(e,t)=>{e.addEventListener("click",()=>copyCodeAndChangeIcon(e,t))},copyCodeAndChangeIcon=async(e,t)=>{let o=t.querySelector("table")?getTableCode(t):getNonTableCode(t);try{await navigator.clipboard.writeText(o),changeIcon(e,"checked")}catch(c){changeIcon(e,"error")}},getNonTableCode=e=>[...e.querySelectorAll("code")].map(e=>e.textContent).join(""),getTableCode=e=>[...e.querySelectorAll("tr")].map(e=>e.querySelector("td:last-child")?.innerText??"").join("");document.querySelectorAll("pre").forEach(e=>{let t=document.createElement("div");t.className="copy-code",e.prepend(t),addCopyEventListenerToDiv(t,e)});
|
||||
const copiedText=document.getElementById("copy-success").textContent,initCopyText=document.getElementById("copy-init").textContent,changeIcon=(e,t)=>{e.classList.add(t),e.setAttribute("aria-label",copiedText),setTimeout(()=>{e.classList.remove(t),e.setAttribute("aria-label",initCopyText)},2500)},addCopyEventListenerToDiv=(e,t)=>{e.addEventListener("click",()=>copyCodeAndChangeIcon(e,t))},copyCodeAndChangeIcon=async(t,e)=>{e=(e.querySelector("table")?getTableCode:getNonTableCode)(e);try{await navigator.clipboard.writeText(e),changeIcon(t,"checked")}catch(e){changeIcon(t,"error")}},getNonTableCode=e=>[...e.querySelectorAll("code")].map(e=>e.textContent).join(""),getTableCode=e=>[...e.querySelectorAll("tr")].map(e=>e.querySelector("td:last-child")?.innerText??"").join("");document.querySelectorAll("pre").forEach(e=>{var t=document.createElement("div");t.setAttribute("role","button"),t.setAttribute("aria-label",initCopyText),t.setAttribute("title",initCopyText),t.className="copy-code",e.prepend(t),addCopyEventListenerToDiv(t,e)});
|
||||
|
||||
@ -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")});
|
||||
|
||||
@ -1,43 +1,38 @@
|
||||
<li class="language-switcher">
|
||||
<div class="dropdown" type="Button">
|
||||
<details class="dropdown">
|
||||
<summary role="button" aria-haspopup="true" title="{{ macros_translate::translate(key="language_selection", default="Language selection", language_strings=language_strings) }}" aria-label="{{ macros_translate::translate(key="language_selection", default="Language selection", language_strings=language_strings) }}">
|
||||
<div class="language-switcher-icon"></div>
|
||||
|
||||
<div class="dropdown-content">
|
||||
</summary>
|
||||
<div class="dropdown-content" role="menu">
|
||||
{#- Display the current language first in the dropdown -#}
|
||||
{{ macros_translate::translate(key="language_name", default=lang, language_strings=language_strings) }}
|
||||
|
||||
{#- Loop through all the available languages in the config -#}
|
||||
{%- for lcode, ldetails in config.languages -%}
|
||||
{#- Skip the current language to avoid linking to the current page -#}
|
||||
{%- if lang == lcode -%}
|
||||
{%- continue -%}
|
||||
{%- endif -%}
|
||||
|
||||
{#- Dynamically load the language strings for each language -#}
|
||||
{%- set other_language_strings = load_data(path="i18n/" ~ lcode ~ ".toml", required=false) -%}
|
||||
{%- if not other_language_strings -%}
|
||||
{%- set other_language_strings = load_data(path="themes/tabi/i18n/" ~ lcode ~ ".toml", required=false) -%}
|
||||
{%- endif -%}
|
||||
|
||||
{#- Use the loaded language strings to get the language name -#}
|
||||
{% set language_name = macros_translate::translate(key="language_name", default=lcode,
|
||||
language_strings=other_language_strings) %}
|
||||
|
||||
{#- Check if the language code matches the default language -#}
|
||||
{%- if lcode == config.default_language -%}
|
||||
{#- If it does, link to the root path (no language code in URL) -#}
|
||||
<a type="Button" href="{{ current_url | replace(from='/' ~ lang ~ '/', to = '/') }}">{{ language_name }}</a>
|
||||
{%- elif lang == config.default_language -%}
|
||||
<a role="menuitem" lang="{{ lcode }}" aria-label="{{ language_name }}" href="{{ current_url | replace(from='/' ~ lang ~ '/', to = '/') }}">{{ language_name }}</a>
|
||||
{#- Check if the current language is the default language -#}
|
||||
{#- If it is, append the language code to the base URL -#}
|
||||
<a type="Button" href="{{ config.base_url }}/{{ lcode }}{{ current_path | default(value=" /") | safe }}">{{
|
||||
language_name }}</a>
|
||||
{%- elif lang == config.default_language -%}
|
||||
<a role="menuitem" lang="{{ lcode }}" aria-label="{{ language_name }}" href="{{ config.base_url }}/{{ lcode }}{{ current_path | default(value=" /") | safe }}">{{ language_name }}</a>
|
||||
{%- else -%}
|
||||
{#- If it's not, replace the current language code in the URL with the new one -#}
|
||||
<a type="Button" href="{{ current_url | replace(from='/' ~ lang ~ '/', to='/' ~ lcode ~ '/') }}">{{
|
||||
language_name }}</a>
|
||||
<a role="menuitem" lang="{{ lcode }}" aria-label="{{ language_name }}" href="{{ current_url | replace(from='/' ~ lang ~ '/', to='/' ~ lcode ~ '/') }}">{{ language_name }}</a>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</li>
|
||||
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue