From 52c66418133b6fefd2ce37bdff8b9167926ca54a Mon Sep 17 00:00:00 2001
From: kwaroran <amasio1234@proton.me>
Date: Sat, 2 Nov 2024 02:22:15 +0900
Subject: [PATCH] Enhance accessibility by adding roles and tabindex attributes
 to interactive elements

---
 src/lib/Others/AlertComp.svelte     | 7 ++++---
 src/lib/UI/GUI/TextAreaInput.svelte | 4 ++++
 src/lib/UI/Title.svelte             | 5 ++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/lib/Others/AlertComp.svelte b/src/lib/Others/AlertComp.svelte
index e1c44ed3..923fc815 100644
--- a/src/lib/Others/AlertComp.svelte
+++ b/src/lib/Others/AlertComp.svelte
@@ -90,7 +90,7 @@
             {:else if $alertStore.type === 'tos'}
                 <!-- svelte-ignore a11y_missing_attribute -->
                 <!-- svelte-ignore a11y_click_events_have_key_events -->
-                <div class="text-textcolor">You should accept <a class="text-green-600 hover:text-green-500 transition-colors duration-200 cursor-pointer" onclick={() => {
+                <div class="text-textcolor">You should accept <a role="button" tabindex="0" class="text-green-600 hover:text-green-500 transition-colors duration-200 cursor-pointer" onclick={() => {
                     openURL('https://sv.risuai.xyz/hub/tos')
                 }}>Terms of Service</a> to continue</div>
             {:else if $alertStore.type !== 'select' && $alertStore.type !== 'requestdata' && $alertStore.type !== 'addchar' && $alertStore.type !== 'hypaV2' && $alertStore.type !== 'chatOptions'}
@@ -450,8 +450,9 @@
     </div>
 
 {:else if $alertStore.type === 'cardexport'}
-    <div  class="fixed top-0 left-0 h-full w-full bg-black bg-opacity-50 flex flex-col z-50 items-center justify-center" onclick={close}>
-        <div class="bg-darkbg rounded-md p-4 max-w-full flex flex-col w-2xl" onclick={(e) => {
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div  class="fixed top-0 left-0 h-full w-full bg-black bg-opacity-50 flex flex-col z-50 items-center justify-center" role="button" tabindex="0" onclick={close}>
+        <div class="bg-darkbg rounded-md p-4 max-w-full flex flex-col w-2xl" role="button" tabindex="0" onclick={(e) => {
             e.stopPropagation()
             onclick(e)
         }}>
diff --git a/src/lib/UI/GUI/TextAreaInput.svelte b/src/lib/UI/GUI/TextAreaInput.svelte
index 0714ed35..6dae7150 100644
--- a/src/lib/UI/GUI/TextAreaInput.svelte
+++ b/src/lib/UI/GUI/TextAreaInput.svelte
@@ -88,6 +88,8 @@
             }}
             bind:this={inputDom}
             translate="no"
+            role="textbox"
+            tabindex="0"
         >{value ?? ''}</div>
     {:else}
         <div
@@ -103,6 +105,8 @@
             }}
             bind:this={inputDom}
             translate="no"
+            role="textbox"
+            tabindex="0"
         >{value ?? ''}</div>
     {/if}
     <div class="hidden absolute z-100 bg-bgcolor border border-darkborderc p-2 flex-col" bind:this={autoCompleteDom}>
diff --git a/src/lib/UI/Title.svelte b/src/lib/UI/Title.svelte
index ceba1d6c..d3da7cba 100644
--- a/src/lib/UI/Title.svelte
+++ b/src/lib/UI/Title.svelte
@@ -76,6 +76,7 @@ You've had:
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
 <h2 class="text-4xl text-textcolor mb-0 mt-6 font-black relative" class:text-bordered={specialDay === 'newYear'} onclick={onClick}>
     {#if specialDay === 'midAutumn'}
         <span class="text-amber-400">🐉RisuAI🐉</span>
@@ -128,7 +129,8 @@ You've had:
 
 {#if specialDay === 'anniversary'}
     <h1>
-        <span class="text-2xl font-extralight italic text-amber-400 hover:text-amber-600 cursor-pointer transition" onclick={() => {
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <span class="text-2xl font-extralight italic text-amber-400 hover:text-amber-600 cursor-pointer transition" role="button" tabindex="-1" onclick={() => {
             openURL('https://risuai.net')
         }}>Happy 1st Anniversary!</span>
     </h1>
@@ -138,6 +140,7 @@ You've had:
         <span class="font-semibold text-lg">Score: {score}</span><br>
         <span class="font-semibold text-lg">Time: {time.toFixed(0)}</span>
         <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
         <img src="./santa.png" alt="santa"
             style:margin-left={iconAnimation + 'px'}
             class:grayscale={!miniGameStart}