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

fix(header): address PR review blockers

Browse Source 
- AuthHeader: remove duplicated locale logic, use <LanguageSwitcher inverted />
- Fix text-white/55 → text-white/70 in AppNav and LanguageSwitcher (WCAG AA)
- E2E: add axe accessibility checks, replace [data-hydrated] with role selectors,
  add 768px hamburger test and BRAND_NAVY comment

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-31 09:37:24 +02:00
parent 281934529e
commit 53038dea68
4 changed files with 55 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,7 +18,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
? 'font-bold text-white'
: 'font-bold text-ink'
: inverted
? 'font-normal text-white/55 hover:text-white/85'
? 'font-normal text-white/70 hover:text-white'
: 'font-normal text-ink-3 hover:text-ink'}"
>
{locale}

8
frontend/src/routes/AppNav.svelte
View File

@@ -44,7 +44,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
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
{page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
? 'border-b-2 border-accent text-white'
: 'text-white/55 hover:text-white/85'}"
: 'text-white/70 hover:text-white'}"
>
{m.nav_documents()}
</a>
@@ -54,7 +54,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
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
{page.url.pathname.startsWith('/persons')
? 'border-b-2 border-accent text-white'
: 'text-white/55 hover:text-white/85'}"
: 'text-white/70 hover:text-white'}"
>
{m.nav_persons()}
</a>
@@ -64,7 +64,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
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
{page.url.pathname.startsWith('/korrespondenz')
? 'border-b-2 border-accent text-white'
: 'text-white/55 hover:text-white/85'}"
: 'text-white/70 hover:text-white'}"
>
{m.nav_conversations()}
</a>
@@ -74,7 +74,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
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
{page.url.pathname.startsWith('/admin')
? 'border-b-2 border-accent text-white'
: 'text-white/55 hover:text-white/85'}"
: 'text-white/70 hover:text-white'}"
>
{m.nav_admin()}
</a>

19
frontend/src/routes/AuthHeader.svelte
View File

@@ -1,9 +1,5 @@
<script lang="ts">
import { setLocale, getLocale } from '$lib/paraglide/runtime';
const locales = ['DE', 'EN', 'ES'] as const;
const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
const activeLocale = $derived(getLocale().toUpperCase());
import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
</script>
<header class="bg-brand-navy">
@@ -16,18 +12,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
>
</a>
<div class="flex items-center gap-1">
{#each locales as locale (locale)}
<button
type="button"
onclick={() => setLocale(localeMap[locale])}
class="px-1.5 py-1 font-sans text-xs tracking-widest transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
{activeLocale === locale
? 'font-bold text-white'
: 'font-normal text-white/55 hover:text-white/85'}"
>
{locale}
</button>
{/each}
<LanguageSwitcher inverted />
</div>
</div>
</div>