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

fix(header): consistent icon styling, focus rings, and responsive breakpoints
Some checks failed
CI / Unit & Component Tests (push) Has been cancelled
Details
CI / Backend Unit Tests (push) Has been cancelled
Details
CI / E2E Tests (push) Has been cancelled
Details
CI / Unit & Component Tests (pull_request) Has been cancelled
Details
CI / Backend Unit Tests (pull_request) Has been cancelled
Details
CI / E2E Tests (pull_request) Has been cancelled
Details

Browse Source 
- Normalize all header icon buttons to white/65 + white/10 hover bg
- Fix guest person icon (img tag needs brightness-0 invert, not text color)
- Add missing focus-visible rings to ThemeToggle and LanguageSwitcher
- Use focus-visible:rounded on nav links so active underline stays sharp
- Bump burger/nav breakpoint from sm→lg to prevent overflow on tablets

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-30 22:54:04 +02:00
parent c905f136d2
commit 281934529e
6 changed files with 15 additions and 15 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 <button
type="button" type="button"
onclick={() => setLocale(localeMap[locale])} onclick={() => setLocale(localeMap[locale])}
class="font-sans tracking-widest transition-colors class="rounded px-1 font-sans tracking-widest transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
{activeLocale === locale {activeLocale === locale
? inverted ? inverted
? 'font-bold text-white' ? 'font-bold text-white'

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

@@ -154,7 +154,7 @@ onDestroy(() => {
: m.notification_bell_label()} : m.notification_bell_label()}
aria-expanded={open} aria-expanded={open}
aria-haspopup="true" aria-haspopup="true"
class="relative rounded-sm p-2 text-ink-2 transition-colors hover:text-ink 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-accent"
> >
<!-- Bell SVG --> <!-- Bell SVG -->
<svg <svg

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

@@ -31,12 +31,12 @@ function toggle() {
onclick={toggle} onclick={toggle}
aria-label={theme === 'dark' ? 'light mode' : 'dark mode'} aria-label={theme === 'dark' ? 'light mode' : 'dark mode'}
title={theme === 'dark' ? 'light mode' : 'dark mode'} title={theme === 'dark' ? 'light mode' : 'dark mode'}
class="rounded p-1.5 text-ink-2 transition-colors hover:bg-muted hover:text-ink" 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"
> >
{#if theme === 'dark'} {#if theme === 'dark'}
<!-- Sun icon — click to go light --> <!-- Sun icon — click to go light -->
<svg <svg
class="h-4 w-4" class="h-5 w-5"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
@@ -52,7 +52,7 @@ function toggle() {
{:else} {:else}
<!-- Moon icon — click to go dark --> <!-- Moon icon — click to go dark -->
<svg <svg
class="h-4 w-4" class="h-5 w-5"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"

2
frontend/src/routes/+layout.svelte
View File

@@ -46,7 +46,7 @@ const userInitials = $derived.by(() => {
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<!-- Language selector (desktop only — mobile lives in nav drawer) --> <!-- Language selector (desktop only — mobile lives in nav drawer) -->
<div <div
class="hidden items-center gap-1 pr-3 sm:flex [&_button]:px-1.5 [&_button]:py-1 [&_button]:text-xs" class="hidden items-center gap-1 pr-3 lg:flex [&_button]:px-1.5 [&_button]:py-1 [&_button]:text-xs"
> >
<LanguageSwitcher inverted /> <LanguageSwitcher inverted />
</div> </div>

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

@@ -38,10 +38,10 @@ function handleOverlayKeydown(event: KeyboardEvent) {
</div> </div>
<!-- Desktop nav --> <!-- Desktop nav -->
<nav class="hidden items-stretch sm:flex sm:space-x-1"> <nav class="hidden items-stretch lg:flex lg:space-x-1">
<a <a
href="/" href="/"
class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none 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-accent
{page.url.pathname === '/' || page.url.pathname.startsWith('/documents') {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
? 'border-b-2 border-accent text-white' ? 'border-b-2 border-accent text-white'
: 'text-white/55 hover:text-white/85'}" : 'text-white/55 hover:text-white/85'}"
@@ -51,7 +51,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
<a <a
href="/persons" href="/persons"
class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none 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-accent
{page.url.pathname.startsWith('/persons') {page.url.pathname.startsWith('/persons')
? 'border-b-2 border-accent text-white' ? 'border-b-2 border-accent text-white'
: 'text-white/55 hover:text-white/85'}" : 'text-white/55 hover:text-white/85'}"
@@ -61,7 +61,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
<a <a
href="/korrespondenz" href="/korrespondenz"
class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none 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-accent
{page.url.pathname.startsWith('/korrespondenz') {page.url.pathname.startsWith('/korrespondenz')
? 'border-b-2 border-accent text-white' ? 'border-b-2 border-accent text-white'
: 'text-white/55 hover:text-white/85'}" : 'text-white/55 hover:text-white/85'}"
@@ -71,7 +71,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
{#if isAdmin} {#if isAdmin}
<a <a
href="/admin" href="/admin"
class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none 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-accent
{page.url.pathname.startsWith('/admin') {page.url.pathname.startsWith('/admin')
? 'border-b-2 border-accent text-white' ? 'border-b-2 border-accent text-white'
: 'text-white/55 hover:text-white/85'}" : 'text-white/55 hover:text-white/85'}"
@@ -83,7 +83,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
<!-- Hamburger toggle (mobile only) --> <!-- Hamburger toggle (mobile only) -->
<button <button
class="ml-auto flex h-11 w-11 items-center justify-center rounded text-white/70 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent sm: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-accent lg:hidden"
aria-label={mobileNavOpen ? 'Menü schließen' : 'Menü öffnen'} aria-label={mobileNavOpen ? 'Menü schließen' : 'Menü öffnen'}
aria-expanded={mobileNavOpen} aria-expanded={mobileNavOpen}
aria-controls="mobile-nav" aria-controls="mobile-nav"
@@ -131,7 +131,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
<!-- Mobile nav overlay --> <!-- Mobile nav overlay -->
{#if mobileNavOpen} {#if mobileNavOpen}
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="fixed inset-0 top-[68px] z-40 sm:hidden" onkeydown={handleOverlayKeydown}> <div class="fixed inset-0 top-[68px] z-40 lg:hidden" onkeydown={handleOverlayKeydown}>
<!-- Backdrop --> <!-- Backdrop -->
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->

4
frontend/src/routes/UserMenu.svelte
View File

@@ -44,13 +44,13 @@ function clickOutside(node: HTMLElement) {
aria-expanded={userMenuOpen} aria-expanded={userMenuOpen}
aria-haspopup="true" aria-haspopup="true"
onclick={() => (userMenuOpen = !userMenuOpen)} onclick={() => (userMenuOpen = !userMenuOpen)}
class="inline-flex items-center gap-1.5 px-3 py-2 font-sans text-xs font-bold tracking-widest text-white/60 uppercase transition-colors hover:text-white 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-accent"
> >
<img <img
src="/degruyter-icons/Simple/Small-16px/SVG/Action/Account-SM.svg" src="/degruyter-icons/Simple/Small-16px/SVG/Action/Account-SM.svg"
alt="" alt=""
aria-hidden="true" aria-hidden="true"
class="h-4 w-4 opacity-50" class="h-5 w-5 opacity-65 brightness-0 invert transition-opacity group-hover:opacity-100"
/> />
</button> </button>
{/if} {/if}