aria-role fixes

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(() => {

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)
     });

src/lib/UI/GUI/TextAreaInput.svelte

@@ -77,6 +77,8 @@
             handleKeyDown(e)
             onInput()
         }}
+        role="textbox"
+        tabindex="0"
         oninput={(e) => {
             autoComplete()
         }}

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>

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/`)
         })}>

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">

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">