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}