diff --git a/theme/templates/inc/language-switch.html.j2 b/theme/templates/inc/language-switch.html.j2 index d8ff594a89ff958ebd28d0af69e0f82659cb8859..16e406906423c98e3b25d3b8cc7138432eb7acc8 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>