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

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

Browse Source 
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
1 changed files with 17 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/lib/components/AnnotationEditOverlay.svelte
View File

@@ -226,6 +226,17 @@ function handleKeyDown(event: KeyboardEvent): void {
}, 300); }, 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). // 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). // Shown during pointer drag and during keyboard nudging (whenever live coords differ from stored).
let previewX = $derived(((liveX - annotation.x) / annotation.width) * svgWidth); let previewX = $derived(((liveX - annotation.x) / annotation.width) * svgWidth);
@@ -298,10 +309,15 @@ let hasLiveChanges = $derived(
{#each handles as handle (handle.id)} {#each handles as handle (handle.id)}
<g <g
data-handle={handle.id} 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})" transform="translate({handle.cx}, {handle.cy})"
style="cursor: {handle.cursor}; pointer-events: all;" style="cursor: {handle.cursor}; pointer-events: all;"
onpointerdown={(e) => handlePointerDown(e, 'handle', handle.id)} 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" /> <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" /> <path d={handle.path} fill="none" stroke="#002850" stroke-width="2" stroke-linecap="square" />