feat(transcribe): surface the "?" shortcut tip in the coach card (#327)
Adds a secondary keyboard hint to the existing coach footer row pointing transcribers at the "?" cheatsheet, with a semantic <kbd>. Cross-references the shortcuts introduced for the empty-state coach (#320). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -72,5 +72,13 @@ 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">
|
||||
{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"
|
||||
>?</kbd
|
||||
>
|
||||
{m.transcribe_coach_shortcut_hint_after()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -14,6 +14,8 @@ vi.mock('$lib/paraglide/messages.js', () => ({
|
||||
transcribe_coach_step_3_title: () => 'Speichert automatisch.',
|
||||
transcribe_coach_footer_kurrent: () => 'Hilfe zu Kurrent ↗',
|
||||
transcribe_coach_footer_richtlinien: () => 'Transkriptions-Richtlinien ↗',
|
||||
transcribe_coach_shortcut_hint_before: () => 'Tipp: Drücken Sie',
|
||||
transcribe_coach_shortcut_hint_after: () => 'für eine Übersicht aller Tastenkürzel.',
|
||||
common_opens_new_tab: () => '(öffnet in neuem Tab)'
|
||||
}
|
||||
}));
|
||||
@@ -63,6 +65,13 @@ describe('TranscribeCoachEmptyState', () => {
|
||||
await expect.element(annotations.first()).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders the keyboard-shortcut hint with a "?" key cap', async () => {
|
||||
render(TranscribeCoachEmptyState);
|
||||
await expect.element(page.getByText('Tastenkürzel', { exact: false })).toBeInTheDocument();
|
||||
const kbd = document.querySelector('kbd');
|
||||
expect(kbd?.textContent).toBe('?');
|
||||
});
|
||||
|
||||
it('renders the drag demo animation region inside step 1', async () => {
|
||||
render(TranscribeCoachEmptyState);
|
||||
const demo = page.getByRole('img', { name: /Rahmen ziehen|Animation/i });
|
||||
|
||||
Reference in New Issue
Block a user