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}