From 92bc4ea9a2a6a2256d34ae60513017ed66d43efe Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 8 Feb 2026 20:54:21 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20Domain=20Se?=
 =?UTF-8?q?arch=20UX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: Replaced `on:keyup` with `on:input` for search, added `aria-label` to loading spinner, and set explicit `type="submit"` for search button.
🎯 Why: To ensure robust search triggering (paste, drag-drop) and accessibility for screen readers.
📸 Before/After: Visuals unchanged; interaction and accessibility improved.
♿ Accessibility: Added `aria-label` to `CircularProgress` and `type="submit"` to button.

Co-authored-by: Yeboster <23556525+Yeboster@users.noreply.github.com>
---
 .jules/palette.md              |  3 +++
 src/routes/DomainSearch.svelte | 12 ++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..e9d203f
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-10-24 - Search Input Interaction and Accessibility
+**Learning:** Reliance on `on:keyup` for search inputs fails to capture events like pasting or drag-and-drop, leading to missed user intent. `on:input` is the comprehensive solution. Additionally, visual loading spinners (like `CircularProgress`) are invisible to screen readers without an explicit `aria-label`.
+**Action:** Always prefer `on:input` for text fields and ensure every loading state has a corresponding `aria-label` or `aria-live` region.
diff --git a/src/routes/DomainSearch.svelte b/src/routes/DomainSearch.svelte
index 2cde1b3..63f340c 100644
--- a/src/routes/DomainSearch.svelte
+++ b/src/routes/DomainSearch.svelte
@@ -15,7 +15,7 @@
 	let domainName: string = '';
 	let nameSearched: string = '';
 	let isLoading: boolean = false;
-	let debounceTimer: NodeJS.Timeout;
+	let debounceTimer: ReturnType<typeof setTimeout>;
 
 	$: errors = invalid ? validator.getErrors() : [];
 	$: invalid = domainName !== '' && !validator.validate(domainName, { raiseError: false });
@@ -55,7 +55,7 @@
 			class="domain-input"
 			variant="outlined"
 			bind:value={domainName}
-			on:keyup={() => debounce()}
+			on:input={() => debounce()}
 			bind:invalid
 			label="Domain name"
 			withTrailingIcon
@@ -63,7 +63,7 @@
 		>
 			<svelte:fragment slot="trailingIcon">
 				<div class="submit">
-					<IconButton aria-label="search">
+					<IconButton aria-label="search" type="submit">
 						<Icon icon="search" />
 					</IconButton>
 				</div>
@@ -81,7 +81,11 @@
 				<div class="card-content">
 					<span>{nameSearchedLabel}</span>
 
-					<CircularProgress style="height: 32px; width: 32px;" indeterminate />
+					<CircularProgress
+						style="height: 32px; width: 32px;"
+						indeterminate
+						aria-label="Loading domain search results"
+					/>
 				</div>
 			</CardContent>
 		</Card>