From 10b4329e53b2ca7014e77a95c041850ab59688ed Mon Sep 17 00:00:00 2001
From: DaveVodrazka <dave.vodrazka@gmail.com>
Date: Thu, 3 Jul 2025 11:50:45 +0200
Subject: [PATCH 1/2] feat: backdrop click closes modal

---
 src/modal/Modal.svelte | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/modal/Modal.svelte b/src/modal/Modal.svelte
index 2ade26f..95357ee 100644
--- a/src/modal/Modal.svelte
+++ b/src/modal/Modal.svelte
@@ -59,6 +59,23 @@
   export let theme: Theme = "dark"
   export let darkModeControlClass = (theme === "dark" ? "dark" : "") as Theme
 
+  const handleClose = () => {
+    console.log("HANDLE CLOSE CALLED")
+    nodeRef?.parentNode?.removeChild(nodeRef)
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      handleClose();
+    }
+  }
+
+  // close modal if user presses ESC key
+  onMount(() => {
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  });
+
   onMount(async () => {
     if (
       theme === "dark" ||
@@ -111,18 +128,29 @@
     bind:this={nodeRef}
     part="starknetkit-modal"
     class={`${darkModeControlClass} modal-font fixed inset-0 z-[9998] flex items-center justify-center backdrop-blur-sm bg-black/25`}
+    {...{/* on backdrop click, close the modal */}}
+    on:click={handleClose}
+    {...{/* this is for accessibility purposes */}}
+    on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && handleClose()}
+    tabindex="0"
+    role="button"
+    aria-label="Close modal by clicking the backdrop"
   >
+    <!-- on:click|stopPropagation is not interactive, it is safe to disable a11y check -->
+    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <main
       role="dialog"
       class={`
         rounded-3xl bg-surface-default shadow-modal dark:shadow-none flex flex-col
-        z-[9999] w-full max-w-[380px] mx-6 p-6 text-center gap-8
+        z-[9999] w-full max-w-[380px] mx-6 p-6 text-center gap-8 cursor-default
         ${layout !== Layout.walletList ? "min-h-[570px]" : ""}
       `}
+       on:click|stopPropagation
     >
       <Header
         handleBack={() => setLayout(Layout.walletList)}
-        handleClose={() => nodeRef?.parentNode?.removeChild(nodeRef)}
+        handleClose={handleClose}
         title={dappName}
         showBackButton={showBackButton &&
           ![Layout.walletList, Layout.success].includes(layout)}

From 79e569902ce3d766d26275afbbdfce74d59f7608 Mon Sep 17 00:00:00 2001
From: DaveVodrazka <dave.vodrazka@gmail.com>
Date: Thu, 3 Jul 2025 13:29:04 +0200
Subject: [PATCH 2/2] fix: remove handleClose console log

---
 src/modal/Modal.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/modal/Modal.svelte b/src/modal/Modal.svelte
index 95357ee..189f7e8 100644
--- a/src/modal/Modal.svelte
+++ b/src/modal/Modal.svelte
@@ -60,7 +60,6 @@
   export let darkModeControlClass = (theme === "dark" ? "dark" : "") as Theme
 
   const handleClose = () => {
-    console.log("HANDLE CLOSE CALLED")
     nodeRef?.parentNode?.removeChild(nodeRef)
   }