Merge master

src/UI/Base/ModalRight.svelte

@@ -2,25 +2,20 @@
   import { createEventDispatcher } from "svelte"
   import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { trapFocus } from "trap-focus-svelte"
-  import { Utils } from "../../Utils"
 
   /**
    * The slotted element will be shown on the right side
    */
   const dispatch = createEventDispatcher<{ close }>()
-  let mainContent: HTMLElement
-
-
 </script>
 
 <div
+  aria-modal="true"
   autofocus
-  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 normal-background flex flex-col"
   role="dialog"
-  tabindex="-1"
-  aria-modal="true"
   style="max-width: 100vw; max-height: 100vh"
+  tabindex="-1"
   use:trapFocus
 >
   <slot name="close-button">
@@ -31,7 +26,7 @@
       <XCircleIcon />
     </button>
   </slot>
-  <div role="document" >
-  <slot />
+  <div role="document">
+    <slot />
   </div>
 </div>