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 |
|
||||
|---|---|
|
||||
@@ -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` |
|
||||
| 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 |
|
||||
| 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,
|
||||
Pencil,
|
||||
Plus,
|
||||
SquarePen,
|
||||
RefreshCw,
|
||||
Search,
|
||||
X
|
||||
@@ -596,8 +597,9 @@ function content_preview(ds: ae_DataStore): string {
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm preset-tonal-primary text-xs"
|
||||
onclick={() => open_edit(ds)}>
|
||||
Edit
|
||||
onclick={() => open_edit(ds)}
|
||||
title="Edit full record">
|
||||
<SquarePen size={12} class="mr-1" /> Edit
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user