[UX] Screenreader readable Checkbox, Help Button (#172)

# PR Checklist
- [ ] Did you check if it works normally in all models? *ignore this
when it dosen't uses models*
- [x] Did you check if it works normally in all of web, local and node
hosted versions? if it dosen't, did you blocked it in those versions?
- [x] Did you added a type def?

# Description
 - Screenreader readable "Show Help" button.
   Also modified checkbox

src/lang/cn.ts

@@ -19,6 +19,7 @@ export const languageChinese = {
         onlyOneChat: '必须至少有一次聊天',
         alreadyCharInGroup: "群组中已存在同名的角色。"
     },
+    showHelp: "显示帮助",
     help:{
         model: "模型选项是用于聊天的主要模型。",
         submodel: "辅助模型是用于分析情绪图像，自动建议等的模型。推荐使用gpt3.5。",

src/lang/en.ts

@@ -19,6 +19,7 @@ export const languageEnglish = {
         onlyOneChat: 'There must be least one chat',
         alreadyCharInGroup: "There is already a character with the same name in the group."
     },
+    showHelp: "Show Help",
     help:{
         model: "Model option is a main model used in chat.",
         submodel: "Auxiliary Model is a model that used in analizing emotion images and auto suggestions and etc. gpt3.5 is recommended.",

src/lang/ko.ts

@@ -149,6 +149,7 @@ export const languageKorean = {
     ShowLog: "리퀘스트 로그 보기",
     waifuWidth2: "Waifu 캐릭터 크기",
     sayNothing:"어떤 문자열도 입력되지 않을 시 'say nothing' 입력",
+    showHelp: "도움말 보기",
     help:{
         model: "채팅에서 사용되는 모델입니다.",
         submodel: "보조 모델은 감정 이미지, 자동 제안등을 분석하는 데 사용되는 모델입니다. gpt3.5가 권장됩니다.",

src/lib/Others/Check.svelte

@@ -4,17 +4,22 @@
     export let check = false
     export let onChange = (check) => {}
     export let margin = true
+    export let name = ''
+    export let hiddenName = false
 </script>
 
-<label class:mr-2={margin}>
-    <input type="checkbox" class="hidden" bind:checked={check} on:change={() => {
+<label title={name} class:mr-2={margin} class="flex relative">
+    <input title={name} type="checkbox" class='absolute opacity-0 w-6 h-6' bind:checked={check} on:change={() => {
         onChange(check)
-    }}>
+    }}/>
     {#if check}
         <div class="w-6 h-6 bg-green-500 flex justify-center items-center text-sm">
             <CheckIcon />
         </div>
     {:else}
-        <div class="w-6 h-6 bg-selected"></div>
+        <div class="w-6 h-6 bg-selected flex justify-center items-center text-sm"/>
     {/if}
-</label>
+    {#if name != '' && !hiddenName}
+        <span class="text-neutral-200 ml-2">{name}</span>
+    {/if}
+</label>

src/lib/Others/Help.svelte

@@ -1,8 +1,7 @@
-
-
-<button class="relative help inline-block cursor-default hover:text-green-500" on:click={() => {
+<button title={name+' '+language.showHelp} class="relative help inline-block cursor-default hover:text-green-500" on:click={() => {
     alertMd(language.help[key])
 }}>
+    
     {#if key === "experimental"}
         <div class="text-red-500 hover:text-green-500">
             <FlaskConicalIcon size={16} />
@@ -13,9 +12,8 @@
         </div>
     {:else}
         <HelpCircleIcon size={14} />
-    {/if}
+    {/if}    
 </button>
-
 <script lang="ts">
     import { AlertTriangle, FlaskConicalIcon, HelpCircleIcon } from "lucide-svelte";
     import { language } from "src/lang";
@@ -23,4 +21,5 @@
 
     export let unrecommended = false
     export let key: (keyof (typeof language.help))
+    export let name = ''
 </script>

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,20 +46,16 @@
 {/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.imageCompression}/>
-    <span>{language.imageCompression}</span>
+    <Check bind:check={$DataBase.imageCompression} name={language.imageCompression}/>
 </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>

src/lib/SideBars/CharConfig.svelte

@@ -200,21 +200,18 @@
     <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].note}></textarea>
     <span class="text-gray-400 mb-6 text-sm">{tokens.localNote} {language.tokens}</span>     
     <div class="flex mt-6 items-center">
-        <Check bind:check={$DataBase.jailbreakToggle}/>
-        <span class="text-neutral-200 ml-2">{language.jailbreakToggle}</span>
+        <Check bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle}/>
     </div>
     
     {#if $DataBase.supaMemoryType !== 'none'}
         <div class="flex mt-2 items-center">
-            <Check bind:check={currentChar.data.supaMemory}/>
-            <span class="text-neutral-200 ml-2">{language.ToggleSuperMemory}</span>
+            <Check bind:check={currentChar.data.supaMemory} name={language.ToggleSuperMemory}/>
         </div>
     {/if}
 
     {#if currentChar.type === 'group'}
         <div class="flex mt-2 items-center">
-            <Check bind:check={currentChar.data.orderByOrder}/>
-            <span class="text-neutral-200 ml-2">{language.orderByOrder}</span>
+            <Check bind:check={currentChar.data.orderByOrder} name={language.orderByOrder}/>
         </div>
     {/if}
 {:else if subMenu === 1}
@@ -517,8 +514,7 @@
         {/if}
         {#if currentChar.data.ttsMode === 'webspeech' || currentChar.data.ttsMode === 'elevenlab' || currentChar.data.ttsMode === 'VOICEVOX'}
             <div class="flex items-center mt-2">
-                <Check bind:check={currentChar.data.ttsReadOnlyQuoted}/>
-                <span>{language.ttsReadOnlyQuoted}</span>
+                <Check bind:check={currentChar.data.ttsReadOnlyQuoted} name={language.ttsReadOnlyQuoted}/>
             </div>
         {/if}
     {/if}
@@ -659,8 +655,8 @@
 
         {#if $DataBase.showUnrecommended || currentChar.data.utilityBot}
             <div class="flex items-center mt-4">
-                <Check bind:check={currentChar.data.utilityBot}/>
-                <span>{language.utilityBot} <Help key="utilityBot" unrecommended/></span>
+                <Check bind:check={currentChar.data.utilityBot} name={language.utilityBot}/>
+                <span> <Help key="utilityBot" unrecommended name={language.utilityBot}/></span>
             </div>
         {/if}
 
@@ -683,8 +679,8 @@
         {/if}
         {#if $DataBase.useExperimental}
             <div class="flex mb-2 items-center">
-                <Check bind:check={currentChar.data.useCharacterLore}/>
-                <span class="text-neutral-200 ml-2">{language.useCharLorebook} <Help key="experimental"/></span>
+                <Check bind:check={currentChar.data.useCharacterLore} name={language.useCharLorebook}/>
+                <Help key="experimental" name={language.useCharLorebook}/>
             </div>
         {/if}
     {/if}

src/lib/SideBars/LoreBookData.svelte

@@ -58,20 +58,19 @@
             <span class="text-neutral-200 mt-4">{language.prompt}</span>
             <textarea class="bg-transparent input-text mt-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={value.content}></textarea>
             <div class="flex items-center mt-4">
-                <Check bind:check={value.alwaysActive}/>
-                <span>{language.alwaysActive}</span>
+                <Check bind:check={value.alwaysActive} name={language.alwaysActive}/>
             </div>
             <div class="flex items-center mt-2">
-                <Check bind:check={value.selective}/>
-                <span>{language.selective} <Help key="loreSelective"/></span>
+                <Check bind:check={value.selective} name={language.selective}/>
+                <Help key="loreSelective" name={language.selective}/>
             </div>
             <div class="flex items-center mt-2 mb-6">
                 {#if value.activationPercent === undefined || value.activationPercent === null}
-                    <Check check={false} onChange={() => {value.activationPercent = 50}}/>
+                    <Check name={language.loreRandomActivation} check={false} onChange={() => {value.activationPercent = 50}}/>
                 {:else}
-                    <Check check={true} onChange={() => {value.activationPercent = null}}/>
+                    <Check name={language.loreRandomActivation} check={true} onChange={() => {value.activationPercent = null}}/>
                 {/if}
-                <span>{language.loreRandomActivation} <Help key="loreRandomActivation"/></span>
+                <span><Help name={language.loreRandomActivation} key="loreRandomActivation"/></span>
             </div>
         </div>
     {/if}

src/lib/SideBars/LoreBookSetting.svelte

@@ -86,12 +86,12 @@
         <div class="flex items-center mt-4">
             <Check check={false} onChange={() => {
                 $DataBase.characters[$selectedCharID].loreSettings = undefined
-            }}/>
-            <span>{language.useGlobalSettings}</span>
+            }}
+            name={language.useGlobalSettings}
+            />
         </div>
         <div class="flex items-center mt-4">
-            <Check bind:check={$DataBase.characters[$selectedCharID].loreSettings.recursiveScanning}/>
-            <span>{language.recursiveScanning}</span>
+            <Check bind:check={$DataBase.characters[$selectedCharID].loreSettings.recursiveScanning} name={language.recursiveScanning}/>
         </div>
         <span class="text-neutral-200 mt-4 mb-2">{language.loreBookDepth}</span>
         <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="20" bind:value={$DataBase.characters[$selectedCharID].loreSettings.scanDepth}>
@@ -105,8 +105,9 @@
                     scanDepth:$DataBase.loreBookDepth,
                     recursiveScanning: false
                 }
-            }}/>
-            <span>{language.useGlobalSettings}</span>
+            }}
+            name={language.useGlobalSettings}
+            />
         </div>
     {/if}
 {/if}