From 0eea1c4aa927127ded946bb49377efd7fda0c8b3 Mon Sep 17 00:00:00 2001
From: Thomas Draier <thomas@dust.tt>
Date: Thu, 21 Nov 2024 16:59:33 +0100
Subject: [PATCH] [sparkle] Take focus in modal over close button (#8772)

---
 sparkle/package-lock.json        | 4 ++--
 sparkle/package.json             | 2 +-
 sparkle/src/components/Modal.tsx | 4 +++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
index 8ee79b2ff82c..0bb132fc046e 100644
--- a/sparkle/package-lock.json
+++ b/sparkle/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.318",
+  "version": "0.2.319",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@dust-tt/sparkle",
-      "version": "0.2.318",
+      "version": "0.2.319",
       "license": "ISC",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
diff --git a/sparkle/package.json b/sparkle/package.json
index 79dafd3acdc6..c9e7f52ab691 100644
--- a/sparkle/package.json
+++ b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.318",
+  "version": "0.2.319",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
diff --git a/sparkle/src/components/Modal.tsx b/sparkle/src/components/Modal.tsx
index 05af61072de2..8d328f7be888 100644
--- a/sparkle/src/components/Modal.tsx
+++ b/sparkle/src/components/Modal.tsx
@@ -178,8 +178,10 @@ export function Modal({
                 }
               />
               <div
+                tabIndex={1}
+                autoFocus
                 className={classNames(
-                  "s-pb-6 s-pt-16",
+                  "s-pb-6 s-pt-16 focus-visible:s-outline-none",
                   innerContainerClasses,
                   className ?? ""
                 )}