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

fix(transcribe): hide the "?" hint on touch-only devices (#327)

Browse Source 
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>
This commit is contained in:
Marcel
2026-06-04 17:12:52 +02:00
committed by marcel
parent 9f75de0350
commit f07527158c
2 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte
View File

@@ -72,10 +72,10 @@ import TranscribeDragDemo from './TranscribeDragDemo.svelte';
{m.transcribe_coach_footer_richtlinien()} {m.transcribe_coach_footer_richtlinien()}
<span class="ml-1 text-[11px] text-ink-3">{m.common_opens_new_tab()}</span> <span class="ml-1 text-[11px] text-ink-3">{m.common_opens_new_tab()}</span>
</a> </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()} {m.transcribe_coach_shortcut_hint_before()}
<kbd <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 >?</kbd
> >
{m.transcribe_coach_shortcut_hint_after()} {m.transcribe_coach_shortcut_hint_after()}

8
frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte.spec.ts
View File

@@ -72,6 +72,14 @@ describe('TranscribeCoachEmptyState', () => {
expect(kbd?.textContent).toBe('?'); 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 () => { it('renders the drag demo animation region inside step 1', async () => {
render(TranscribeCoachEmptyState); render(TranscribeCoachEmptyState);
const demo = page.getByRole('img', { name: /Rahmen ziehen|Animation/i }); const demo = page.getByRole('img', { name: /Rahmen ziehen|Animation/i });