marcel/familienarchiv
1
0
Fork 0
Code Issues 110 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 <button
type="button" type="button"
onclick={() => setLocale(localeMap[locale])} 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 {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-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 --> <!-- Bell SVG -->
<svg <svg

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

@@ -31,7 +31,7 @@ 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-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'} {#if theme === 'dark'}
<!-- Sun icon — click to go light --> <!-- Sun icon — click to go light -->

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

@@ -41,7 +41,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
<nav class="hidden items-stretch lg:flex lg:space-x-1"> <nav class="hidden items-stretch lg:flex lg:space-x-1">
<a <a
href="/" 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') {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
? 'border-b-2 border-accent text-white' ? 'border-b-2 border-accent text-white'
: 'text-white/70 hover:text-white'}" : 'text-white/70 hover:text-white'}"
@@ -51,7 +51,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
<a <a
href="/persons" 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') {page.url.pathname.startsWith('/persons')
? 'border-b-2 border-accent text-white' ? 'border-b-2 border-accent text-white'
: 'text-white/70 hover:text-white'}" : 'text-white/70 hover:text-white'}"
@@ -61,7 +61,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
<a <a
href="/korrespondenz" 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') {page.url.pathname.startsWith('/korrespondenz')
? 'border-b-2 border-accent text-white' ? 'border-b-2 border-accent text-white'
: 'text-white/70 hover:text-white'}" : 'text-white/70 hover:text-white'}"
@@ -71,7 +71,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
{#if isAdmin} {#if isAdmin}
<a <a
href="/admin" 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') {page.url.pathname.startsWith('/admin')
? 'border-b-2 border-accent text-white' ? 'border-b-2 border-accent text-white'
: 'text-white/70 hover:text-white'}" : 'text-white/70 hover:text-white'}"
@@ -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 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-label={mobileNavOpen ? 'Menü schließen' : 'Menü öffnen'}
aria-expanded={mobileNavOpen} aria-expanded={mobileNavOpen}
aria-controls="mobile-nav" aria-controls="mobile-nav"
@@ -142,7 +142,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
<nav id="mobile-nav"> <nav id="mobile-nav">
<a <a
href="/" 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') {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
? 'bg-accent-bg text-ink' ? 'bg-accent-bg text-ink'
: 'text-ink-2 hover:bg-muted hover:text-ink'}" : 'text-ink-2 hover:bg-muted hover:text-ink'}"
@@ -152,7 +152,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
<a <a
href="/persons" 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') {page.url.pathname.startsWith('/persons')
? 'bg-accent-bg text-ink' ? 'bg-accent-bg text-ink'
: 'text-ink-2 hover:bg-muted hover:text-ink'}" : 'text-ink-2 hover:bg-muted hover:text-ink'}"
@@ -162,7 +162,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
<a <a
href="/korrespondenz" 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') {page.url.pathname.startsWith('/korrespondenz')
? 'bg-accent-bg text-ink' ? 'bg-accent-bg text-ink'
: 'text-ink-2 hover:bg-muted hover:text-ink'}" : 'text-ink-2 hover:bg-muted hover:text-ink'}"
@@ -173,7 +173,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
{#if isAdmin} {#if isAdmin}
<a <a
href="/admin" 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') {page.url.pathname.startsWith('/admin')
? 'bg-accent-bg text-ink' ? 'bg-accent-bg text-ink'
: 'text-ink-2 hover:bg-muted hover:text-ink'}" : 'text-ink-2 hover:bg-muted hover:text-ink'}"

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

@@ -33,7 +33,7 @@ function clickOutside(node: HTMLElement) {
aria-expanded={userMenuOpen} aria-expanded={userMenuOpen}
aria-haspopup="true" aria-haspopup="true"
onclick={() => (userMenuOpen = !userMenuOpen)} 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} {userInitials}
</button> </button>
@@ -44,7 +44,7 @@ function clickOutside(node: HTMLElement) {
aria-expanded={userMenuOpen} aria-expanded={userMenuOpen}
aria-haspopup="true" aria-haspopup="true"
onclick={() => (userMenuOpen = !userMenuOpen)} 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 <img
src="/degruyter-icons/Simple/Small-16px/SVG/Action/Account-SM.svg" src="/degruyter-icons/Simple/Small-16px/SVG/Action/Account-SM.svg"