From bf3896b1f2d1854e4a2b0aae91cae1312dc49e6f Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Sun, 26 Jul 2026 16:30:55 +0200
Subject: [PATCH] client_v2: fix nested-interactive a11y on add-spool modal

The overlay was role=button wrapping the whole dialog, so screen readers
announced every control as nested inside one button. Make the click-outside
catcher a sibling <button> behind the modal instead of a parent, and move
Escape-to-close to a window keydown listener.
---
 .../src/lib/components/AddSpoolModal.svelte   | 38 +++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/client_v2/src/lib/components/AddSpoolModal.svelte b/client_v2/src/lib/components/AddSpoolModal.svelte
index 97543933..7398a9c9 100644
--- a/client_v2/src/lib/components/AddSpoolModal.svelte
+++ b/client_v2/src/lib/components/AddSpoolModal.svelte
@@ -412,22 +412,19 @@
 	let canSubmit = $derived((creating || !!chosen) && Object.keys(errors).length === 0);
 </script>
 
+<svelte:window
+	onkeydown={(e) => {
+		if (open && e.key === 'Escape') close();
+	}}
+/>
+
 {#if open}
-	<div
-		class="overlay"
-		role="button"
-		tabindex="0"
-		onclick={close}
-		onkeydown={(e) => e.key === 'Escape' && close()}
-	>
-		<div
-			class="modal"
-			role="dialog"
-			aria-modal="true"
-			tabindex="-1"
-			onclick={(e) => e.stopPropagation()}
-			onkeydown={(e) => e.stopPropagation()}
-		>
+	<div class="overlay">
+		<!-- Click-outside catcher: a sibling of the modal (not a parent) so it doesn't
+		     nest the modal's interactive controls inside an interactive element.
+		     Keyboard close is handled by the window Escape listener above. -->
+		<button class="backdrop" tabindex="-1" aria-hidden="true" onclick={close}></button>
+		<div class="modal" role="dialog" aria-modal="true" tabindex="-1">
 			<div class="modal-head">
 				<span class="title">{m['topbar.addSpools']()}</span>
 				{#if step === 2}
@@ -799,7 +796,18 @@
 		justify-content: center;
 		padding: 8vh 16px 16px;
 	}
+	.backdrop {
+		position: fixed;
+		inset: 0;
+		border: none;
+		margin: 0;
+		padding: 0;
+		background: transparent;
+		cursor: default;
+	}
 	.modal {
+		position: relative;
+		z-index: 1;
 		width: 640px;
 		max-width: 100%;
 		max-height: 84vh;