style(data-stores): add icon to Edit button; update style guidelines
- Edit button now has SquarePen icon + text per button UX standard - Style guidelines: extract button icon+text rule into its own section 8 (was buried in Accessibility); renumber Accessibility to section 9; add code examples and context table for the rule Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -183,7 +183,37 @@ Always wrap in `{#if $lq__obj}{...}{:else}...skeleton...{/if}` — **never** sho
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 8. Accessibility (Section 508 / WCAG 2.1 AA)
|
## 8. Button UX Standard
|
||||||
|
|
||||||
|
**Default rule: every button includes a Lucide icon AND a text label.**
|
||||||
|
|
||||||
|
The icon gives instant visual recognition; the label removes ambiguity. This matters especially for non-English-native users and anyone scanning a UI quickly under conference-room pressure.
|
||||||
|
|
||||||
|
| Context | Acceptable pattern |
|
||||||
|
|---|---|
|
||||||
|
| Standard action buttons | Icon (left, `size={14-16}`) + text label — **preferred** |
|
||||||
|
| Space-constrained toolbars / icon rows | Icon-only — requires `title="..."` and `aria-label="..."` |
|
||||||
|
| Extremely tight inline cells | Text-only — acceptable only when no icon fits |
|
||||||
|
| Destructive / irreversible actions | Always icon + text, never icon-only |
|
||||||
|
|
||||||
|
```svelte
|
||||||
|
<!-- ✅ Standard -->
|
||||||
|
<button class="btn preset-tonal-primary">
|
||||||
|
<SquarePen size={14} class="mr-1" /> Edit
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- ✅ Icon-only (toolbar) -->
|
||||||
|
<button class="btn-icon preset-tonal-surface" title="Refresh results" aria-label="Refresh results">
|
||||||
|
<RefreshCw size={14} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- ❌ Text-only — add an icon -->
|
||||||
|
<button class="btn preset-tonal-primary">Edit</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. Accessibility (Section 508 / WCAG 2.1 AA)
|
||||||
|
|
||||||
| Requirement | Implementation |
|
| Requirement | Implementation |
|
||||||
|---|---|
|
|---|---|
|
||||||
@@ -195,7 +225,6 @@ Always wrap in `{#if $lq__obj}{...}{:else}...skeleton...{/if}` — **never** sho
|
|||||||
| Form inputs | Visible `<label>` linked via `for` / `id`, or explicit `aria-label` |
|
| Form inputs | Visible `<label>` linked via `for` / `id`, or explicit `aria-label` |
|
||||||
| Color-only information | Always pair color coding with icon or text — never color alone |
|
| Color-only information | Always pair color coding with icon or text — never color alone |
|
||||||
| Minimum touch target | 44×44px effective hit area for all tap targets |
|
| Minimum touch target | 44×44px effective hit area for all tap targets |
|
||||||
| Button label + icon | All buttons should include **both a Lucide icon and text label**. Icon-only is acceptable for space-constrained toolbar/header actions (with `title` attribute); text-only is acceptable when layout is extremely tight. The icon+text combination aids non-English-native users who may not read the label fluently. |
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -15,6 +15,7 @@ import {
|
|||||||
LoaderCircle,
|
LoaderCircle,
|
||||||
Pencil,
|
Pencil,
|
||||||
Plus,
|
Plus,
|
||||||
|
SquarePen,
|
||||||
RefreshCw,
|
RefreshCw,
|
||||||
Search,
|
Search,
|
||||||
X
|
X
|
||||||
@@ -596,8 +597,9 @@ function content_preview(ds: ae_DataStore): string {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="btn btn-sm preset-tonal-primary text-xs"
|
class="btn btn-sm preset-tonal-primary text-xs"
|
||||||
onclick={() => open_edit(ds)}>
|
onclick={() => open_edit(ds)}
|
||||||
Edit
|
title="Edit full record">
|
||||||
|
<SquarePen size={12} class="mr-1" /> Edit
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
Reference in New Issue
Block a user