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}