Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(data-stores): add icon to Edit button; update style guidelines

Browse Source 
- 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:
Scott Idem
2026-06-17 16:24:42 -04:00
parent f2b4b9802d
commit 313eca076d
2 changed files with 35 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
documentation/GUIDE__AE_UI_Style_Guidelines.md
View File

@@ -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. |
---