Accessibility settings to the app

Screen reader readable "Show Help" button.
Also added a new checkbox for accessibility settings.

src/lib/Setting/Pages/AccessibilitySettings.svelte

@@ -7,26 +7,21 @@
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.accessibility}</h2>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.askRemoval}/>
-    <span>{language.askRemoval}</span>
+    <Check bind:check={$DataBase.askRemoval} name={language.askRemoval}/>
 </div>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.swipe}/>
-    <span>{language.SwipeRegenerate}</span>
+    <Check bind:check={$DataBase.swipe} name={language.SwipeRegenerate}/>
 </div>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.instantRemove}/>
-    <span>{language.instantRemove}</span>
+    <Check bind:check={$DataBase.instantRemove} name={language.instantRemove}/>
 </div>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.sendWithEnter}/>
-    <span>{language.sendWithEnter}</span>
+    <Check bind:check={$DataBase.sendWithEnter} name={language.sendWithEnter}/>
 </div>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.clickToEdit}/>
-    <span>{language.clickToEdit}</span>
+    <Check bind:check={$DataBase.clickToEdit} name={language.clickToEdit}/>
 </div>

src/lib/Setting/Pages/AdvancedSettings.svelte

@@ -46,16 +46,13 @@
 {/if}
 
 <div class="flex items-center mt-4">
-    <Check bind:check={$DataBase.useSayNothing}/>
-    <span>{language.sayNothing}</span>
+    <Check bind:check={$DataBase.useSayNothing} name={language.sayNothing}/>
 </div>
 <div class="flex items-center mt-4">
-    <Check bind:check={$DataBase.showUnrecommended}/>
-    <span>{language.showUnrecommended}</span>
+    <Check bind:check={$DataBase.showUnrecommended} name={language.showUnrecommended}/>
 </div>
 <div class="flex items-center mt-4">
-    <Check bind:check={$DataBase.useExperimental}/>
-    <span>{language.useExperimental}</span>
+    <Check bind:check={$DataBase.useExperimental} name={language.useExperimental}/>
 </div>
 <button
     on:click={async () => {

src/lib/Setting/Pages/BotSettings.svelte

@@ -114,8 +114,7 @@
     <span class="text-neutral-200">OpenAI {language.apiKey} <Help key="oaiapikey"/></span>
     <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" placeholder="sk-XXXXXXXXXXXXXXXXXXXX" bind:value={$DataBase.openAIKey}>
     <div class="flex items-center mt-2 mb-4">
-        <Check bind:check={$DataBase.useStreaming}/>
-        <span>OpenAI {language.streaming}</span>
+        <Check bind:check={$DataBase.useStreaming} name={`OpenAI ${language.streaming}`}/>
     </div>
 {/if}
 {#if $DataBase.aiModel === 'custom'}
@@ -235,8 +234,7 @@
     </table>
 
     <div class="flex items-center mt-4">
-        <Check bind:check={$DataBase.promptPreprocess}/>
-        <span>{language.promptPreprocess}</span>
+        <Check bind:check={$DataBase.promptPreprocess} name={language.promptPreprocess}/>
     </div>
 
 <button on:click={() => {openPresetList = true}} class="mt-4 drop-shadow-lg p-3 border-borderc border-solid flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected">{language.presets}</button>

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -62,13 +62,11 @@
 <span class="text-gray-400 mb-6 text-sm">{($DataBase.iconsize)}%</span>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen}/>
-    <span>{language.fullscreen}</span>
+    <Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen} name={language.fullscreen}/>
 </div>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.showMemoryLimit}/>
-    <span>{language.showMemoryLimit}</span>
+    <Check bind:check={$DataBase.showMemoryLimit} name={language.showMemoryLimit}/>
 </div>
 
 <div class="flex items-center mt-2">
@@ -86,25 +84,23 @@
         else{
             $DataBase.customBackground = ''
         }
-    }}></Check>
-    <span>{language.useCustomBackground}</span>
+    }} name={language.useCustomBackground}></Check>
 </div>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.playMessage}/>
-    <span>{language.playMessage} <Help key="msgSound"/></span>
+    <Check bind:check={$DataBase.playMessage} name={language.playMessage}/>
+    <span> <Help key="msgSound" name={language.playMessage}/></span>
 </div>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.roundIcons}/>
-    <span>{language.roundIcons}</span>
+    <Check bind:check={$DataBase.roundIcons} name={language.roundIcons}/>
 </div>
 
 {#if $DataBase.textScreenColor}
     <div class="flex items-center mt-2">
         <Check check={true} onChange={() => {
             $DataBase.textScreenColor = null
-        }}/>
+        }} name={language.textBackgrounds} hiddenName/>
         <input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenColor} >
         <span>{language.textBackgrounds}</span>
     </div>
@@ -112,29 +108,26 @@
     <div class="flex items-center mt-2">
         <Check check={false} onChange={() => {
             $DataBase.textScreenColor = "#121212"
-        }}/>
-        <span>{language.textBackgrounds}</span>
+        }} name={language.textBackgrounds}/>
     </div>
 
 
 {/if}
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.textBorder}/>
-    <span>{language.textBorder}</span>
+    <Check bind:check={$DataBase.textBorder} name={language.textBorder}/>
 </div>
 
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.textScreenRounded}/>
-    <span>{language.textScreenRound}</span>
+    <Check bind:check={$DataBase.textScreenRounded} name={language.textScreenRound}/>
 </div>
 
 {#if $DataBase.textScreenBorder}
     <div class="flex items-center mt-2">
         <Check check={true} onChange={() => {
             $DataBase.textScreenBorder = null
-        }}/>
+        }} name={language.textScreenBorder} hiddenName/>
         <input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenBorder} >
         <span>{language.textScreenBorder}</span>
     </div>
@@ -142,12 +135,10 @@
     <div class="flex items-center mt-2">
         <Check check={false} onChange={() => {
             $DataBase.textScreenBorder = "#121212"
-        }}/>
-        <span>{language.textScreenBorder}</span>
+        }} name={language.textScreenBorder}/>
     </div>
 {/if}
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.useChatCopy}/>
-    <span>{language.useChatCopy}</span>
+    <Check bind:check={$DataBase.useChatCopy} name={language.useChatCopy}/>
 </div>

src/lib/Setting/Pages/LanguageSettings.svelte

@@ -37,14 +37,12 @@ import { changeLanguage, language } from "src/lang";
 
 {#if $DataBase.translator}
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.autoTranslate} />
-        <span>{language.autoTranslation}</span>
+        <Check bind:check={$DataBase.autoTranslate} name={language.autoTranslation}/>
     </div>
     {#if $DataBase.useExperimental}
         <div class="flex items-center mt-2">
-            <Check bind:check={$DataBase.useAutoTranslateInput} />
-            <span>{language.autoTranslateInput}</span>
-            <Help key="experimental" />
+            <Check bind:check={$DataBase.useAutoTranslateInput} name={language.autoTranslateInput}/>
+            <Help key="experimental" name={language.autoTranslateInput}/>
         </div>
     {/if}
 {/if}

src/lib/Setting/Pages/OtherBotSettings.svelte

@@ -40,8 +40,7 @@
     <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={$DataBase.sdConfig.sampler_name}>
     
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.sdConfig.enable_hr}/>
-        <span>Enable Hires</span>
+        <Check bind:check={$DataBase.sdConfig.enable_hr} name='Enable Hires'/>
     </div>
     {#if $DataBase.sdConfig.enable_hr === true}
         <span class="text-neutral-200">denoising_strength</span>