From 7097f991fef17d8fc0f6580982a33f6403bc800c Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 14 Apr 2026 14:40:30 +0200
Subject: [PATCH] feat(annotations): add keyboard accessibility to resize
 handles [B2]

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/AnnotationEditOverlay.svelte    | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/AnnotationEditOverlay.svelte b/frontend/src/lib/components/AnnotationEditOverlay.svelte
index 595459f3..bf920f2f 100644
--- a/frontend/src/lib/components/AnnotationEditOverlay.svelte
+++ b/frontend/src/lib/components/AnnotationEditOverlay.svelte
@@ -226,6 +226,17 @@ function handleKeyDown(event: KeyboardEvent): void {
 	}, 300);
 }
 
+const directionLabels: Record<HandleId, string> = {
+	nw: 'NW',
+	ne: 'NE',
+	sw: 'SW',
+	se: 'SE',
+	n: 'N',
+	s: 'S',
+	e: 'E',
+	w: 'W'
+};
+
 // Preview rect in pixel space (maps live normalized coords back to SVG pixel coordinates).
 // Shown during pointer drag and during keyboard nudging (whenever live coords differ from stored).
 let previewX = $derived(((liveX - annotation.x) / annotation.width) * svgWidth);
@@ -298,10 +309,15 @@ let hasLiveChanges = $derived(
 	{#each handles as handle (handle.id)}
 		<g
 			data-handle={handle.id}
-			role="none"
+			role="button"
+			tabindex="0"
+			aria-label={m.annotation_resize_handle({ direction: directionLabels[handle.id] })}
 			transform="translate({handle.cx}, {handle.cy})"
 			style="cursor: {handle.cursor}; pointer-events: all;"
 			onpointerdown={(e) => handlePointerDown(e, 'handle', handle.id)}
+			onkeydown={(e) => {
+				if (e.key === 'Enter' || e.key === ' ') e.preventDefault();
+			}}
 		>
 			<rect data-handle-hit x="-22" y="-22" width="44" height="44" fill="transparent" />
 			<path d={handle.path} fill="none" stroke="#002850" stroke-width="2" stroke-linecap="square" />