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

fix(stammbaum): WCAG min font-size and 44px touch targets

Browse Source 
Raise chip labels from 10px to 12px (text-xs) in StammbaumCard,
StammbaumSidePanel and StammbaumTree SVG text. Widen zoom buttons
from 32px to 44px for senior-audience touch targets.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-28 10:26:56 +02:00
committed by marcel
parent d27fed3c35
commit 1d14c32c23
4 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/lib/components/StammbaumCard.svelte
View File

@@ -188,7 +188,7 @@ function resetAddForm() {
{#each sortedDirect as rel (rel.id)} {#each sortedDirect as rel (rel.id)}
<li class="flex items-center gap-2 py-2"> <li class="flex items-center gap-2 py-2">
<span <span
class="inline-flex shrink-0 items-center rounded-full border border-accent/40 bg-accent/15 px-2 py-0.5 font-sans text-[10px] font-bold tracking-widest text-ink uppercase" class="inline-flex shrink-0 items-center rounded-full border border-accent/40 bg-accent/15 px-2 py-0.5 font-sans text-xs font-bold tracking-widest text-ink uppercase"
> >
{chipLabel(rel)} {chipLabel(rel)}
</span> </span>
@@ -350,7 +350,7 @@ function resetAddForm() {
{#each topDerived as derived (derived.person.id)} {#each topDerived as derived (derived.person.id)}
<li class="flex items-center gap-2"> <li class="flex items-center gap-2">
<span <span
class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted/50 px-2 py-0.5 font-sans text-[10px] font-bold tracking-widest text-ink-2 uppercase" class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted/50 px-2 py-0.5 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
> >
{inferredRelationshipLabel(derived.label)} {inferredRelationshipLabel(derived.label)}
</span> </span>

4
frontend/src/lib/components/StammbaumSidePanel.svelte
View File

@@ -192,7 +192,7 @@ const topDerived = $derived(
{#each directRels as rel (rel.id)} {#each directRels as rel (rel.id)}
<li class="flex items-center gap-2"> <li class="flex items-center gap-2">
<span <span
class="inline-flex shrink-0 items-center rounded-full border border-accent/40 bg-accent/15 px-2 py-0.5 font-sans text-[10px] font-bold tracking-widest text-ink uppercase" class="inline-flex shrink-0 items-center rounded-full border border-accent/40 bg-accent/15 px-2 py-0.5 font-sans text-xs font-bold tracking-widest text-ink uppercase"
> >
{chipLabel(rel)} {chipLabel(rel)}
</span> </span>
@@ -300,7 +300,7 @@ const topDerived = $derived(
{#each topDerived as derived (derived.person.id)} {#each topDerived as derived (derived.person.id)}
<li class="flex items-center gap-2"> <li class="flex items-center gap-2">
<span <span
class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted/50 px-2 py-0.5 font-sans text-[10px] font-bold tracking-widest text-ink-2 uppercase" class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted/50 px-2 py-0.5 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
> >
{inferredRelationshipLabel(derived.label)} {inferredRelationshipLabel(derived.label)}
</span> </span>

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

@@ -518,7 +518,7 @@ const parentLinks = $derived.by<ParentLinks>(() => {
y={NODE_H / 2 + 12} y={NODE_H / 2 + 12}
text-anchor="middle" text-anchor="middle"
font-family="sans-serif" font-family="sans-serif"
font-size="10" font-size="12"
fill={isSelected ? 'var(--c-primary-fg)' : 'var(--c-ink-3)'} fill={isSelected ? 'var(--c-primary-fg)' : 'var(--c-ink-3)'}
opacity={isSelected ? 0.75 : 1} opacity={isSelected ? 0.75 : 1}
> >

4
frontend/src/routes/stammbaum/+page.svelte
View File

@@ -49,7 +49,7 @@ function zoomOut() {
type="button" type="button"
onclick={zoomOut} onclick={zoomOut}
aria-label={m.stammbaum_zoom_out()} aria-label={m.stammbaum_zoom_out()}
class="inline-flex h-8 w-8 items-center justify-center rounded-sm border border-line bg-surface text-ink-2 transition hover:bg-muted" class="inline-flex h-11 w-11 items-center justify-center rounded-sm border border-line bg-surface text-ink-2 transition hover:bg-muted"
> >
− −
</button> </button>
@@ -57,7 +57,7 @@ function zoomOut() {
type="button" type="button"
onclick={zoomIn} onclick={zoomIn}
aria-label={m.stammbaum_zoom_in()} aria-label={m.stammbaum_zoom_in()}
class="inline-flex h-8 w-8 items-center justify-center rounded-sm border border-line bg-surface text-ink-2 transition hover:bg-muted" class="inline-flex h-11 w-11 items-center justify-center rounded-sm border border-line bg-surface text-ink-2 transition hover:bg-muted"
> >
+ +
</button> </button>