fix(a11y): Make language switch accessible

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>