mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance accessibility by adding roles and tabindex attributes to interactive elements

Browse Source
This commit is contained in:
kwaroran
2024-11-02 02:22:15 +09:00
parent 552c3db6a7
commit 52c6641813
3 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/Others/AlertComp.svelte
View File

@@ -90,7 +90,7 @@
{:else if $alertStore.type === 'tos'} {:else if $alertStore.type === 'tos'}
<!-- svelte-ignore a11y_missing_attribute --> <!-- svelte-ignore a11y_missing_attribute -->
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- 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') openURL('https://sv.risuai.xyz/hub/tos')
}}>Terms of Service</a> to continue</div> }}>Terms of Service</a> to continue</div>
{:else if $alertStore.type !== 'select' && $alertStore.type !== 'requestdata' && $alertStore.type !== 'addchar' && $alertStore.type !== 'hypaV2' && $alertStore.type !== 'chatOptions'} {:else if $alertStore.type !== 'select' && $alertStore.type !== 'requestdata' && $alertStore.type !== 'addchar' && $alertStore.type !== 'hypaV2' && $alertStore.type !== 'chatOptions'}
@@ -450,8 +450,9 @@
</div> </div>
{:else if $alertStore.type === 'cardexport'} {: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}> <!-- svelte-ignore a11y_click_events_have_key_events -->
<div class="bg-darkbg rounded-md p-4 max-w-full flex flex-col w-2xl" onclick={(e) => { <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() e.stopPropagation()
onclick(e) onclick(e)
}}> }}>

4
src/lib/UI/GUI/TextAreaInput.svelte
View File

@@ -88,6 +88,8 @@
}} }}
bind:this={inputDom} bind:this={inputDom}
translate="no" translate="no"
role="textbox"
tabindex="0"
>{value ?? ''}</div> >{value ?? ''}</div>
{:else} {:else}
<div <div
@@ -103,6 +105,8 @@
}} }}
bind:this={inputDom} bind:this={inputDom}
translate="no" translate="no"
role="textbox"
tabindex="0"
>{value ?? ''}</div> >{value ?? ''}</div>
{/if} {/if}
<div class="hidden absolute z-100 bg-bgcolor border border-darkborderc p-2 flex-col" bind:this={autoCompleteDom}> <div class="hidden absolute z-100 bg-bgcolor border border-darkborderc p-2 flex-col" bind:this={autoCompleteDom}>

5
src/lib/UI/Title.svelte
View File

@@ -76,6 +76,7 @@ You've had:
</script> </script>
<!-- svelte-ignore a11y_no_noninteractive_element_interactions --> <!-- 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}> <h2 class="text-4xl text-textcolor mb-0 mt-6 font-black relative" class:text-bordered={specialDay === 'newYear'} onclick={onClick}>
{#if specialDay === 'midAutumn'} {#if specialDay === 'midAutumn'}
<span class="text-amber-400">🐉RisuAI🐉</span> <span class="text-amber-400">🐉RisuAI🐉</span>
@@ -128,7 +129,8 @@ You've had:
{#if specialDay === 'anniversary'} {#if specialDay === 'anniversary'}
<h1> <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') openURL('https://risuai.net')
}}>Happy 1st Anniversary!</span> }}>Happy 1st Anniversary!</span>
</h1> </h1>
@@ -138,6 +140,7 @@ You've had:
<span class="font-semibold text-lg">Score: {score}</span><br> <span class="font-semibold text-lg">Score: {score}</span><br>
<span class="font-semibold text-lg">Time: {time.toFixed(0)}</span> <span class="font-semibold text-lg">Time: {time.toFixed(0)}</span>
<!-- svelte-ignore a11y_no_noninteractive_element_interactions --> <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<img src="./santa.png" alt="santa" <img src="./santa.png" alt="santa"
style:margin-left={iconAnimation + 'px'} style:margin-left={iconAnimation + 'px'}
class:grayscale={!miniGameStart} class:grayscale={!miniGameStart}