From abafdfbeb3c9b5065323ac7b54bed7ec6edaa15a Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Thu, 21 May 2026 17:24:56 +0200
Subject: [PATCH] fix(shared-ui): TagChip nested button + Pill svelte:element
 ARIA role
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Beide standen seit dem letzten shared-ui-Sync (ce923bbdc) als
svelte-check --fail-on-warnings Treffer im Pre-Push-Hook drin.
Aufgeräumt für die Cutover-PRs.

TagChip: outer war `<button>` mit innerem Remove-`<button>` —
verschachtelte interaktive Elemente sind invalid HTML und brechen
SSR-Hydration. Outer ist jetzt `<span role="button" tabindex="0">`
mit Enter/Space-Keyboard-Handler. CSS-Selektor `button.chip` →
`.chip-interactive` Klasse.

Pill: `<svelte:element this={tag}>` mit onclick/oncontextmenu
braucht explizite ARIA-Rolle (button bzw. link), weil der
statische Analyser den dynamischen Tag nicht aufdröselt.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../shared-ui/src/molecules/TagChip.svelte    | 31 ++++++++++++++-----
 packages/shared-ui/src/navigation/Pill.svelte |  7 +++++
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/packages/shared-ui/src/molecules/TagChip.svelte b/packages/shared-ui/src/molecules/TagChip.svelte
index 9a526f7bd..c5d7d6a5e 100644
--- a/packages/shared-ui/src/molecules/TagChip.svelte
+++ b/packages/shared-ui/src/molecules/TagChip.svelte
@@ -34,16 +34,31 @@
 		e.stopPropagation();
 		onRemove?.();
 	}
+
+	// Outer kann nicht `<button>` sein wenn innen ein Remove-`<button>`
+	// liegt — verschachtelte interaktive Elemente sind invalid HTML
+	// (svelte-check fail-on-warnings). Lösung: outer als `<span
+	// role="button">` mit Keyboard-Handler, damit der ganze Chip
+	// klickbar bleibt und der Remove-Button sein eigener interaktiver
+	// Bereich ist.
+	function handleChipKey(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			onclick?.(e as unknown as MouseEvent);
+		}
+	}
 </script>
 
 {#if onclick}
-	<button
-		type="button"
-		class="chip size-{size}"
+	<span
+		role="button"
+		tabindex="0"
+		class="chip chip-interactive size-{size}"
 		class:active
 		class:has-color={!!color}
 		style:--tag-color={color || null}
 		{onclick}
+		onkeydown={handleChipKey}
 	>
 		{#if color}
 			<span class="dot" aria-hidden="true"></span>
@@ -54,7 +69,7 @@
 				<DynamicIcon name="x" size="xs" />
 			</button>
 		{/if}
-	</button>
+	</span>
 {:else}
 	<span
 		class="chip size-{size}"
@@ -91,19 +106,19 @@
 		cursor: default;
 	}
 
-	button.chip {
+	.chip-interactive {
 		cursor: pointer;
 		transition:
 			background-color 0.15s ease,
 			border-color 0.15s ease;
 	}
 
-	button.chip:hover {
+	.chip-interactive:hover {
 		background: hsl(var(--color-surface-hover));
 		border-color: hsl(var(--color-primary) / 0.4);
 	}
 
-	button.chip:focus-visible {
+	.chip-interactive:focus-visible {
 		outline: 2px solid hsl(var(--color-primary));
 		outline-offset: 2px;
 	}
@@ -162,7 +177,7 @@
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		button.chip {
+		.chip-interactive {
 			transition: none;
 		}
 	}
diff --git a/packages/shared-ui/src/navigation/Pill.svelte b/packages/shared-ui/src/navigation/Pill.svelte
index 6ec867504..2c69c55d6 100644
--- a/packages/shared-ui/src/navigation/Pill.svelte
+++ b/packages/shared-ui/src/navigation/Pill.svelte
@@ -55,11 +55,18 @@
 	}: Props = $props();
 
 	const tag = $derived(href ? 'a' : 'button');
+	// svelte-check `--fail-on-warnings` will an Dynamic-Elementen mit
+	// click/context-handler explizit eine ARIA-Rolle sehen, weil der
+	// statische Analyser nicht weiß, dass `<button>`/`<a>` schon
+	// inhärent interaktiv sind. Für button reicht `button`, für a
+	// (Link) ist `link` die korrekte Rolle.
+	const explicitRole = $derived(tag === 'a' ? 'link' : 'button');
 </script>
 
 <svelte:element
 	this={tag}
 	bind:this={element}
+	role={explicitRole}
 	class="pill size-{size} {className}"
 	class:active
 	class:disabled