refactor(timeline): extract a shared GlyphLabel primitive
The aria-hidden glyph + sr-only label markup was hand-copied in LetterCard and YearLetterStrip. Extract a small GlyphLabel component and use it at both sites so the accessibility idiom has a single owner. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
import { timelineDateLabel } from './dateLabel';
|
||||
import GlyphLabel from './GlyphLabel.svelte';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
|
||||
@@ -33,8 +34,7 @@ const receiver = $derived(
|
||||
interpolated into the escaped user title; the title keeps its own
|
||||
pre-line span for multi-line OCR text (REQ-008/016/021). -->
|
||||
<span class="font-serif text-sm font-bold break-words text-ink">
|
||||
<span aria-hidden="true">✉</span>
|
||||
<span class="sr-only">{m.timeline_letter_glyph_label()}</span>
|
||||
<GlyphLabel glyph="✉" label={m.timeline_letter_glyph_label()} />
|
||||
<span class="whitespace-pre-line">{entry.title}</span>
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user