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:
@@ -3,6 +3,7 @@ import * as m from '$lib/paraglide/messages.js';
|
||||
import { getLocale } from '$lib/paraglide/runtime.js';
|
||||
import { formatTickLabel } from '$lib/shared/utils/monthBuckets';
|
||||
import Sparkline from '$lib/shared/primitives/Sparkline.svelte';
|
||||
import GlyphLabel from './GlyphLabel.svelte';
|
||||
import LetterCard from './LetterCard.svelte';
|
||||
import { monthHistogram } from './timelineDensity';
|
||||
import type { components } from '$lib/generated/api';
|
||||
@@ -30,8 +31,7 @@ const dezLabel = $derived(formatTickLabel(`${year}-12`, getLocale()));
|
||||
<div class="mx-auto max-w-md rounded-sm border border-line bg-surface p-3 shadow-sm">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<span class="font-sans text-sm font-bold text-brand-navy">
|
||||
<span aria-hidden="true">✉</span>
|
||||
<span class="sr-only">{m.timeline_letter_glyph_label()}</span>
|
||||
<GlyphLabel glyph="✉" label={m.timeline_letter_glyph_label()} />
|
||||
{m.timeline_letters_count({ count: letters.length })}
|
||||
</span>
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user