From a0f9ce7514e290fbda68ab297ab817566b697b2c Mon Sep 17 00:00:00 2001
From: Luc <luc@lucemans.nl>
Date: Wed, 22 Nov 2023 11:27:06 +0000
Subject: [PATCH] Patch Modal Close

---
 web/src/dialog/Dialog.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/dialog/Dialog.tsx b/web/src/dialog/Dialog.tsx
index 153d64b..195f7cf 100644
--- a/web/src/dialog/Dialog.tsx
+++ b/web/src/dialog/Dialog.tsx
@@ -6,7 +6,8 @@ export const Dialog: FC<PropsWithChildren<{ onClose: () => void }>> = ({
     children,
 }) => {
     return (
-        <div>
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        <div tabIndex={-1}>
             <div className="fixed z-10 inset-0 bg-ens-light-grey-active/20 dark:bg-ens-light-grey-active/20 backdrop-blur-md"></div>
             <div className="fixed z-20 inset-x-0 bottom-0 md:inset-0 flex items-center justify-center max-w-full">
                 <div className="relative bg-ens-light-background-primary dark:bg-ens-dark-background-primary p-4 rounded-t-xl md:rounded-b-xl shadow-xl w-full max-w-md border border-ens-light-border dark:border-ens-dark-border">
@@ -14,7 +15,7 @@ export const Dialog: FC<PropsWithChildren<{ onClose: () => void }>> = ({
                         onClick={() => {
                             onClose();
                         }}
-                        className="absolute top-4 right-4"
+                        className="absolute top-4 right-4 p-1 hover:bg-ens-light-grey-surface hover:dark:bg-ens-dark-grey-surface rounded-full"
                     >
                         <FiX />
                     </button>