From 7eb9cab0f2e90c70d9713a5523f19c7d433a638b Mon Sep 17 00:00:00 2001
From: Georg Krause <mail@georg-krause.net>
Date: Sun, 12 Mar 2023 16:04:15 +0100
Subject: [PATCH] fix(a11y): Make language switch accessible
---
theme/templates/inc/language-switch.html.j2 | 20 +++++++++++++-------
1 file changed, 13 insertions(+), 7 deletions(-)
diff --git a/theme/templates/inc/language-switch.html.j2 b/theme/templates/inc/language-switch.html.j2
index d8ff594a..16e40690 100644
--- a/theme/templates/inc/language-switch.html.j2
+++ b/theme/templates/inc/language-switch.html.j2
@@ -6,15 +6,16 @@
float: left;
}
- a.language-switch {
+ span.language-switch {
+ width: 100%;
padding-right: 30px !important;
}
- a.language-switch:active {
+ span.language-switch:active {
background-color: var(--fw-gray-700);
}
- a.language-switch::after {
+ span.language-switch::after {
content: "\f078";
font: normal normal normal 14px/1 ForkAwesome;
position: absolute;
@@ -22,10 +23,12 @@
}
input[type=checkbox]#language-switch {
- display: none;
+ position: absolute;
+ left: -20000px;
}
.language-switch ul {
+ width: 100%;
display: none;
background-color: var(--fw-gray-700);
position: absolute;
@@ -48,10 +51,13 @@
</style>
{% if lang_siteurls %}
<label for="language-switch">
- <a class="funkwhale button is-outline language-switch">{{ DEFAULT_LANG | lang_name }}</a>
+ <span class="funkwhale button is-outline language-switch">{{ DEFAULT_LANG | lang_name }}</span>
</label>
- <input type="checkbox" id="language-switch" name="language-switch">
- <ul>
+ <input type="checkbox"
+ id="language-switch"
+ name="language-switch"
+ aria-label="Select language">
+ <ul tabindex="-1">
{% for lang, url in lang_siteurls.items() %}
{% if not lang == DEFAULT_LANG %}
<li>
--
GitLab