From 4961c74a01c3a0ebf7b57c427cdd502c7a452712 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 11 Jun 2026 12:23:45 +0200
Subject: [PATCH] feat(document-picker): optional inputId prop for external
 label wiring (#795)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The input always carries an id (generated doc-picker-input-{uid} default,
mirroring the listbox id scheme). When a caller passes inputId it wires a
visible <label for> — the aria-label fallback is dropped then so the
visible label wins. JourneyAddBar stays untouched.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../lib/document/DocumentPickerDropdown.svelte |  7 ++++++-
 .../DocumentPickerDropdown.svelte.spec.ts      | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/document/DocumentPickerDropdown.svelte b/frontend/src/lib/document/DocumentPickerDropdown.svelte
index 5a3f454b..b3fa4a2a 100644
--- a/frontend/src/lib/document/DocumentPickerDropdown.svelte
+++ b/frontend/src/lib/document/DocumentPickerDropdown.svelte
@@ -10,17 +10,21 @@ import {
 interface Props {
 	alreadyAddedIds?: Set<string>;
 	placeholder?: string;
+	/** Set when a visible <label for> is wired externally — replaces the aria-label fallback. */
+	inputId?: string;
 	onSelect: (doc: DocumentOption) => void;
 }
 
 let {
 	alreadyAddedIds = new Set(),
 	placeholder = m.journey_add_document(),
+	inputId = undefined,
 	onSelect
 }: Props = $props();
 
 const uid = $props.id();
 const listboxId = `doc-picker-listbox-${uid}`;
+const resolvedInputId = $derived(inputId ?? `doc-picker-input-${uid}`);
 
 const picker = createDocumentTypeahead();
 
@@ -82,7 +86,8 @@ function handleKeydown(e: KeyboardEvent) {
 		type="text"
 		role="combobox"
 		autocomplete="off"
-		aria-label={placeholder}
+		id={resolvedInputId}
+		aria-label={inputId ? undefined : placeholder}
 		aria-expanded={picker.isOpen}
 		aria-controls={picker.isOpen && !picker.loading && !picker.error && picker.results.length > 0
 			? listboxId
diff --git a/frontend/src/lib/document/DocumentPickerDropdown.svelte.spec.ts b/frontend/src/lib/document/DocumentPickerDropdown.svelte.spec.ts
index 2c3d4987..5ac389fb 100644
--- a/frontend/src/lib/document/DocumentPickerDropdown.svelte.spec.ts
+++ b/frontend/src/lib/document/DocumentPickerDropdown.svelte.spec.ts
@@ -241,3 +241,21 @@ describe('DocumentPickerDropdown — ARIA listbox integrity', () => {
 		});
 	});
 });
+
+describe('DocumentPickerDropdown — external label wiring (#795)', () => {
+	it('renders a generated default id on the input and keeps the aria-label fallback', async () => {
+		render(DocumentPickerDropdown, { onSelect: vi.fn() });
+
+		const input = page.getByRole('combobox').element() as HTMLInputElement;
+		expect(input.id).toMatch(/^doc-picker-input-/);
+		expect(input.getAttribute('aria-label')).not.toBeNull();
+	});
+
+	it('uses the provided inputId and drops the aria-label so an external label wins', async () => {
+		render(DocumentPickerDropdown, { onSelect: vi.fn(), inputId: 'story-doc-picker' });
+
+		const input = page.getByRole('combobox').element() as HTMLInputElement;
+		expect(input.id).toBe('story-doc-picker');
+		expect(input.getAttribute('aria-label')).toBeNull();
+	});
+});