diff --git a/frontend/src/routes/search/DisambiguationPicker.svelte b/frontend/src/routes/search/DisambiguationPicker.svelte index e365cdeb..c99619c9 100644 --- a/frontend/src/routes/search/DisambiguationPicker.svelte +++ b/frontend/src/routes/search/DisambiguationPicker.svelte @@ -25,6 +25,9 @@ let listEl = $state(); const panelId = 'disambiguation-panel'; const headingId = 'disambiguation-heading'; const names = $derived(persons.map((person) => person.displayName).join(', ')); +const triggerLabel = $derived( + persons.length === 1 ? heading : m.search_disambiguation_trigger_label() +); async function openPicker() { open = true; @@ -64,7 +67,7 @@ function onKeydown(event: KeyboardEvent) { aria-haspopup="true" aria-expanded={open} aria-controls={panelId} - aria-label={m.search_disambiguation_trigger_label()} + aria-label={triggerLabel} onclick={toggle} class="inline-flex min-h-[44px] items-center gap-1.5 rounded-full border border-line bg-muted px-3 text-sm text-ink-2 outline-none focus-visible:ring-2 focus-visible:ring-brand-navy" > diff --git a/frontend/src/routes/search/DisambiguationPicker.svelte.spec.ts b/frontend/src/routes/search/DisambiguationPicker.svelte.spec.ts index 2f90f0aa..04eac3dd 100644 --- a/frontend/src/routes/search/DisambiguationPicker.svelte.spec.ts +++ b/frontend/src/routes/search/DisambiguationPicker.svelte.spec.ts @@ -78,7 +78,7 @@ describe('DisambiguationPicker', () => { showCue: false, onSelect: vi.fn() }); - await page.getByRole('button', { name: /Mehrere Personen gefunden/ }).click(); + await page.getByRole('button', { name: 'Meintest du Clara Cramer?' }).click(); await expect.element(page.getByText('Meintest du Clara Cramer?')).toBeVisible(); }); @@ -96,4 +96,23 @@ describe('DisambiguationPicker', () => { render(DisambiguationPicker, { ...multiProps, onSelect: vi.fn() }); await expect.element(page.getByText('(auswählen…)')).toBeVisible(); }); + + it('announces the did-you-mean heading as the trigger accessible name for a single suggestion', async () => { + render(DisambiguationPicker, { + persons: [{ id: 'c1', displayName: 'Clara Cramer' }], + heading: 'Meintest du Clara Cramer?', + showCue: false, + onSelect: vi.fn() + }); + await expect + .element(page.getByRole('button', { name: 'Meintest du Clara Cramer?' })) + .toBeInTheDocument(); + }); + + it('keeps the multiple-people trigger accessible name for two or more suggestions', async () => { + render(DisambiguationPicker, { ...multiProps, onSelect: vi.fn() }); + await expect + .element(page.getByRole('button', { name: /Mehrere Personen gefunden/ })) + .toBeInTheDocument(); + }); });