From 8c198f22be4f226eda6c575d84a44ca6b5a6cd5b Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 4 Jun 2026 17:17:25 +0200
Subject: [PATCH] =?UTF-8?q?polish(transcribe):=20review=20nits=20=E2=80=94?=
 =?UTF-8?q?=20kbd=20size,=20focus=20ring,=20guard,=20action=20doc=20(#327)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review follow-up (Leonie, Felix, Markus): bump cheatsheet key caps to text-sm
for the 60+ audience, add a focus-visible ring to the close button, simplify
the draw-hint guard to {#if drawArmed} (the $effect already clears it outside
edit mode), and document why the transcribeShortcuts action ignores its node
and binds to window.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/document/transcription/ShortcutCheatsheet.svelte  | 4 ++--
 frontend/src/lib/shared/actions/transcribeShortcuts.ts        | 4 ++++
 frontend/src/routes/documents/[id]/+page.svelte               | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/document/transcription/ShortcutCheatsheet.svelte b/frontend/src/lib/document/transcription/ShortcutCheatsheet.svelte
index 3d1a7445..a68a16b1 100644
--- a/frontend/src/lib/document/transcription/ShortcutCheatsheet.svelte
+++ b/frontend/src/lib/document/transcription/ShortcutCheatsheet.svelte
@@ -57,7 +57,7 @@ function handleBackdropClick(event: MouseEvent) {
 			type="button"
 			onclick={onClose}
 			aria-label={m.cheatsheet_close()}
-			class="flex h-11 w-11 items-center justify-center rounded-sm text-ink-2 hover:bg-muted"
+			class="flex h-11 w-11 items-center justify-center rounded-sm text-ink-2 hover:bg-muted focus-visible:ring-2 focus-visible:ring-brand-mint focus-visible:outline-none"
 		>
 			<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
 				<path stroke-linecap="round" stroke-width="2" d="M6 6l12 12M18 6L6 18" />
@@ -71,7 +71,7 @@ function handleBackdropClick(event: MouseEvent) {
 				{#each group as shortcut (shortcut.cap)}
 					<div class="flex items-center justify-between gap-4">
 						<kbd
-							class="rounded border border-line bg-muted px-1.5 py-0.5 font-mono text-xs text-ink shadow-sm"
+							class="rounded border border-line bg-muted px-2 py-0.5 font-mono text-sm text-ink shadow-sm"
 							>{shortcut.cap}</kbd
 						>
 						<span class="flex-1 text-right font-serif text-sm text-ink">{shortcut.label}</span>
diff --git a/frontend/src/lib/shared/actions/transcribeShortcuts.ts b/frontend/src/lib/shared/actions/transcribeShortcuts.ts
index 90806daf..ec333825 100644
--- a/frontend/src/lib/shared/actions/transcribeShortcuts.ts
+++ b/frontend/src/lib/shared/actions/transcribeShortcuts.ts
@@ -27,6 +27,10 @@ function isEditableTarget(target: EventTarget | null): boolean {
 	return tag === 'INPUT' || tag === 'TEXTAREA' || target.isContentEditable;
 }
 
+// `node` is unused: the listener is global (window) so a shortcut fires no
+// matter where focus sits on the page. It is still authored as a Svelte action
+// (`use:transcribeShortcuts`) so its lifecycle is tied to the host element's
+// mount/unmount and `destroy()` reliably removes the listener.
 export function transcribeShortcuts(_node: HTMLElement, initial: TranscribeShortcutOptions) {
 	let options = initial;
 
diff --git a/frontend/src/routes/documents/[id]/+page.svelte b/frontend/src/routes/documents/[id]/+page.svelte
index 4b5b0eb0..9d91378e 100644
--- a/frontend/src/routes/documents/[id]/+page.svelte
+++ b/frontend/src/routes/documents/[id]/+page.svelte
@@ -422,7 +422,7 @@ onMount(() => {
 		{/if}
 	</div>
 
-	{#if drawArmed && panelMode === 'edit'}
+	{#if drawArmed}
 		<div
 			class="pointer-events-none absolute bottom-4 left-1/2 z-50 -translate-x-1/2 rounded-full bg-ink px-4 py-2 font-sans text-xs text-white shadow-lg"
 			role="status"