marcel/familienarchiv
1
0
Fork 0
Code Issues 114 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(focus-rings): update header/nav components to ring-focus-ring

Browse Source 
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>
This commit is contained in:
Marcel
2026-03-31 15:15:06 +02:00
parent 17889df220
commit f04e4ffa8b
5 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/components/LanguageSwitcher.svelte
View File

@@ -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'

2
frontend/src/lib/components/NotificationBell.svelte
View File

@@ -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

2
frontend/src/lib/components/ThemeToggle.svelte
View File

@@ -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 -->