package.json

@@ -12,6 +12,7 @@
 		"gridjs": "^3.2.1",
 		"localforage": "^1.9.0",
 		"svelte-filepond": "^0.0.1",
+		"svelte-focus-trap": "^1.0.1",
 		"svelte-i18n": "^3.3.0",
 		"tailwindcss": "^2.0.2",
 		"tinro": "^0.5.3",

src/components/AddTrackModal.svelte

@@ -1,5 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
+  import { focusTrap } from "svelte-focus-trap";
   import { tracks as tracksstore } from "../store.js";
   import { TrackService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
@@ -57,7 +58,7 @@
 </script>
 
 {#if modal_open}
-  <div class="fixed z-10 inset-0 overflow-y-auto">
+  <div class="fixed z-10 inset-0 overflow-y-auto" use:focusTrap>
     <div
       class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">