From 39ef5f2d8384ff7381785241a69ca36e7ee9a810 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 4 Jun 2026 17:12:52 +0200
Subject: [PATCH] fix(transcribe): hide the "?" hint on touch-only devices
 (#327)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review follow-up (Requirements Engineer, Leonie) — closes the unmet
acceptance row. The coach card's "press ?" tip rendered unconditionally, so
a touch-only tablet transcriber (no hardware keyboard) was told to press a
key they don't have. The hint is now gated behind a fine-pointer media
query ([@media(pointer:coarse)]:hidden); the cheatsheet itself only opens
via the "?" key, so it already never surfaces without a keyboard. Also bumps
the key cap from 11px to text-xs for the 60+ audience.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/shared/help/TranscribeCoachEmptyState.svelte  | 4 ++--
 .../shared/help/TranscribeCoachEmptyState.svelte.spec.ts  | 8 ++++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte b/frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte
index 9f22d29c..8690161d 100644
--- a/frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte
+++ b/frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte
@@ -72,10 +72,10 @@ import TranscribeDragDemo from './TranscribeDragDemo.svelte';
 			{m.transcribe_coach_footer_richtlinien()}
 			<span class="ml-1 text-[11px] text-ink-3">{m.common_opens_new_tab()}</span>
 		</a>
-		<p class="w-full text-ink-3">
+		<p class="w-full text-ink-3 [@media(pointer:coarse)]:hidden">
 			{m.transcribe_coach_shortcut_hint_before()}
 			<kbd
-				class="rounded border border-line bg-muted px-1.5 py-0.5 font-mono text-[11px] text-ink shadow-sm"
+				class="rounded border border-line bg-muted px-1.5 py-0.5 font-mono text-xs text-ink shadow-sm"
 				>?</kbd
 			>
 			{m.transcribe_coach_shortcut_hint_after()}
diff --git a/frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte.spec.ts b/frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte.spec.ts
index 2c7eedd3..f3a25fc4 100644
--- a/frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte.spec.ts
+++ b/frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte.spec.ts
@@ -72,6 +72,14 @@ describe('TranscribeCoachEmptyState', () => {
 		expect(kbd?.textContent).toBe('?');
 	});
 
+	it('hides the keyboard hint on touch-only (coarse-pointer) devices', async () => {
+		render(TranscribeCoachEmptyState);
+		const hint = document.querySelector('kbd')?.closest('p');
+		// The hint is gated behind a fine-pointer media query so touch-only
+		// transcribers are never told to press a key they do not have (#327).
+		expect(hint?.className).toContain('pointer:coarse');
+	});
+
 	it('renders the drag demo animation region inside step 1', async () => {
 		render(TranscribeCoachEmptyState);
 		const demo = page.getByRole('img', { name: /Rahmen ziehen|Animation/i });