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

fix(stammbaum): 44x44 touch targets for panel + affordance icon buttons (#692)

Browse Source 
Enlarge the centre-on-person, panel-close, and affordance-dismiss icon buttons
to 44x44 hit areas (WCAG 2.5.8, UX review) while keeping the small glyphs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-29 19:00:58 +02:00
parent 8f836dfefb
commit 0306023610
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/person/genealogy/StammbaumAffordance.svelte
View File

@@ -72,7 +72,7 @@ $effect(() => {
type="button" type="button"
onclick={hide} onclick={hide}
aria-label={m.stammbaum_affordance_dismiss()} aria-label={m.stammbaum_affordance_dismiss()}
class="rounded-sm p-0.5 text-ink-3 transition hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none" class="-my-2 inline-flex h-11 w-11 items-center justify-center rounded-sm text-ink-3 transition hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none"
> >
<svg <svg
class="h-3.5 w-3.5" class="h-3.5 w-3.5"

4
frontend/src/lib/person/genealogy/StammbaumSidePanel.svelte
View File

@@ -103,7 +103,7 @@ const topDerived = $derived(
type="button" type="button"
onclick={onCentre} onclick={onCentre}
aria-label={m.stammbaum_centre_on_person()} aria-label={m.stammbaum_centre_on_person()}
class="rounded-sm p-1 text-ink-3 transition hover:bg-muted hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none" class="inline-flex h-11 w-11 items-center justify-center rounded-sm text-ink-3 transition hover:bg-muted hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none"
> >
<svg <svg
class="h-4 w-4" class="h-4 w-4"
@@ -122,7 +122,7 @@ const topDerived = $derived(
type="button" type="button"
onclick={onClose} onclick={onClose}
aria-label={m.comp_dismiss()} aria-label={m.comp_dismiss()}
class="rounded-sm p-1 text-ink-3 transition hover:bg-muted hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none" class="inline-flex h-11 w-11 items-center justify-center rounded-sm text-ink-3 transition hover:bg-muted hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none"
> >
<svg <svg
class="h-4 w-4" class="h-4 w-4"