marcel/mealprep
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(join): add accessible name to permissions list in HouseholdIdentityPanel

Browse Source 
The <ul> had no programmatic association to its visible label.
Screen readers could not announce what the list represents.
Add aria-label="Als Mitglied kannst du" directly on the <ul>.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-10 22:26:43 +02:00
parent ccfc72ab38
commit 26256ef492
2 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/routes/(public)/join/[token]/HouseholdIdentityPanel.svelte
View File

@@ -23,7 +23,7 @@
<p class="mb-2 font-[var(--font-sans)] text-[11px] font-medium uppercase tracking-wide text-[var(--green-light)]"> <p class="mb-2 font-[var(--font-sans)] text-[11px] font-medium uppercase tracking-wide text-[var(--green-light)]">
Als Mitglied kannst du Als Mitglied kannst du
</p> </p>
<ul class="flex flex-col gap-1.5"> <ul aria-label="Als Mitglied kannst du" class="flex flex-col gap-1.5">
<li class="flex items-center gap-2 font-[var(--font-sans)] text-[13px] text-white"> <li class="flex items-center gap-2 font-[var(--font-sans)] text-[13px] text-white">
<span class="font-semibold text-[var(--green-light)]" aria-hidden="true">✓</span> <span class="font-semibold text-[var(--green-light)]" aria-hidden="true">✓</span>
Wochenplan einsehen Wochenplan einsehen

7
frontend/src/routes/(public)/join/[token]/HouseholdIdentityPanel.test.ts
View File

@@ -31,4 +31,11 @@ describe('HouseholdIdentityPanel', () => {
}); });
expect(screen.getByText('🥗')).toBeInTheDocument(); expect(screen.getByText('🥗')).toBeInTheDocument();
}); });
it('permissions list has accessible name', () => {
render(HouseholdIdentityPanel, {
props: { householdName: 'Smith family', inviterName: 'Sarah' }
});
expect(screen.getByRole('list', { name: /als mitglied kannst du/i })).toBeInTheDocument();
});
}); });