077f5c85df
- Replace style="grid-template-columns: 34px 1fr; align-items: start;" with Tailwind grid-cols-[34px_1fr] items-start (Felix: inline styles) - Add aria-label="Schritt N von 3" on each <li> so screen readers announce step position when the numeric badge is aria-hidden (Nora/Sara) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
77 lines
2.6 KiB
Svelte
77 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import TranscribeDragDemo from './TranscribeDragDemo.svelte';
|
|
</script>
|
|
|
|
<div class="border-brand-sand rounded-sm border bg-white p-7 shadow-sm">
|
|
<h2 class="mb-3 font-serif text-[22px] font-bold text-ink">
|
|
{m.transcribe_coach_title()}
|
|
</h2>
|
|
<p class="mb-6 font-serif text-[15px] leading-relaxed text-ink-2">
|
|
{m.transcribe_coach_preamble()}
|
|
</p>
|
|
|
|
<ol class="m-0 flex list-none flex-col gap-[18px] p-0">
|
|
<!-- Step 1 -->
|
|
<li aria-label="Schritt 1 von 3" class="grid grid-cols-[34px_1fr] items-start gap-3.5">
|
|
<span
|
|
aria-hidden="true"
|
|
class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-ink font-sans text-sm font-bold text-white"
|
|
>1</span
|
|
>
|
|
<div class="pt-0.5 font-serif text-base leading-snug text-ink">
|
|
<strong>{m.transcribe_coach_step_1_title()}</strong>
|
|
{m.transcribe_coach_step_1_body()}
|
|
<TranscribeDragDemo />
|
|
</div>
|
|
</li>
|
|
|
|
<!-- Step 2 -->
|
|
<li aria-label="Schritt 2 von 3" class="grid grid-cols-[34px_1fr] items-start gap-3.5">
|
|
<span
|
|
aria-hidden="true"
|
|
class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-ink font-sans text-sm font-bold text-white"
|
|
>2</span
|
|
>
|
|
<div class="pt-0.5 font-serif text-base leading-snug text-ink">
|
|
<strong>{m.transcribe_coach_step_2_title()}</strong>
|
|
{m.transcribe_coach_step_2_body()}
|
|
</div>
|
|
</li>
|
|
|
|
<!-- Step 3 -->
|
|
<li aria-label="Schritt 3 von 3" class="grid grid-cols-[34px_1fr] items-start gap-3.5">
|
|
<span
|
|
aria-hidden="true"
|
|
class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-ink font-sans text-sm font-bold text-white"
|
|
>3</span
|
|
>
|
|
<div class="pt-0.5 font-serif text-base leading-snug text-ink">
|
|
<strong>{m.transcribe_coach_step_3_title()}</strong>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
|
|
<div class="border-brand-sand mt-6 flex flex-wrap gap-4 border-t pt-3.5 font-sans text-[13px]">
|
|
<a
|
|
href="https://de.wikipedia.org/wiki/Kurrent"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
referrerpolicy="no-referrer"
|
|
class="text-ink underline decoration-brand-mint decoration-[1.5px] underline-offset-[3px]"
|
|
>
|
|
{m.transcribe_coach_footer_kurrent()}
|
|
<span class="ml-1 text-[11px] text-ink-3">{m.common_opens_new_tab()}</span>
|
|
</a>
|
|
<a
|
|
href="/hilfe/transkription"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-ink underline decoration-brand-mint decoration-[1.5px] underline-offset-[3px]"
|
|
>
|
|
{m.transcribe_coach_footer_richtlinien()}
|
|
<span class="ml-1 text-[11px] text-ink-3">{m.common_opens_new_tab()}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|