alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

♿️ fix: improve accessibility and i18n (#183)

Browse Source
This commit is contained in:
Óscar Fernández
2023-10-02 18:08:57 +02:00
committed by GitHub
parent 28fb52581f
commit 2c6ac293ad
25 changed files with 214 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
templates/partials/extra_features.html
View File

@@ -37,6 +37,13 @@
{# Add copy button to code blocks #}
{%- if macros_settings::evaluate_setting_priority(setting="copy_button", page=page, default_global_value=true) == "true" -%}
{#- Add hidden HTML elements with the translated strings for the button's interactions -#}
<span id="copy-success" class="hidden">
{{ macros_translate::translate(key="copied", default="Copied!", language_strings=language_strings) }}
</span>
<span id="copy-init" class="hidden">
{{ macros_translate::translate(key="copy_code_to_clipboard", default="Copy code to clipboard", language_strings=language_strings) }}
</span>
<script defer src="{{ get_url(path='js/copyCodeToClipboard.min.js', trailing_slash=false) | safe }}"></script>
{%- endif -%}

25
templates/partials/language_switcher.html
View File

@@ -1,43 +1,38 @@
<li class="language-switcher">
<div class="dropdown" type="Button">
<div class="language-switcher-icon"></div>
<div class="dropdown-content">
<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>
</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>

4
templates/partials/nav.html
View File

@@ -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>

18
templates/partials/theme_switcher.html Normal file
View File

@@ -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>