From 5574bc9fed96bce7db2c79528f088ba459334d0b Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 1 Jul 2026 19:45:05 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Conditionally=20rende?=
=?UTF-8?q?r=20search=20trailing=20icon=20and=20fix=20reactivity?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- Conditionally render the 'clear' trailing icon in the profile search text field so it isn't focusable when empty.
- Change the aria-label of the clear icon from a generic 'cancel' to a more descriptive 'clear search'.
- Fix the reactivity of the domain filter so it resets to the full list when the search input becomes empty.
Co-authored-by: yeboster <23556525+yeboster@users.noreply.github.com>
---
.Jules/palette.md | 4 ++++
.prettierignore | 5 +++++
src/routes/profile/+page.svelte | 18 +++++++++++-------
3 files changed, 20 insertions(+), 7 deletions(-)
diff --git a/.Jules/palette.md b/.Jules/palette.md
index d6d129bc..491c17ed 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -2,3 +2,7 @@
**Learning:** Async buttons that handle errors often fail to reset their error state on subsequent attempts. This leads to a confusing UX where a successful retry still displays the error icon, making the user believe the action failed again.
**Action:** Always ensure that error flags (e.g., `hasError`) are reset at the _start_ of the async operation, not just set in the `catch` block.
+
+## 2024-10-24 - Conditional Trailing Icons for Accessibility
+**Learning:** When using trailing icons in text fields (like a clear button), the icon remains focusable by keyboard even when it is visually unnecessary (e.g. empty input). Also, binding the `withTrailingIcon` property to a condition is necessary for proper layout updates.
+**Action:** Always conditionally render trailing icons (e.g., `{#if search !== ''}`) so they are not focusable when irrelevant. Also bind `withTrailingIcon` to the same condition and use descriptive aria-labels (e.g. 'clear search').
diff --git a/.prettierignore b/.prettierignore
index 38972655..210287cd 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -11,3 +11,8 @@ node_modules
pnpm-lock.yaml
package-lock.json
yarn.lock
+
+.Jules/
+.jules/
+static/
+test-results/
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index 7f290736..391ccfc6 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -17,6 +17,8 @@
$: if (search !== '') {
domainsFiltered = domains.filter((domain) => isFuzzyMatch(domain.name, search));
+ } else {
+ domainsFiltered = domains;
}
walletAddress.subscribe(async (address) => {
@@ -39,7 +41,7 @@
if (trimmedDomain.startsWith(trimmedSearch) || trimmedDomain.includes(trimmedSearch))
return true;
- else false;
+ else return false;
}
@@ -55,14 +57,16 @@
label="Search"
bind:value={search}
variant="outlined"
- withTrailingIcon
+ withTrailingIcon={search !== ''}
>
-
-
-
-
-
+ {#if search !== ''}
+
+
+
+
+
+ {/if}