From f04e4ffa8b36616a79bffa8a31682093818fb993 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 31 Mar 2026 15:15:06 +0200
Subject: [PATCH] feat(focus-rings): update header/nav components to
 ring-focus-ring
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ThemeToggle, NotificationBell, LanguageSwitcher, UserMenu, AppNav:
replace focus-visible:ring-accent → focus-visible:ring-focus-ring

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/LanguageSwitcher.svelte |  2 +-
 .../src/lib/components/NotificationBell.svelte |  2 +-
 frontend/src/lib/components/ThemeToggle.svelte |  2 +-
 frontend/src/routes/AppNav.svelte              | 18 +++++++++---------
 frontend/src/routes/UserMenu.svelte            |  4 ++--
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lib/components/LanguageSwitcher.svelte b/frontend/src/lib/components/LanguageSwitcher.svelte
index 314fb54c..187944af 100644
--- a/frontend/src/lib/components/LanguageSwitcher.svelte
+++ b/frontend/src/lib/components/LanguageSwitcher.svelte
@@ -12,7 +12,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 	<button
 		type="button"
 		onclick={() => setLocale(localeMap[locale])}
-		class="rounded px-1 font-sans tracking-widest transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
+		class="rounded px-1 font-sans tracking-widest transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring
                {activeLocale === locale
 			? inverted
 				? 'font-bold text-white'
diff --git a/frontend/src/lib/components/NotificationBell.svelte b/frontend/src/lib/components/NotificationBell.svelte
index 30219dce..d21ae303 100644
--- a/frontend/src/lib/components/NotificationBell.svelte
+++ b/frontend/src/lib/components/NotificationBell.svelte
@@ -154,7 +154,7 @@ onDestroy(() => {
 			: m.notification_bell_label()}
 		aria-expanded={open}
 		aria-haspopup="true"
-		class="relative rounded-sm p-2 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+		class="relative rounded-sm p-2 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 	>
 		<!-- Bell SVG -->
 		<svg
diff --git a/frontend/src/lib/components/ThemeToggle.svelte b/frontend/src/lib/components/ThemeToggle.svelte
index dd749944..012fd670 100644
--- a/frontend/src/lib/components/ThemeToggle.svelte
+++ b/frontend/src/lib/components/ThemeToggle.svelte
@@ -31,7 +31,7 @@ function toggle() {
 	onclick={toggle}
 	aria-label={theme === 'dark' ? 'light mode' : 'dark mode'}
 	title={theme === 'dark' ? 'light mode' : 'dark mode'}
-	class="rounded p-1.5 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+	class="rounded p-1.5 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 >
 	{#if theme === 'dark'}
 		<!-- Sun icon — click to go light -->
diff --git a/frontend/src/routes/AppNav.svelte b/frontend/src/routes/AppNav.svelte
index 32fce2e3..4fe77704 100644
--- a/frontend/src/routes/AppNav.svelte
+++ b/frontend/src/routes/AppNav.svelte
@@ -41,7 +41,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 	<nav class="hidden items-stretch lg:flex lg:space-x-1">
 		<a
 			href="/"
-			class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-accent
+			class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
                    {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
 				? 'border-b-2 border-accent text-white'
 				: 'text-white/70 hover:text-white'}"
@@ -51,7 +51,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 
 		<a
 			href="/persons"
-			class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-accent
+			class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
                    {page.url.pathname.startsWith('/persons')
 				? 'border-b-2 border-accent text-white'
 				: 'text-white/70 hover:text-white'}"
@@ -61,7 +61,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 
 		<a
 			href="/korrespondenz"
-			class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-accent
+			class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
                    {page.url.pathname.startsWith('/korrespondenz')
 				? 'border-b-2 border-accent text-white'
 				: 'text-white/70 hover:text-white'}"
@@ -71,7 +71,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 		{#if isAdmin}
 			<a
 				href="/admin"
-				class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-accent
+				class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
                    {page.url.pathname.startsWith('/admin')
 					? 'border-b-2 border-accent text-white'
 					: 'text-white/70 hover:text-white'}"
@@ -83,7 +83,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 
 	<!-- Hamburger toggle (mobile only) -->
 	<button
-		class="ml-auto flex h-11 w-11 items-center justify-center self-center rounded text-white/70 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent lg:hidden"
+		class="ml-auto flex h-11 w-11 items-center justify-center self-center rounded text-white/70 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring lg:hidden"
 		aria-label={mobileNavOpen ? 'Menü schließen' : 'Menü öffnen'}
 		aria-expanded={mobileNavOpen}
 		aria-controls="mobile-nav"
@@ -142,7 +142,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 			<nav id="mobile-nav">
 				<a
 					href="/"
-					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset
+					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
                            {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
 						? 'bg-accent-bg text-ink'
 						: 'text-ink-2 hover:bg-muted hover:text-ink'}"
@@ -152,7 +152,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 
 				<a
 					href="/persons"
-					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset
+					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
                            {page.url.pathname.startsWith('/persons')
 						? 'bg-accent-bg text-ink'
 						: 'text-ink-2 hover:bg-muted hover:text-ink'}"
@@ -162,7 +162,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 
 				<a
 					href="/korrespondenz"
-					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset
+					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
                            {page.url.pathname.startsWith('/korrespondenz')
 						? 'bg-accent-bg text-ink'
 						: 'text-ink-2 hover:bg-muted hover:text-ink'}"
@@ -173,7 +173,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 				{#if isAdmin}
 					<a
 						href="/admin"
-						class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset
+						class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
                                {page.url.pathname.startsWith('/admin')
 							? 'bg-accent-bg text-ink'
 							: 'text-ink-2 hover:bg-muted hover:text-ink'}"
diff --git a/frontend/src/routes/UserMenu.svelte b/frontend/src/routes/UserMenu.svelte
index 5f3dc746..7ab2b37b 100644
--- a/frontend/src/routes/UserMenu.svelte
+++ b/frontend/src/routes/UserMenu.svelte
@@ -33,7 +33,7 @@ function clickOutside(node: HTMLElement) {
 			aria-expanded={userMenuOpen}
 			aria-haspopup="true"
 			onclick={() => (userMenuOpen = !userMenuOpen)}
-			class="flex h-8 w-8 items-center justify-center rounded-full bg-white font-sans text-xs font-bold text-brand-navy transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+			class="flex h-8 w-8 items-center justify-center rounded-full bg-white font-sans text-xs font-bold text-brand-navy transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		>
 			{userInitials}
 		</button>
@@ -44,7 +44,7 @@ function clickOutside(node: HTMLElement) {
 			aria-expanded={userMenuOpen}
 			aria-haspopup="true"
 			onclick={() => (userMenuOpen = !userMenuOpen)}
-			class="group rounded-sm p-2 transition-colors hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+			class="group rounded-sm p-2 transition-colors hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		>
 			<img
 				src="/degruyter-icons/Simple/Small-16px/SVG/Action/Account-SM.svg"