a11y.touch target spacing

a11y.touch-target-spacing

Rule ID: a11y.touch-target-spacing Severity: WARN Category: a11y Target Standards: WCAG 2.2 Success Criterion 2.5.8 (Target Size & Spacing), Apple Human Interface Guidelines (Hit Target Separation)

---

1. Overview & Core Invariant

Enforces at least 8px spacing between adjacent interactive elements to prevent miss-taps (WCAG 2.5.8)

Core Invariant:

"Adjacent interactive elements within flex/grid containers must provide at least 8px physical spacing (e.g. gap-2) to avoid accidental miss-taps."

---

2. Technical Grounding & Engine Realities

When interactive controls (such as Delete and Cancel buttons) are placed adjacent to each other with gap-0, gap-1 (4px), or no spacing at all, users frequently suffer from miss-taps:

1. Destructive Activation: A user aiming for 'Cancel' inadvertently triggers 'Delete'.
2. Touch Jitter: Natural hand tremor or unstable mobile contexts (walking, transit) compound target activation errors.

Charites enforces a minimum 8px boundary (Tailwind gap-2 or equivalent) across sibling interactive controls.

---

3. Vulnerability & Risk Taxonomy

Risk Vector	Severity	Impact
Accidental Destructive Actions	HIGH	Users trigger irreversible data loss due to cramped button spacing.

---

4. Non-Compliant Code Patterns (Bad Examples)

TSX (Zero gap between action buttons in a flex row):

<div className="flex gap-0"><button className="bg-destructive text-white">Hapus</button><button>Batal</button></div>

ASTRO (Cramped 4px gap between icon buttons):

<div class="flex gap-1"><button aria-label="Edit"><EditIcon /></button><button aria-label="Delete"><TrashIcon /></button></div>

---

5. Compliant Implementation Patterns (Good Examples)

TSX (Proper 12px separation between destructive and neutral actions):

<div className="flex gap-3"><button>Batal</button><button className="bg-destructive text-white">Hapus</button></div>

ASTRO (Standard 8px spacing between toolbar buttons):

<div class="flex gap-2"><button aria-label="Edit"><EditIcon /></button><button aria-label="Delete"><TrashIcon /></button></div>

---

6. How to Suppress (Ignore Directives)

If this pattern is required for an intentional exception, suppress the diagnostic using the canonical Charites Rule ID:

<!-- charites:ignore a11y.touch-target-spacing intentional exception -->

// charites:ignore a11y.touch-target-spacing intentional exception

---

7. Configuration Reference (charites.yaml)

rules:
  a11y.touch-target-spacing:
    severity: warn # error | warn | info | off

---

8. Architectural Domain & Verification Reference

• Domain Architecture & Analysis Pipeline: See the a11y Category Guide.
• 1-SSOT Golden Tri-Corpus Test Matrix: See the Verification Harness on the Master Home page.
• Rule Catalog Index: See Master Wiki Home.