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

fix(dashboard): fix ContributorStack each-block key and add accessible avatar labels

Browse Source 
- Replace (actor.name ?? actor.initials + i) with (actor.initials + '-' + actor.color)
  to fix operator-precedence bug that made keys order-dependent when name is null
- Add role="img" + aria-label={actor.name ?? actor.initials} so screen readers
  and touch users can access contributor names

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-19 22:28:00 +02:00
committed by marcel
parent 12d92c78ea
commit 55ce696428
2 changed files with 54 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/lib/components/ContributorStack.svelte
View File

@@ -20,11 +20,13 @@ const safeContributors = $derived(contributors ?? []);
></span>
{:else}
<span class="inline-flex items-center">
{#each safeContributors as actor, i (actor.name ?? actor.initials + i)}
{#each safeContributors as actor, i (actor.initials + '-' + actor.color)}
<span
role="img"
aria-label={actor.name ?? actor.initials}
class="inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full font-sans text-[9px] font-bold text-white ring-2 ring-white {i > 0 ? '-ml-1.5' : ''}"
style="background-color: {actor.color || '#8c9aa3'};"
title={actor.name ?? ''}
title={actor.name ?? actor.initials}
>
{actor.initials}
</span>