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

polish(transcribe): review nits — kbd size, focus ring, guard, action doc (#327)

Browse Source 
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>
This commit is contained in:
Marcel
2026-06-04 17:17:25 +02:00
committed by marcel
parent 6fd05e08d8
commit 8c198f22be
3 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/lib/document/transcription/ShortcutCheatsheet.svelte
View File

@@ -57,7 +57,7 @@ function handleBackdropClick(event: MouseEvent) {
type="button" type="button"
onclick={onClose} onclick={onClose}
aria-label={m.cheatsheet_close()} 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"> <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" /> <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)} {#each group as shortcut (shortcut.cap)}
<div class="flex items-center justify-between gap-4"> <div class="flex items-center justify-between gap-4">
<kbd <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 >{shortcut.cap}</kbd
> >
<span class="flex-1 text-right font-serif text-sm text-ink">{shortcut.label}</span> <span class="flex-1 text-right font-serif text-sm text-ink">{shortcut.label}</span>

4
frontend/src/lib/shared/actions/transcribeShortcuts.ts
View File

@@ -27,6 +27,10 @@ function isEditableTarget(target: EventTarget | null): boolean {
return tag === 'INPUT' || tag === 'TEXTAREA' || target.isContentEditable; 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) { export function transcribeShortcuts(_node: HTMLElement, initial: TranscribeShortcutOptions) {
let options = initial; let options = initial;

2
frontend/src/routes/documents/[id]/+page.svelte
View File

@@ -422,7 +422,7 @@ onMount(() => {
{/if} {/if}
</div> </div>
{#if drawArmed && panelMode === 'edit'} {#if drawArmed}
<div <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" 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" role="status"