a11y.button type missing

a11y.button-type-missing

Rule ID: a11y.button-type-missing Severity: WARN Category: a11y Target Standards: W3C Web Content Accessibility Guidelines (WCAG) 2.2 SC 3.2.2 (On Input), HTML Living Standard 4.10.6 (The button element), React SPA Form Submission Invariants

---

1. Overview & Core Invariant

Enforces explicit type attribute on elements inside forms to prevent unintended form submission

Core Invariant:

" elements nested within a must explicitly declare their type attribute (type="button", type="submit", or type="reset")."

---

2. Technical Grounding & Engine Realities

In HTML and React applications, a without an explicit type attribute defaults to type="submit".

When secondary action buttons (such as "Batal", "Close", "Preview", or modal dismiss buttons) are placed inside a

without type="button":

1. Unintended Submission: Clicking the button triggers the enclosing form's onSubmit handler and validation logic.
2. Unwanted Full-Page Reload: If event.preventDefault() is missing in the click handler, the browser reloads the entire page.
3. State Mutation Hazards: Form fields may be serialized or posted inadvertently to the server.

Charites traverses element ancestors to detect tags rendered inside lacking explicit type definitions.

---

3. Vulnerability & Risk Taxonomy

Risk Vector	Severity	Impact
Accidental Form Submission	HIGH	Clicking secondary buttons submits the form, triggers validation errors, or mutates data.
Full-Page Browser Reload	MEDIUM	React SPAs reload the entire page unexpectedly if event.preventDefault is absent.

---

4. Non-Compliant Code Patterns (Bad Examples)

TSX (Button inside form lacks type, defaulting to type="submit"):

<form onSubmit={handleSubmit}>
  <input name="query" className="h-11 px-3.5 text-base border rounded-lg" />
  <button onClick={handlePreview} className="h-11 px-4 text-sm font-medium">Pratinjau</button>
  <button type="submit" className="h-11 px-4 text-sm font-medium bg-primary text-primary-foreground">Simpan</button>
</form>

---

5. Compliant Implementation Patterns (Good Examples)

TSX (Explicit type="button" prevents accidental submission):

<form onSubmit={handleSubmit}>
  <input name="query" className="h-11 px-3.5 text-base border rounded-lg" />
  <button type="button" onClick={handlePreview} className="h-11 px-4 text-sm font-medium">Pratinjau</button>
  <button type="submit" className="h-11 px-4 text-sm font-medium bg-primary text-primary-foreground">Simpan</button>
</form>

---

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.button-type-missing intentional exception -->

// charites:ignore a11y.button-type-missing intentional exception

---

7. Configuration Reference (charites.yaml)

rules:
  a11y.button-type-missing:
    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.