From a5cc8fd16e91d4f93fe5440fd716f430cefb2d5f Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 31 Mar 2026 15:25:02 +0200
Subject: [PATCH] feat(focus-rings): update interactive widgets to
 ring-focus-ring

PersonTypeahead, MentionEditor, PanelHistory, UserGroupsSection,
notifications filter buttons, CorrespondentSuggestionsDropdown:
replace ring-accent/ring-primary with ring-focus-ring

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/MentionEditor.svelte          | 2 +-
 frontend/src/lib/components/PanelHistory.svelte           | 4 ++--
 frontend/src/lib/components/PersonTypeahead.svelte        | 4 ++--
 frontend/src/lib/components/user/UserGroupsSection.svelte | 2 +-
 .../korrespondenz/CorrespondentSuggestionsDropdown.svelte | 4 ++--
 frontend/src/routes/notifications/+page.svelte            | 8 ++++----
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/MentionEditor.svelte b/frontend/src/lib/components/MentionEditor.svelte
index 3ceff6ac..a97c018f 100644
--- a/frontend/src/lib/components/MentionEditor.svelte
+++ b/frontend/src/lib/components/MentionEditor.svelte
@@ -187,7 +187,7 @@ const popupOpen = $derived(query !== null);
 <div class="relative">
 	<textarea
 		{@attach attachTextarea}
-		class="w-full resize-none rounded border border-line px-3 py-2 font-serif text-sm text-ink focus:ring-1 focus:ring-accent focus:outline-none"
+		class="w-full resize-none rounded border border-line px-3 py-2 font-serif text-sm text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		rows={rows}
 		placeholder={placeholder}
 		disabled={disabled}
diff --git a/frontend/src/lib/components/PanelHistory.svelte b/frontend/src/lib/components/PanelHistory.svelte
index 601de3bd..2be6f7aa 100644
--- a/frontend/src/lib/components/PanelHistory.svelte
+++ b/frontend/src/lib/components/PanelHistory.svelte
@@ -302,7 +302,7 @@ $effect(() => {
 					<select
 						id="compare-a"
 						bind:value={compareA}
-						class="w-full rounded border border-line bg-surface px-2 py-1 font-sans text-xs text-ink focus:ring-1 focus:ring-accent focus:outline-none"
+						class="w-full rounded border border-line bg-surface px-2 py-1 font-sans text-xs text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					>
 						<option value="">—</option>
 						{#each versions as v, i (v.id)}
@@ -317,7 +317,7 @@ $effect(() => {
 					<select
 						id="compare-b"
 						bind:value={compareB}
-						class="w-full rounded border border-line bg-surface px-2 py-1 font-sans text-xs text-ink focus:ring-1 focus:ring-accent focus:outline-none"
+						class="w-full rounded border border-line bg-surface px-2 py-1 font-sans text-xs text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					>
 						<option value="">—</option>
 						{#each versions as v, i (v.id)}
diff --git a/frontend/src/lib/components/PersonTypeahead.svelte b/frontend/src/lib/components/PersonTypeahead.svelte
index 3be05bc0..c17c1e81 100644
--- a/frontend/src/lib/components/PersonTypeahead.svelte
+++ b/frontend/src/lib/components/PersonTypeahead.svelte
@@ -154,8 +154,8 @@ function clickOutside(node: HTMLElement) {
 		onfocus={handleFocus}
 		placeholder={placeholder ?? m.comp_typeahead_placeholder()}
 		class={compact
-			? 'mt-1 block h-9 w-full rounded border border-line bg-surface px-2 text-sm text-ink placeholder:text-ink-3 focus:border-primary focus:outline-none'
-			: 'mt-1 block w-full rounded-md border border-line bg-surface p-2 text-ink shadow-sm placeholder:text-ink-3 focus:border-accent focus:ring-accent'}
+			? 'mt-1 block h-9 w-full rounded border border-line bg-surface px-2 text-sm text-ink placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'
+			: 'mt-1 block w-full rounded-md border border-line bg-surface p-2 text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'}
 	/>
 
 	{#if showDropdown && (results.length > 0 || loading)}
diff --git a/frontend/src/lib/components/user/UserGroupsSection.svelte b/frontend/src/lib/components/user/UserGroupsSection.svelte
index 760989f1..590c3295 100644
--- a/frontend/src/lib/components/user/UserGroupsSection.svelte
+++ b/frontend/src/lib/components/user/UserGroupsSection.svelte
@@ -18,7 +18,7 @@ let selected = $derived([...selectedGroupIds]);
 				name="groupIds"
 				value={group.id}
 				bind:group={selected}
-				class="rounded border-line text-ink focus:ring-accent"
+				class="rounded border-line text-ink focus:ring-focus-ring"
 			/>
 			{group.name}
 		</label>
diff --git a/frontend/src/routes/korrespondenz/CorrespondentSuggestionsDropdown.svelte b/frontend/src/routes/korrespondenz/CorrespondentSuggestionsDropdown.svelte
index 5a49a092..a28473ff 100644
--- a/frontend/src/routes/korrespondenz/CorrespondentSuggestionsDropdown.svelte
+++ b/frontend/src/routes/korrespondenz/CorrespondentSuggestionsDropdown.svelte
@@ -78,7 +78,7 @@ function getInitials(person: Correspondent): string {
 				role="option"
 				aria-selected="false"
 				tabindex="0"
-				class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-ink hover:bg-muted focus:bg-muted focus:outline-none"
+				class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-ink hover:bg-muted focus:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset"
 				onclick={() => onselect(person.id)}
 				onkeydown={(e) => e.key === 'Enter' && onselect(person.id)}
 			>
@@ -103,7 +103,7 @@ function getInitials(person: Correspondent): string {
 		role="option"
 		aria-selected="false"
 		tabindex="0"
-		class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-ink hover:bg-muted focus:bg-muted focus:outline-none"
+		class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-ink hover:bg-muted focus:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset"
 		onclick={() => onselect('')}
 		onkeydown={(e) => e.key === 'Enter' && onselect('')}
 	>
diff --git a/frontend/src/routes/notifications/+page.svelte b/frontend/src/routes/notifications/+page.svelte
index 9d750773..42a35391 100644
--- a/frontend/src/routes/notifications/+page.svelte
+++ b/frontend/src/routes/notifications/+page.svelte
@@ -111,7 +111,7 @@ function typeBadgeLabel(type: NotificationItem['type']): string {
 				aria-checked={activeType === null && activeReadFilter === null}
 				onclick={() => setFilter({ type: null, read: null })}
 				class={[
-					'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2',
+					'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2',
 					activeType === null && activeReadFilter === null
 						? 'bg-primary text-primary-fg'
 						: 'bg-muted text-ink'
@@ -126,7 +126,7 @@ function typeBadgeLabel(type: NotificationItem['type']): string {
 				aria-checked={activeReadFilter === 'false'}
 				onclick={() => setFilter({ read: 'false', type: null })}
 				class={[
-					'inline-flex items-center gap-1.5 rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2',
+					'inline-flex items-center gap-1.5 rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2',
 					activeReadFilter === 'false'
 						? 'bg-primary text-primary-fg'
 						: 'bg-muted text-ink'
@@ -149,7 +149,7 @@ function typeBadgeLabel(type: NotificationItem['type']): string {
 				aria-checked={activeType === 'MENTION'}
 				onclick={() => setFilter({ type: 'MENTION', read: null })}
 				class={[
-					'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2',
+					'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2',
 					activeType === 'MENTION'
 						? 'bg-primary text-primary-fg'
 						: 'bg-muted text-ink'
@@ -164,7 +164,7 @@ function typeBadgeLabel(type: NotificationItem['type']): string {
 				aria-checked={activeType === 'REPLY'}
 				onclick={() => setFilter({ type: 'REPLY', read: null })}
 				class={[
-					'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2',
+					'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2',
 					activeType === 'REPLY'
 						? 'bg-primary text-primary-fg'
 						: 'bg-muted text-ink'