diff --git a/package.json b/package.json
index c025f6ef..230ede44 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "showdown": "^2.1.0",
     "sortablejs": "^1.15.2",
     "streamsaver": "^2.0.6",
+    "sv": "^0.6.5",
     "svelte-awesome-color-picker": "^3.1.0",
     "three": "^0.154.0",
     "tippy.js": "^6.3.7",
@@ -110,7 +111,7 @@
     "internal-ip": "^7.0.0",
     "postcss": "^8.4.33",
     "svelte": "^5.1.9",
-    "svelte-check": "^4.0.0",
+    "svelte-check": "^4.0.5",
     "svelte-preprocess": "^6.0.0",
     "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6b072698..e2520dda 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -191,6 +191,9 @@ importers:
       streamsaver:
         specifier: ^2.0.6
         version: 2.0.6
+      sv:
+        specifier: ^0.6.5
+        version: 0.6.5
       svelte-awesome-color-picker:
         specifier: ^3.1.0
         version: 3.1.0(svelte@5.1.9)
@@ -286,7 +289,7 @@ importers:
         specifier: ^5.1.9
         version: 5.1.9
       svelte-check:
-        specifier: ^4.0.0
+        specifier: ^4.0.5
         version: 4.0.5(svelte@5.1.9)(typescript@5.6.3)
       svelte-preprocess:
         specifier: ^6.0.0
@@ -3343,6 +3346,10 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  sv@0.6.5:
+    resolution: {integrity: sha512-zd2Ja0HKNlmg+gWjAw9ziS0ShAiAx8nFE4tfbIeaXoQ3vq84PEKh5GvKr3dZdVRgyKT6q2V1rb+yrhpF+S5LjA==}
+    hasBin: true
+
   svelte-awesome-color-picker@3.1.0:
     resolution: {integrity: sha512-na9B9qLaV8XQ6W6eyP6vFyDV2TBF4qvGad6799D4GzbazkiFtoO+lbaFFViAWanz/eECwe/WUAUdg6Jy7LIKFw==}
     peerDependencies:
@@ -7006,6 +7013,8 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  sv@0.6.5: {}
+
   svelte-awesome-color-picker@3.1.0(svelte@5.1.9):
     dependencies:
       colord: 2.9.3
diff --git a/src/lib/ChatScreens/DefaultChatScreen.svelte b/src/lib/ChatScreens/DefaultChatScreen.svelte
index a59760d5..7bdf0b87 100644
--- a/src/lib/ChatScreens/DefaultChatScreen.svelte
+++ b/src/lib/ChatScreens/DefaultChatScreen.svelte
@@ -475,6 +475,7 @@
                 
                 {#if $doingChat || doingChatInputTranslate} 
                     <button
+                        aria-labelledby="cancel"
                         class="peer-focus:border-textcolor  flex justify-center border-y border-darkborderc items-center text-gray-100 p-3 hover:bg-blue-500 transition-colors" onclick={abortChat}
                         style:height={inputHeight}
                     >
diff --git a/src/lib/ChatScreens/ResizeBox.svelte b/src/lib/ChatScreens/ResizeBox.svelte
index 4e1e6782..db7ebc77 100644
--- a/src/lib/ChatScreens/ResizeBox.svelte
+++ b/src/lib/ChatScreens/ResizeBox.svelte
@@ -87,7 +87,7 @@
 <div class="box bg-darkbg bg-opacity-70" bind:this="{box}" style="width: {$ViewBoxsize.width}px; height: {$ViewBoxsize.height}px;">
     <!-- Your content here -->
     <TransitionImage classType='risu' src={getEmotion(DBState.db, $CharEmotion, 'plain')}/>
-    <div
+    <div role="button" tabindex="0"
       class="resize-handle"
       onmousedown={handleStart}
       onmouseup={handleEnd}
diff --git a/src/lib/Others/ChatList.svelte b/src/lib/Others/ChatList.svelte
index 86750edb..9f27ac5a 100644
--- a/src/lib/Others/ChatList.svelte
+++ b/src/lib/Others/ChatList.svelte
@@ -37,13 +37,15 @@
                     <span>{chat.name}</span>
                 {/if}
                 <div class="flex-grow flex justify-end">
-                    <div class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" onclick={async (e) => {
+                    <div class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" role="button" tabindex="0" onclick={async (e) => {
                         e.stopPropagation()
                         exportChat(i)
+                    }} onkeydown={() => {
+
                     }}>
                         <DownloadIcon size={18}/>
                     </div>
-                    <div class="text-textcolor2 hover:text-green-500 cursor-pointer" onclick={async (e) => {
+                    <div class="text-textcolor2 hover:text-green-500 cursor-pointer" role="button" tabindex="0" onclick={async (e) => {
                         e.stopPropagation()
                         if(DBState.db.characters[$selectedCharID].chats.length === 1){
                             alertError(language.errors.onlyOneChat)
@@ -56,6 +58,8 @@
                             chats.splice(i, 1)
                             DBState.db.characters[$selectedCharID].chats = chats
                         }
+                    }} onkeydown={() => {
+                        
                     }}>
                         <TrashIcon size={18}/>
                     </div>
diff --git a/src/lib/Playground/PlaygroundImageGen.svelte b/src/lib/Playground/PlaygroundImageGen.svelte
index 59d27fc7..38f1e4bd 100644
--- a/src/lib/Playground/PlaygroundImageGen.svelte
+++ b/src/lib/Playground/PlaygroundImageGen.svelte
@@ -3,7 +3,7 @@
         <!-- Image -->
         <img class="w-full h-48 object-cover transform hover:scale-105 transition-transform duration-300 ease-in-out" 
              src="your-image-url.jpg" 
-             alt="Card Image">
+             alt="Card">
         <!-- Optional overlay gradient -->
         <div class="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-black/60 to-transparent"></div>
     </div>
diff --git a/src/lib/Setting/Pages/Module/ModuleChatMenu.svelte b/src/lib/Setting/Pages/Module/ModuleChatMenu.svelte
index 7c6d1242..c59b532a 100644
--- a/src/lib/Setting/Pages/Module/ModuleChatMenu.svelte
+++ b/src/lib/Setting/Pages/Module/ModuleChatMenu.svelte
@@ -73,7 +73,7 @@
                                     <CheckCircle2Icon size={18}/>
                                 </button>
                             {:else if DBState.db.enabledModules.includes(rmodule.id)}
-                                <button class="mr-2 text-textcolor2 cursor-not-allowed">
+                                <button class="mr-2 text-textcolor2 cursor-not-allowed"aria-labelledby="disabled">
                                 </button>
                             {:else}
                                 <button class={(!DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules.includes(rmodule.id)) ?
diff --git a/src/lib/Setting/botpreset.svelte b/src/lib/Setting/botpreset.svelte
index 34f99d1b..ab0a41e1 100644
--- a/src/lib/Setting/botpreset.svelte
+++ b/src/lib/Setting/botpreset.svelte
@@ -43,13 +43,17 @@
                     <span>{presets.name}</span>
                 {/if}
                 <div class="flex-grow flex justify-end">
-                    <div class="text-textcolor2 hover:text-green-500 cursor-pointer mr-2" onclick={(e) => {
+                    <div class="text-textcolor2 hover:text-green-500 cursor-pointer mr-2" role="button" tabindex="0" onclick={(e) => {
                         e.stopPropagation()
                         copyPreset(i)
+                    }} onkeydown={(e) => {
+                        if(e.key === 'Enter'){
+                            e.currentTarget.click()
+                        }
                     }}>
                         <CopyIcon size={18}/>
                     </div>
-                    <div class="text-textcolor2 hover:text-green-500 cursor-pointer mr-2" onclick={async (e) => {
+                    <div class="text-textcolor2 hover:text-green-500 cursor-pointer mr-2" role="button" tabindex="0" onclick={async (e) => {
                         e.stopPropagation()
                         const data = await alertCardExport('preset')
                         console.log(data.type)
@@ -59,11 +63,15 @@
                         if(data.type === 'realm'){
                             $ShowRealmFrameStore = `preset:${i}`
                         }
+                    }} onkeydown={(e) => {
+                        if(e.key === 'Enter'){
+                            e.currentTarget.click()
+                        }
                     }}>
 
                         <Share2Icon size={18} />
                     </div>
-                    <div class="text-textcolor2 hover:text-green-500 cursor-pointer" onclick={async (e) => {
+                    <div class="text-textcolor2 hover:text-green-500 cursor-pointer" role="button" tabindex="0" onclick={async (e) => {
                         e.stopPropagation()
                         if(DBState.db.botPresets.length === 1){
                             alertError(language.errors.onlyOneChat)
@@ -77,6 +85,10 @@
                             DBState.db.botPresets = botPresets
                             changeToPreset(0, false)
                         }
+                    }} onkeydown={(e) => {
+                        if(e.key === 'Enter'){
+                            e.currentTarget.click()
+                        }
                     }}>
                         <TrashIcon size={18}/>
                     </div>
diff --git a/src/lib/Setting/lorepreset.svelte b/src/lib/Setting/lorepreset.svelte
index 770c5cc9..29736b4e 100644
--- a/src/lib/Setting/lorepreset.svelte
+++ b/src/lib/Setting/lorepreset.svelte
@@ -32,7 +32,7 @@
                     <span>{lore.name}</span>
                 {/if}
                 <div class="flex-grow flex justify-end">
-                    <div class="text-textcolor2 hover:text-green-500 cursor-pointer" onclick={async (e) => {
+                    <div class="text-textcolor2 hover:text-green-500 cursor-pointer" role="button" tabindex="0" onclick={async (e) => {
                         e.stopPropagation()
                         if(DBState.db.loreBook.length === 1){
                             return
@@ -44,6 +44,10 @@
                             loreBook.splice(ind, 1)
                             DBState.db.loreBook = loreBook
                         }
+                    }} onkeydown={(e) => {
+                        if(e.key === 'Enter'){
+                            e.currentTarget.click()
+                        }
                     }}>
                         <TrashIcon size={18}/>
                     </div>
diff --git a/src/lib/SideBars/CharConfig.svelte b/src/lib/SideBars/CharConfig.svelte
index 0b47d988..88ef545f 100644
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -252,6 +252,7 @@
                     <div class="flex items-center px-2 py-3">
                         {#each [1,2,3,4,5,6] as barIndex}
                             <button class="bg-selected h-full flex-1 border-r-bgcolor border-r" 
+                                aria-labelledby="loading"
                                 class:bg-green-500={(DBState.db.characters[$selectedCharID] as groupChat).characterTalks[i] >= (1 / 6 * barIndex)}
                                 class:bg-selected={(DBState.db.characters[$selectedCharID] as groupChat).characterTalks[i] < (1 / 6 * barIndex)}
                                 class:rounded-l-lg={barIndex === 1}
diff --git a/src/lib/SideBars/SideChatList.svelte b/src/lib/SideBars/SideChatList.svelte
index b83ced04..ca4b06c1 100644
--- a/src/lib/SideBars/SideChatList.svelte
+++ b/src/lib/SideBars/SideChatList.svelte
@@ -104,7 +104,11 @@
                 <span>{chat.name}</span>
             {/if}
             <div class="flex-grow flex justify-end">
-                <div class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" onclick={async () => {
+                <div role="button" tabindex="0" onkeydown={(e) => {
+                    if(e.key === 'Enter'){
+                        e.currentTarget.click()
+                    }
+                }} class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" onclick={async () => {
                     const option = await alertChatOptions()
                     switch(option){
                         case 0:{
@@ -145,18 +149,30 @@
                 }}>
                     <MenuIcon size={18}/>
                 </div>
-                <div class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" onclick={() => {
+                <div role="button" tabindex="0" onkeydown={(e) => {
+                    if(e.key === 'Enter'){
+                        e.currentTarget.click()
+                    }
+                }} class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" onclick={() => {
                     editMode = !editMode
                 }}>
                     <PencilIcon size={18}/>
                 </div>
-                <div class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" onclick={async (e) => {
+                <div role="button" tabindex="0" onkeydown={(e) => {
+                    if(e.key === 'Enter'){
+                        e.currentTarget.click()
+                    }
+                }} class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" onclick={async (e) => {
                     e.stopPropagation()
                     exportChat(i)
                 }}>
                     <DownloadIcon size={18}/>
                 </div>
-                <div class="text-textcolor2 hover:text-green-500 cursor-pointer" onclick={async (e) => {
+                <div role="button" tabindex="0" onkeydown={(e) => {
+                    if(e.key === 'Enter'){
+                        e.currentTarget.click()
+                    }
+                }} class="text-textcolor2 hover:text-green-500 cursor-pointer" onclick={async (e) => {
                     e.stopPropagation()
                     if(chara.chats.length === 1){
                         alertError(language.errors.onlyOneChat)
diff --git a/src/lib/SideBars/Sidebar.svelte b/src/lib/SideBars/Sidebar.svelte
index f6c9aa66..ac63849f 100644
--- a/src/lib/SideBars/Sidebar.svelte
+++ b/src/lib/SideBars/Sidebar.svelte
@@ -352,7 +352,7 @@
     {/if}
   </div>
   <div class="flex flex-grow w-full flex-col items-center overflow-x-hidden overflow-y-auto pr-0">
-    <div class="h-4 min-h-4 w-14" ondragover={(e) => {
+    <div class="h-4 min-h-4 w-14" role="listitem" ondragover={(e) => {
       e.preventDefault()
       e.dataTransfer.dropEffect = 'move'
       e.currentTarget.classList.add('bg-green-500')
@@ -368,6 +368,7 @@
     }} ondragenter={preventAll}></div>
     {#each charImages as char, ind}
       <div class="group relative flex items-center px-2"
+        role="listitem"
         draggable="true"
         ondragstart={(e) => {avatarDragStart({index:ind}, e)}}
         ondragover={avatarDragOver}
@@ -379,6 +380,7 @@
         />
         <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
         <div
+            role="button" tabindex="0"
             onclick={() => {
               if(char.type === "normal"){
                 changeChar(char.index, {reseter});
@@ -391,7 +393,6 @@
                 }
               }
             }}
-            tabindex="0"
           >
           {#if char.type === 'normal'}
             <SidebarAvatar src={char.img ? getCharImage(char.img, "plain") : "/none.webp"} size="56" rounded={IconRounded} name={char.name} />
@@ -463,7 +464,7 @@
           class:bg-indigo-700={char.color === 'indigo'}
           class:bg-purple-700={char.color === 'purple'}
           class:bg-pink-700={char.color === 'pink'}></div>
-          <div class="h-4 min-h-4 w-14 relative z-10" ondragover={(e) => {
+          <div class="h-4 min-h-4 w-14 relative z-10" role="listitem" ondragover={(e) => {
             e.preventDefault()
             e.dataTransfer.dropEffect = 'move'
             e.currentTarget.classList.add('bg-green-500')
@@ -479,6 +480,7 @@
           }} ondragenter={preventAll}></div>
           {#each char.folder as char2, ind}
               <div class="group relative flex items-center px-2 z-10"
+              role="listitem"
               draggable="true"
               ondragstart={(e) => {if(char.type === 'folder'){avatarDragStart({index: ind, folder:char.id}, e)}}}
               ondragover={avatarDragOver}
@@ -490,6 +492,7 @@
               />
               <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
               <div
+                  role="button" tabindex="0"
                   onclick={() => {
                     if(char2.type === "normal"){
                       changeChar(char2.index, {reseter});
@@ -502,12 +505,11 @@
                       }
                     }
                   }}
-                  tabindex="0"
                 >
                 <SidebarAvatar src={char2.img ? getCharImage(char2.img, "plain") : "/none.webp"} size="56" rounded={IconRounded} name={char2.name}/>
               </div>
             </div>
-            <div class="h-4 min-h-4 w-14 relative z-20" ondragover={(e) => {
+            <div class="h-4 min-h-4 w-14 relative z-20" role="listitem" ondragover={(e) => {
               e.preventDefault()
               e.dataTransfer.dropEffect = 'move'
               e.currentTarget.classList.add('bg-green-500')
@@ -525,7 +527,7 @@
         </div>
         {/key}
       {/if}
-      <div class="h-4 min-h-4 w-14" ondragover={((e) => {
+      <div class="h-4 min-h-4 w-14" role="listitem" ondragover={((e) => {
         e.preventDefault()
         e.dataTransfer.dropEffect = 'move'
         e.currentTarget.classList.add('bg-green-500')
@@ -648,12 +650,17 @@
 </div>
 
 {#if $DynamicGUI}
-    <div class="flex-grow h-full min-w-12" class:hidden={hidden} onclick={() => {
+    <div role="button" tabindex="0" class="flex-grow h-full min-w-12" class:hidden={hidden} onclick={() => {
       if($sideBarClosing){
         return
       }
       $sideBarClosing = true;
     }}
+      onkeydown={(e)=>{
+        if(e.key === 'Enter'){
+            e.currentTarget.click()
+        }
+      }}
       class:sidebar-dark-animation={!$sideBarClosing}
       class:sidebar-dark-close-animation={$sideBarClosing}>
 
diff --git a/src/lib/UI/GUI/MultiLangDisplay.svelte b/src/lib/UI/GUI/MultiLangDisplay.svelte
index 89eafb58..0b8e240b 100644
--- a/src/lib/UI/GUI/MultiLangDisplay.svelte
+++ b/src/lib/UI/GUI/MultiLangDisplay.svelte
@@ -9,9 +9,10 @@
     }
 
     let { value, markdown = false }: Props = $props();
-    let valueObject: {[code:string]:string} = $state(parseMultilangString(value))
+    const parsedValue = parseMultilangString(value)
+    let valueObject: {[code:string]:string} = $state(parsedValue)
     let selectedLang = $state("en")
-    if(valueObject["en"] === undefined){
+    if(parsedValue["en"] === undefined){
         selectedLang = "xx"
     }
     $effect.pre(() => {
diff --git a/src/lib/UI/GUI/MultiLangInput.svelte b/src/lib/UI/GUI/MultiLangInput.svelte
index 55f7c214..d2cc46e4 100644
--- a/src/lib/UI/GUI/MultiLangInput.svelte
+++ b/src/lib/UI/GUI/MultiLangInput.svelte
@@ -10,7 +10,12 @@
     }
 
     let { value = $bindable(), className = "", onInput = () => {} }: Props = $props();
-    let valueObject: {[code:string]:string} = $state(parseMultilangString(value))
+    let parsed = parseMultilangString(value)
+    if(parsed["en"] === undefined){
+        parsed["en"] = parsed["xx"]
+        delete parsed["xx"]
+    }
+    let valueObject: {[code:string]:string} = $state(parsed)
     const updateValue = () => {
         for(let lang in valueObject){
             if(valueObject[lang] === "" && lang !== selectedLang && lang!=="en" ){
@@ -26,11 +31,7 @@
         valueObject = valueObject // force update
         value = encodeMultilangString(valueObject)
     }
-    if(valueObject["en"] === undefined){
-        valueObject["en"] = valueObject["xx"]
-        delete valueObject["xx"]
-        updateValue()
-    }
+    updateValue()
     $effect.pre(() => {
         valueObject = parseMultilangString(value)
     });
diff --git a/src/lib/UI/GUI/TextAreaInput.svelte b/src/lib/UI/GUI/TextAreaInput.svelte
index a67bb764..977ce6a0 100644
--- a/src/lib/UI/GUI/TextAreaInput.svelte
+++ b/src/lib/UI/GUI/TextAreaInput.svelte
@@ -77,6 +77,8 @@
             handleKeyDown(e)
             onInput()
         }}
+        role="textbox"
+        tabindex="0"
         oninput={(e) => {
             autoComplete()
         }}
diff --git a/src/lib/UI/Realm/RealmHubIcon.svelte b/src/lib/UI/Realm/RealmHubIcon.svelte
index 685e5103..7eb80971 100644
--- a/src/lib/UI/Realm/RealmHubIcon.svelte
+++ b/src/lib/UI/Realm/RealmHubIcon.svelte
@@ -33,22 +33,22 @@
         <div class="flex-grow"></div>
         <div class="flex flex-wrap w-full flex-row-reverse gap-1">
             {#if chara.hasEmotion}
-                <button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={((e) => {
+                <div class="text-textcolor2 hover:text-green-500 transition-colors" role="button" tabindex="0" onclick={((e) => {
                     e.stopPropagation()
                     alertNormal("This character includes emotion images")
-                })}><SmileIcon /></button>
+                })} onkeydown={(e) => {}}><SmileIcon /></div>
             {/if}
             {#if chara.hasAsset}
-                <button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={((e) => {
+                <div class="text-textcolor2 hover:text-green-500 transition-colors" role="button" tabindex="0" onclick={((e) => {
                     e.stopPropagation()
                     alertNormal("This character includes additional assets")
-                })}><ImageIcon /></button>
+                })} onkeydown={(e) => {}}><ImageIcon /></div>
             {/if}
             {#if chara.hasLore}
-                <button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={((e) => {
+                <div class="text-textcolor2 hover:text-green-500 transition-colors" role="button" tabindex="0" onclick={((e) => {
                     e.stopPropagation()
                     alertNormal("This character includes lorebook")
-                })}><BookIcon /></button>
+                })} onkeydown={(e) => {}}><BookIcon /></div>
             {/if}
         </div>
     </div>
diff --git a/src/lib/UI/Realm/RealmLicense.svelte b/src/lib/UI/Realm/RealmLicense.svelte
index 6a611277..1a110414 100644
--- a/src/lib/UI/Realm/RealmLicense.svelte
+++ b/src/lib/UI/Realm/RealmLicense.svelte
@@ -13,7 +13,7 @@
 {#if Object.keys(CCLicenseData).includes(license)}
     <div class="w-full flex flex-row">
         <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <div class="flex flex-wrap flex-row gap-1 mt-2 items-center cursor-pointer" use:tooltip={CCLicenseData[license][1] + ". The License only applys to the text."} onclick={((e) => {
+        <div role="button" tabindex="0" class="flex flex-wrap flex-row gap-1 mt-2 items-center cursor-pointer" use:tooltip={CCLicenseData[license][1] + ". The License only applys to the text."} onclick={((e) => {
             e.stopPropagation();
             openURL(`https://creativecommons.org/licenses/${CCLicenseData[license][0]}/4.0/`)
         })}>
diff --git a/src/lib/UI/Realm/RealmMain.svelte b/src/lib/UI/Realm/RealmMain.svelte
index c28b2328..2e3eb3f3 100644
--- a/src/lib/UI/Realm/RealmMain.svelte
+++ b/src/lib/UI/Realm/RealmMain.svelte
@@ -163,7 +163,7 @@
 
 {#if menuOpen}
     <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center" onclick={() => {
+    <div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center" role="button" tabindex="0" onclick={() => {
         menuOpen = false
     }}>
         <div class="max-w-full bg-darkbg rounded-md flex flex-col gap-4 overflow-y-auto p-4">
diff --git a/src/lib/UI/Realm/RealmPopUp.svelte b/src/lib/UI/Realm/RealmPopUp.svelte
index 5d5c1334..6fef1cbb 100644
--- a/src/lib/UI/Realm/RealmPopUp.svelte
+++ b/src/lib/UI/Realm/RealmPopUp.svelte
@@ -19,7 +19,7 @@
 
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
-<div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center text-textcolor" onclick={() => {
+<div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center text-textcolor" role="button" tabindex="0" onclick={() => {
     openedData = null
 }}>
     <div class="p-6 max-w-full bg-darkbg rounded-md flex flex-col gap-4 w-2xl overflow-y-auto max-h-full">
diff --git a/src/lib/VisualNovel/VisualNovelMain.svelte b/src/lib/VisualNovel/VisualNovelMain.svelte
index e323fe9d..1081e50c 100644
--- a/src/lib/VisualNovel/VisualNovelMain.svelte
+++ b/src/lib/VisualNovel/VisualNovelMain.svelte
@@ -23,9 +23,7 @@
 <div class="flex-grow h-full min-w-0 relative justify-center flex">
     <SideBarArrow />
     <BackgroundDom />
-    <div style={wallPaper} class="h-full w-full bg-cover" onclick={() => {
-        forceRender()
-    }}>
+    <div style={wallPaper} class="h-full w-full bg-cover">
         <VisualNovelChat />
     </div>
 </div>
\ No newline at end of file