text-xs text-ink/40 (~2.1:1) fails WCAG AA; text-sm bold at text-ink/60 (~3.7:1) passes the large-text 3:1 threshold. Also adds role="separator" and aria-label so screen readers announce the group boundary. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
16 lines
416 B
Svelte
16 lines
416 B
Svelte
<script lang="ts">
|
|
let { label }: { label: string } = $props();
|
|
</script>
|
|
|
|
<div
|
|
data-testid="group-divider"
|
|
role="separator"
|
|
aria-label={label}
|
|
class="relative flex items-center py-2 text-center"
|
|
>
|
|
<div class="flex-grow border-t border-line"></div>
|
|
<span class="mx-4 font-sans text-sm font-bold tracking-widest text-ink/60 uppercase">{label}</span
|
|
>
|
|
<div class="flex-grow border-t border-line"></div>
|
|
</div>
|