diff --git a/.jules/palette.md b/.jules/palette.md index 00f41cdf..01465757 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -1,3 +1,7 @@ ## 2024-10-24 - Accessible Icon Props and Loading Button State **Learning:** Svelte wrapper components (like `Icon.svelte`) must spread `$$restProps` to allow passing accessibility attributes (e.g., `aria-label`) from parent components. Without this, icons remain inaccessible to screen readers. Also, persistent "Success" states on buttons can be confusing; auto-resetting them after a timeout improves clarity. **Action:** Always include `{...$$restProps}` in wrapper components and implement auto-reset logic for temporary success states in interactive elements. + +## 2024-11-05 - Conditionally rendering and labeling clear buttons in inputs +**Learning:** Always conditionally render trailing clear icons in text fields (e.g., `{#if search !== ''}`) so they don't receive keyboard focus when the input is already empty. Also dynamically bind the `withTrailingIcon` property so layout stays consistent, and replace generic 'cancel' aria-labels with specific ones like 'clear search' to give screen reader users context. +**Action:** Apply conditional rendering to the trailing icon fragment, bind `withTrailingIcon` dynamically, and use a descriptive `aria-label`. diff --git a/.prettierignore b/.prettierignore index 38972655..a1b71b85 100644 --- a/.prettierignore +++ b/.prettierignore @@ -11,3 +11,5 @@ node_modules pnpm-lock.yaml package-lock.json yarn.lock +.jules/ +static/ 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}