feat(annotations): add keyboard accessibility to resize handles [B2]

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-14 14:40:30 +02:00
parent 4d9145e49f
commit 7097f991fe

View File

@@ -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" />