mdivecky/public-web
Archived
1
0
Fork 0
forked from NoLog.cz/public-web
Code Issues Pull requests 2 Projects Releases Packages Wiki Activity

Improve button accessibility

Browse source
This commit is contained in:
Ondřej 2022-11-18 18:32:24 +01:00
parent 9d1fc32618
commit 7e7bfdf42d
5 changed files with 44 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
i18n/cs.toml
View file

@ -1,12 +1,12 @@
[menu_title]
other = "Main menu"
[menu_home]
other = "Home"
[menu_mobile]
other = "Menu"
[menu_label]
other = "Menu"
[menu_close_label]
other = "Zavřít menu"
[pager_next]
other = "Next"
@ -89,4 +89,13 @@ other = "Send message"
other = "Skip if you are a human"
[lang_select_title]
other = "Language selector"
other = "Volba jazyka"
[theme_select_title]
other = "Volba barevného tématu"
[theme_select_dark_mode_label]
other = "Přepnout do tmavého režimu"
[theme_select_light_mode_label]
other = "Přepnout do světlého režimu"

26
i18n/en.toml
View file

@ -1,12 +1,12 @@
[menu_title]
other = "Main menu"
[menu_home]
other = "Home"
[menu_mobile]
other = "Menu"
[menu_label]
other = "Menu"
[menu_close_label]
other = "Close menu"
[pager_next]
other = "Next"
@ -94,14 +94,12 @@ other = "Skip if you are a human"
[lang_select_title]
other = "Language selector"
[cookieconsent_message]
other = "This website uses cookies. Some are necessary for the website to function. Tracking and analytics cookies are optional."
[theme_select_title]
other = "Theme selector"
[cookieconsent_accept]
other = "Accept all"
[theme_select_dark_mode_label]
other = "Switch to dark mode"
[cookieconsent_decline]
other = "Only necessary"
[theme_select_light_mode_label]
other = "Switch to light mode"
[privacy_policy]
other = "Privacy policy"

1
layouts/_default/baseof.html
View file

@ -25,6 +25,7 @@
<span class="max-lg:hidden">{{ partial "language-selector.html" . }}</span>
{{ partial "theme-selector.html" . }}
<button class="button lg:hidden" x-on:click="menuOpen = true">
<span class="sr-only">{{ i18n "menu_label" }}</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32">
<path fill="none" d="M0 0h24v24H0z"/>
<path fill="currentColor" d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/>

1
layouts/partials/menu.html
View file

@ -3,6 +3,7 @@
x-bind:class="menuOpen ? 'translate-x-0' : 'translate-x-full lg:translate-x-0'">
<h2 class="sr-only">{{ i18n "menu_title" }}</h2>
<button class="button block mb-6 lg:hidden absolute top-4 right-6" x-on:click="menuOpen = false">
<span class="sr-only">{{ i18n "menu_close_label" }}</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
</button>
<ul class="flex gap-x-6 gap-y-4 flex-col lg:flex-row">

22
layouts/partials/theme-selector.html
View file

@ -1,17 +1,23 @@
<h2 class="sr-only">{{ i18n "theme_select_title" }}</h2>
<button x-on:click="toggleColorScheme" class="button">
<svg class="light:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
<g>
<span class="light:hidden">
<span class="sr-only">{{ i18n "theme_select_light_mode_label" }}</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
<g>
<path fill="none" d="M0 0h24v24H0z"/>
<path fill="currentColor" fill-rule="nonzero" d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/>
</g>
</svg>
<svg class="dark:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
<g>
</g>
</svg>
</span>
<span class="dark:hidden">
<span class="sr-only">{{ i18n "theme_select_dark_mode_label" }}</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
<g>
<path fill="none" d="M0 0h24v24H0z"/>
<path fill="currentColor" fill-rule="nonzero" d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/>
</g>
</svg>
</g>
</svg>
</span>
</button>
<script>