mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 11:43:26 +08:00
84 lines
3.8 KiB
Markdown
84 lines
3.8 KiB
Markdown
# Validation Checklists
|
|
|
|
Run through these checks before finalizing any SLDS-authored component. Check IDs align with the design-systems-slds-validate skill's quality-checks.md.
|
|
|
|
|
|
## Theming & Styling (T-series)
|
|
|
|
Code produced by this skill should score high on T-series checks.
|
|
|
|
| Check | What to verify | Audit ID |
|
|
|-------|---------------|----------|
|
|
| **Hook fallbacks** | Every `var(--slds-g-*)` has a fallback value | T002 |
|
|
| **Surface pairing** | `surface-*` bg paired with `on-surface-*` text | T010 |
|
|
| **Container pairing** | `surface-container-*` bg paired with `on-surface-*` text | T011 |
|
|
| **Accent pairing** | `accent-*` bg paired with `on-accent-*` text | T012 |
|
|
| **Feedback pairing** | Feedback colors paired with correct text hooks | T013 |
|
|
| **Spacing hooks** | Spacing uses `var(--slds-g-spacing-*)` or utility classes | T020 |
|
|
| **No magic pixels** | No arbitrary `px` values for spacing | T021 |
|
|
| **Font family hooks** | `font-family` uses `var(--slds-g-font-family-*)` | T030 |
|
|
| **Font size hooks** | `font-size` uses `var(--slds-g-font-scale-*)` or `var(--slds-g-font-size-base)` -- NOT `var(--slds-g-font-size-N)` | T031 |
|
|
| **Font weight hooks** | `font-weight` uses `var(--slds-g-font-weight-*)` | T032 |
|
|
| **Shadow hooks** | Shadows use `var(--slds-g-shadow-*)` | T040 |
|
|
| **Border radius hooks** | Border radius uses `var(--slds-g-radius-*)` | T041 |
|
|
| **Color hooks numbered** | Every `--slds-g-color-*` hook ends in a number (no bare `on-surface`, `on-accent`, etc.) | T050 |
|
|
| **No invented hooks** | Every hook referenced actually exists in `assets/hooks-index.json` | T051 |
|
|
| **No hardcoded colors** | No hex, rgb, or named colors (linter also catches this) | linter |
|
|
| **No class overrides** | No `.slds-*` class overrides (linter also catches this) | linter |
|
|
| **No deprecated tokens** | No `--lwc-*` tokens (linter also catches this) | linter |
|
|
|
|
---
|
|
|
|
## Code Quality (Q-series)
|
|
|
|
| Check | What to verify | Audit ID |
|
|
|-------|---------------|----------|
|
|
| **No !important** | No `!important` declarations | Q001 |
|
|
| **No inline styles** | No `style="..."` in HTML | Q002 |
|
|
| **Custom class prefix** | Custom classes use `my-*`, `c-*`, or namespace prefix | Q010 |
|
|
| **No dynamic SLDS class manipulation** | Avoid `.classList.add/remove/toggle('slds-*')` patterns in JS | Q012 |
|
|
| **No magic numbers** | All numeric values have clear purpose | Q020 |
|
|
|
|
---
|
|
|
|
## Component Usage (C-series)
|
|
|
|
| Check | What to verify | Audit ID |
|
|
|-------|---------------|----------|
|
|
| **LBC inputs** (LWC) | Use `<lightning-input>` not `<input>` | C001 |
|
|
| **LBC buttons** (LWC) | Use `<lightning-button>` not `<button>` | C002 |
|
|
| **LBC icons** (LWC) | Use `<lightning-icon>` not custom SVG | C003 |
|
|
| **Blueprint structure** | Cards use `slds-card`, modals use `slds-modal`, etc. | C010-C013 |
|
|
|
|
---
|
|
|
|
## Accessibility Reminders (A-series)
|
|
|
|
Deep accessibility is owned by the **accessibility skill**. These are minimal reminders to nudge agents.
|
|
|
|
| Check | What to verify | Audit ID |
|
|
|-------|---------------|----------|
|
|
| **Icon alt text** | All `<lightning-icon>` have `alternative-text` (empty string for decorative) | A004 |
|
|
| **Image alt text** | All `<img>` have `alt` attribute | A005 |
|
|
| **Color not sole indicator** | Status uses icon or text too, not just color | A030 |
|
|
| **No outline:none** | Don't remove focus outline without replacement | A021 |
|
|
|
|
For full WCAG compliance, apply the accessibility skill after authoring.
|
|
|
|
---
|
|
|
|
## Quick Validation Script
|
|
|
|
Run the SLDS linter to catch the most common issues automatically:
|
|
|
|
```bash
|
|
npx @salesforce-ux/slds-linter@latest lint .
|
|
```
|
|
|
|
The linter catches:
|
|
- `slds/class-override` -- overriding SLDS classes
|
|
- `slds/lwc-token-to-slds-hook` -- deprecated tokens
|
|
- `slds/no-hardcoded-values` -- hardcoded colors/spacing
|
|
|
|
Everything above the linter line must be checked manually or by the auditing skill.
|