marcel/familienarchiv
1
0
Fork 0
Code Issues 105 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(a11y): bump GroupDivider contrast and add separator role

Browse Source 
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>
This commit is contained in:
Marcel
2026-04-15 09:38:37 +02:00
parent 593a6c8a38
commit f522ab633c
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/lib/components/GroupDivider.svelte
View File

@@ -2,9 +2,14 @@
let { label }: { label: string } = $props(); let { label }: { label: string } = $props();
</script> </script>
<div data-testid="group-divider" class="relative flex items-center py-2 text-center"> <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> <div class="flex-grow border-t border-line"></div>
<span class="mx-4 font-sans text-xs font-bold tracking-widest text-ink/40 uppercase">{label}</span <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 class="flex-grow border-t border-line"></div>
</div> </div>