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

fix(journey-item-row): raise move buttons to WCAG 2.2 44px touch target

Browse Source 
Both move-up and move-down buttons had inline style="min-height: 22px"
which is below the WCAG 2.2 success criterion 2.5.8 (44×44 CSS pixels
minimum). Replaced with Tailwind min-h-[44px] min-w-[44px] classes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-09 14:44:31 +02:00
parent 573e5c43d7
commit dd917460b0
1 changed files with 2 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/lib/geschichte/JourneyItemRow.svelte
View File

@@ -86,8 +86,7 @@ function handleRemoveClick() {
onclick={onMoveUp} onclick={onMoveUp}
disabled={index === 0} disabled={index === 0}
aria-label={m.journey_move_up({ title: itemTitle })} aria-label={m.journey_move_up({ title: itemTitle })}
class="flex items-center justify-center rounded text-ink-3 transition-colors hover:bg-muted hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:opacity-20" class="flex min-h-[44px] min-w-[44px] items-center justify-center rounded text-ink-3 transition-colors hover:bg-muted hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:opacity-20"
style="min-height: 22px; min-width: 44px;"
> >
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" /> <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
@@ -98,8 +97,7 @@ function handleRemoveClick() {
onclick={onMoveDown} onclick={onMoveDown}
disabled={index === total - 1} disabled={index === total - 1}
aria-label={m.journey_move_down({ title: itemTitle })} aria-label={m.journey_move_down({ title: itemTitle })}
class="flex items-center justify-center rounded text-ink-3 transition-colors hover:bg-muted hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:opacity-20" class="flex min-h-[44px] min-w-[44px] items-center justify-center rounded text-ink-3 transition-colors hover:bg-muted hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:opacity-20"
style="min-height: 22px; min-width: 44px;"
> >
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />