From d41ae513cffa3b2f4dc03aaf6b0d8d6a7f8bfd88 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 28 Jun 2026 19:53:47 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement]=20?=
=?UTF-8?q?-=20accessible=20trailing=20icon=20behavior?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Conditionally rendered the clear search button and its layout spacing when there is an active search to prevent unnecessary tab stops. Updated the aria label to be more descriptive.
Co-authored-by: yeboster <23556525+yeboster@users.noreply.github.com>
---
.Jules/palette.md | 4 ++++
src/routes/profile/+page.svelte | 16 +++++++++-------
2 files changed, 13 insertions(+), 7 deletions(-)
diff --git a/.Jules/palette.md b/.Jules/palette.md
index d6d129bc..e4b5d4bc 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-11-06 - Accessible Trailing Icons in SMUI Textfields
+**Learning:** Trailing icons in input fields (like clear buttons) should be conditionally rendered to prevent users from focusing on an empty action. Furthermore, dynamically binding `withTrailingIcon` to the same condition ensures layout consistency in SMUI components.
+**Action:** Always conditionally render trailing interactive elements in input fields based on the input's value and use descriptive `aria-label`s instead of generic ones like "cancel".
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index 7f290736..0c9d14c3 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -39,7 +39,7 @@
if (trimmedDomain.startsWith(trimmedSearch) || trimmedDomain.includes(trimmedSearch))
return true;
- else false;
+ else return false;
}
@@ -55,14 +55,16 @@
label="Search"
bind:value={search}
variant="outlined"
- withTrailingIcon
+ withTrailingIcon={search !== ''}
>
-
-
-
-
-
+ {#if search !== ''}
+
+
+
+
+
+ {/if}