feat(annotations): add keyboard accessibility to resize handles [B2]
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user