Chore: Patch all Svelte-Warnings & Add Aria-Labels

This commit is contained in:
Youwes09
2026-05-01 00:38:15 -05:00
parent 1801fecdbb
commit a71cc719ba
23 changed files with 77 additions and 66 deletions
@@ -139,8 +139,8 @@
<svelte:window onkeydown={onKey} />
<div class="backdrop" role="presentation" onclick={onClose} onkeydown={(e) => e.key === "Escape" && onClose()}>
<div class="shell" role="dialog" aria-label="Theme editor" tabindex="0" style={toCssVars(tokens)} onclick={(e) => e.stopPropagation()}>
<div class="backdrop" role="button" tabindex="-1" aria-label="Close theme editor" onclick={onClose} onkeydown={(e) => e.key === "Escape" && onClose()}>
<div class="shell" role="dialog" aria-label="Theme editor" tabindex="0" style={toCssVars(tokens)} onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
<header class="header">
<div class="header-left">
@@ -32,8 +32,8 @@
mountSystemThemeSync();
}
let triggerDark: HTMLButtonElement;
let triggerLight: HTMLButtonElement;
let triggerDark = $state<HTMLButtonElement>(null!);
let triggerLight = $state<HTMLButtonElement>(null!);
</script>
<div class="s-panel">
@@ -49,6 +49,7 @@
class:on={store.settings.systemThemeSync}
onclick={toggleSync}
role="switch"
aria-label="Match system theme"
aria-checked={store.settings.systemThemeSync}
><span class="s-toggle-thumb"></span></button>
</div>
@@ -11,7 +11,7 @@
let { selectOpen, closingSelect, toggleSelect, anims }: Props = $props();
let triggerIdleTimeout: HTMLButtonElement;
let triggerIdleTimeout = $state<HTMLButtonElement>(null!);
</script>
<div class="s-panel">
@@ -11,7 +11,7 @@
let { selectOpen, toggleSelect, anims }: Props = $props();
let triggerSortDir: HTMLButtonElement;
let triggerSortDir = $state<HTMLButtonElement>(null!);
</script>
<div class="s-panel">
@@ -11,9 +11,9 @@
let { selectOpen, toggleSelect, anims }: Props = $props();
let triggerPageStyle: HTMLButtonElement;
let triggerReadingDir: HTMLButtonElement;
let triggerFitMode: HTMLButtonElement;
let triggerPageStyle = $state<HTMLButtonElement>(null!);
let triggerReadingDir = $state<HTMLButtonElement>(null!);
let triggerFitMode = $state<HTMLButtonElement>(null!);
</script>
<div class="s-panel">
@@ -200,7 +200,7 @@
<div class="s-row-info"><span class="s-label">Password</span></div>
<div class="s-field-wrap">
<input class="s-input" type={showAuthPass ? "text" : "password"} bind:value={authPassword} placeholder="Password" autocomplete="off" spellcheck="false" disabled={secLoading} />
<button class="s-eye-btn" onclick={() => showAuthPass = !showAuthPass} tabindex="-1">{@html showAuthPass ? EyeClose : EyeOpen}</button>
<button class="s-eye-btn" onclick={() => showAuthPass = !showAuthPass} tabindex="-1" aria-label={showAuthPass ? "Hide password" : "Show password"}>{@html showAuthPass ? EyeClose : EyeOpen}</button>
</div>
</div>
{/if}
@@ -236,7 +236,7 @@
<div class="s-section-body">
<label class="s-row">
<div class="s-row-info"><span class="s-label">Enable SOCKS proxy</span><span class="s-desc">Route Suwayomi traffic through a SOCKS4/5 proxy</span></div>
<button role="switch" aria-checked={socksEnabled} class="s-toggle" class:on={socksEnabled}
<button role="switch" aria-checked={socksEnabled} aria-label="Enable SOCKS proxy" class="s-toggle" class:on={socksEnabled}
onclick={() => { socksEnabled = !socksEnabled; saveSocksProxy(); }}><span class="s-toggle-thumb"></span></button>
</label>
{#if socksEnabled}
@@ -272,7 +272,7 @@
<div class="s-row-info"><span class="s-label">Password</span><span class="s-desc">Optional</span></div>
<div class="s-field-wrap">
<input class="s-input" type={showSocksPass ? "text" : "password"} bind:value={socksPassword} placeholder="Password" autocomplete="off" spellcheck="false" />
<button class="s-eye-btn" onclick={() => showSocksPass = !showSocksPass} tabindex="-1">{@html showSocksPass ? EyeClose : EyeOpen}</button>
<button class="s-eye-btn" onclick={() => showSocksPass = !showSocksPass} tabindex="-1" aria-label={showSocksPass ? "Hide password" : "Show password"}>{@html showSocksPass ? EyeClose : EyeOpen}</button>
</div>
</div>
<div class="s-row">
@@ -290,7 +290,7 @@
<div class="s-section-body">
<label class="s-row">
<div class="s-row-info"><span class="s-label">Enable FlareSolverr</span><span class="s-desc">Bypass Cloudflare challenges for sources that require it</span></div>
<button role="switch" aria-checked={flareEnabled} class="s-toggle" class:on={flareEnabled}
<button role="switch" aria-checked={flareEnabled} aria-label="Enable FlareSolverr" class="s-toggle" class:on={flareEnabled}
onclick={() => { flareEnabled = !flareEnabled; saveFlareSolverr(); }}><span class="s-toggle-thumb"></span></button>
</label>
{#if flareEnabled}
@@ -320,7 +320,7 @@
</div>
<label class="s-row">
<div class="s-row-info"><span class="s-label">Response fallback</span><span class="s-desc">Use FlareSolverr's response when the direct request fails</span></div>
<button role="switch" aria-checked={flareFallback} class="s-toggle" class:on={flareFallback}
<button role="switch" aria-checked={flareFallback} aria-label="Response fallback" class="s-toggle" class:on={flareFallback}
onclick={() => flareFallback = !flareFallback}><span class="s-toggle-thumb"></span></button>
</label>
<div class="s-row">
@@ -210,7 +210,7 @@
</div>
<button class="s-toggle" class:on={store.settings.trackerSyncBack}
onclick={() => updateSettings({ trackerSyncBack: !store.settings.trackerSyncBack })}
role="switch" aria-checked={store.settings.trackerSyncBack}>
role="switch" aria-checked={store.settings.trackerSyncBack} aria-label="Enable sync back">
<span class="s-toggle-thumb"></span>
</button>
</div>
@@ -221,7 +221,7 @@
<span class="s-label">Chapter number tolerance</span>
<span class="s-desc">Allow source and tracker chapter numbers to differ by up to the set amount. When off, the tracker number is used as-is with no range check.</span>
</div>
<button role="switch" aria-checked={store.settings.trackerSyncBackThreshold !== null} class="s-toggle" class:on={store.settings.trackerSyncBackThreshold !== null}
<button role="switch" aria-checked={store.settings.trackerSyncBackThreshold !== null} aria-label="Chapter number tolerance" class="s-toggle" class:on={store.settings.trackerSyncBackThreshold !== null}
onclick={() => updateSettings({ trackerSyncBackThreshold: store.settings.trackerSyncBackThreshold !== null ? null : 20 })}>
<span class="s-toggle-thumb"></span>
</button>
@@ -244,7 +244,7 @@
</div>
<button class="s-toggle" class:on={store.settings.trackerRespectScanlatorFilter}
onclick={() => updateSettings({ trackerRespectScanlatorFilter: !store.settings.trackerRespectScanlatorFilter })}
role="switch" aria-checked={store.settings.trackerRespectScanlatorFilter}>
role="switch" aria-checked={store.settings.trackerRespectScanlatorFilter} aria-label="Respect scanlator filter">
<span class="s-toggle-thumb"></span>
</button>
</div>