Accessibility: improve keyboard only flow (see #1181); remove some legacy use of Svelte

src/UI/Base/FileSelector.svelte

@@ -36,7 +36,9 @@
     dispatcher("submit", e.dataTransfer.files)
   }}
 >
-  <label class={twMerge(cls, drawAttention ? "glowing-shadow" : "")} for={"fileinput" + id}>
+  <label class={twMerge(cls, drawAttention ? "glowing-shadow" : "")} 
+         tabindex="0" for={"fileinput" + id} 
+         on:click={() => {console.log("Clicked", inputElement); inputElement.click()}}>
     <slot />
   </label>
   <input

src/UI/Base/FloatOver.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, onMount } from "svelte";
   import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { twMerge } from "tailwind-merge"
 
@@ -9,6 +9,12 @@
   const dispatch = createEventDispatcher<{ close }>()
   
   export let extraClasses = "p-4 md:p-6"
+  
+  let mainContent: HTMLElement
+  onMount(() => {
+    console.log("Mounting floatover")
+    mainContent?.focus()
+  })
 </script>
 
 <div
@@ -18,7 +24,7 @@
     dispatch("close")
   }}
 >
-  <div class="content normal-background" on:click|stopPropagation={() => {}}>
+  <div bind:this={mainContent} class="content normal-background" on:click|stopPropagation={() => {}}>
     <div class="h-full rounded-xl">
       <slot />
     </div>

src/UI/Base/ModalRight.svelte

@@ -1,25 +1,36 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte"
-  import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import { createEventDispatcher, onMount } from "svelte";
+  import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid";
+  import { Utils } from "../../Utils";
 
   /**
    * The slotted element will be shown on the right side
    */
-  const dispatch = createEventDispatcher<{ close }>()
+  const dispatch = createEventDispatcher<{ close }>();
+  let mainContent: HTMLElement;
+
+
+  onMount(() => {
+    window.setTimeout(
+      () => Utils.focusOnFocusableChild(mainContent), 250
+      
+    )
+  })
 </script>
 
 <div
+  bind:this={mainContent}
   class="absolute top-0 right-0 h-screen w-full overflow-y-auto drop-shadow-2xl md:w-6/12 lg:w-5/12 xl:w-4/12"
   style="max-width: 100vw; max-height: 100vh"
 >
   <div class="normal-background m-0 flex flex-col">
     <slot name="close-button">
-      <div
+      <button
         class="absolute right-10 top-10 h-8 w-8 cursor-pointer"
         on:click={() => dispatch("close")}
       >
         <XCircleIcon />
-      </div>
+      </button>
     </slot>
     <slot />
   </div>

src/UI/Base/TabbedGroup.svelte

@@ -30,7 +30,7 @@
   }
 </script>
 
-<div class="tabbedgroup flex h-full w-full">
+<div class="tabbedgroup flex h-full w-full focusable">
   <TabGroup
     class="flex h-full w-full flex-col"
     defaultIndex={1}

src/UI/Base/WeblateLink.svelte

@@ -19,6 +19,7 @@
       href={LinkToWeblate.hrefToWeblate($language, context)}
       target="_blank"
       class="weblate-link mx-1"
+      tabindex="-1"
     >
       <Translate class="font-gray" />
     </a>
@@ -27,6 +28,7 @@
       href={LinkToWeblate.hrefToWeblate($language, context)}
       class="weblate-link hidden-on-mobile mx-1"
       target="_blank"
+      tabindex="-1"
     >
       <Translate class="font-gray inline-block" />
     </a>