From 36546c46c9d5d93076a01a9f0c367ef5ee06fe80 Mon Sep 17 00:00:00 2001
From: Masahiko AMANO <hiko-19@ya.ru>
Date: Fri, 3 Jul 2026 10:13:43 +0300
Subject: [PATCH] fix(frontend): clear svelte-check a11y and reactivity
 warnings

- TagBadge: derive color/style so they track a changing tag prop.
- FilterBar: seed tokens from the value prop via untrack (the effect keeps
  it in sync), silencing state_referenced_locally.
- FileCard: give the interactive card role="button".
- admin user toggles: add aria-labels to the switch buttons.

svelte-check is now clean (0 errors, 0 warnings).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/lib/components/file/FileCard.svelte  | 2 ++
 frontend/src/lib/components/file/FilterBar.svelte | 5 ++++-
 frontend/src/lib/components/tag/TagBadge.svelte   | 4 ++--
 frontend/src/routes/admin/users/[id]/+page.svelte | 3 +++
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/file/FileCard.svelte b/frontend/src/lib/components/file/FileCard.svelte
index cd1dd1f..e60038b 100644
--- a/frontend/src/lib/components/file/FileCard.svelte
+++ b/frontend/src/lib/components/file/FileCard.svelte
@@ -138,6 +138,8 @@
 	class:focused
 	use:lazyload
 	data-file-index={index}
+	role="button"
+	tabindex="-1"
 	onpointerdown={onPointerDown}
 	onpointermove={onPointerMoveInternal}
 	onpointerup={() => {
diff --git a/frontend/src/lib/components/file/FilterBar.svelte b/frontend/src/lib/components/file/FilterBar.svelte
index 9d3addf..5b36d83 100644
--- a/frontend/src/lib/components/file/FilterBar.svelte
+++ b/frontend/src/lib/components/file/FilterBar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import type { Tag } from '$lib/api/types';
 	import { fetchAllTags } from '$lib/api/tags';
 	import { buildDslFilter, parseDslFilter, tokenLabel } from '$lib/utils/dsl';
@@ -16,7 +17,9 @@
 
 	let tags = $state<Tag[]>([]);
 	let search = $state('');
-	let tokens = $state<string[]>(parseDslFilter(value));
+	// Seed from the prop once; the $effect below keeps it in sync afterwards, so
+	// read it untracked to avoid the state-referenced-locally warning.
+	let tokens = $state<string[]>(untrack(() => parseDslFilter(value)));
 	let tagNames = $derived(
 		new Map(tags.filter((t) => t.id && t.name).map((t) => [t.id as string, t.name as string]))
 	);
diff --git a/frontend/src/lib/components/tag/TagBadge.svelte b/frontend/src/lib/components/tag/TagBadge.svelte
index c46d365..4804c44 100644
--- a/frontend/src/lib/components/tag/TagBadge.svelte
+++ b/frontend/src/lib/components/tag/TagBadge.svelte
@@ -13,8 +13,8 @@
 
 	let { tag, onclick, size = 'md', focused = false, index }: Props = $props();
 
-	const color = tag.color ?? tag.category_color;
-	const style = color ? `background-color: #${color}` : '';
+	let color = $derived(tag.color ?? tag.category_color);
+	let style = $derived(color ? `background-color: #${color}` : '');
 </script>
 
 {#if onclick}
diff --git a/frontend/src/routes/admin/users/[id]/+page.svelte b/frontend/src/routes/admin/users/[id]/+page.svelte
index b140a06..7c91287 100644
--- a/frontend/src/routes/admin/users/[id]/+page.svelte
+++ b/frontend/src/routes/admin/users/[id]/+page.svelte
@@ -107,6 +107,7 @@
 						class:on={isAdmin}
 						role="switch"
 						aria-checked={isAdmin}
+						aria-label="Admin"
 						onclick={() => (isAdmin = !isAdmin)}><span class="thumb"></span></button
 					>
 				</div>
@@ -121,6 +122,7 @@
 						class:on={canCreate}
 						role="switch"
 						aria-checked={canCreate}
+						aria-label="Can create"
 						onclick={() => (canCreate = !canCreate)}><span class="thumb"></span></button
 					>
 				</div>
@@ -140,6 +142,7 @@
 						class:danger={isBlocked}
 						role="switch"
 						aria-checked={isBlocked}
+						aria-label="Blocked"
 						onclick={() => (isBlocked = !isBlocked)}><span class="thumb"></span></button
 					>
 				</div>