a11y.form label missing control

a11y.form-label-missing-control

Rule ID: a11y.form-label-missing-control Severity: ERROR Category: a11y Target Standards: W3C Web Content Accessibility Guidelines (WCAG) 2.2 SC 1.3.1 (Info and Relationships), W3C WAI-ARIA 1.2 Form Pattern Specifications, Shadcn UI Form Component Architecture Contract

---

1. Overview & Core Invariant

Enforces that Shadcn UI containing also contains an associated or input element

Core Invariant:

"Every containing a must provide an associated or interactive input element."

---

2. Technical Grounding & Engine Realities

In component libraries built on Radix UI and React Hook Form (such as Shadcn UI), automatically generates unique IDs and wires to via ARIA attributes.

When developers render a inside a but forget to include (e.g. placing plain text, descriptions, or unassociated elements instead):

1. Broken Accessibility Tree: Screen reader users hear the label announcement but cannot identify or interact with the corresponding input field.
2. Silent Failure: React and TypeScript compile cleanly because JSX treats custom components as valid React nodes.
3. Form Confusion: Tapping the label does not focus any active control.

Charites inspects the component tree of each to guarantee relational completeness.

---

3. Vulnerability & Risk Taxonomy

Risk Vector	Severity	Impact
Orphaned Accessible Label	HIGH	Assistive technology cannot pair the form label with an interactive form control.
Broken Click-to-Focus Affordance	MEDIUM	Users tapping the label on mobile cannot focus the intended input field.

---

4. Non-Compliant Code Patterns (Bad Examples)

TSX (FormItem has FormLabel but lacks FormControl or input):

<FormItem>
  <FormLabel>Nama Lengkap</FormLabel>
  <p className="text-sm text-muted-foreground">Silakan hubungi administrator</p>
</FormItem>

---

5. Compliant Implementation Patterns (Good Examples)

TSX (Proper Shadcn UI FormItem composition with FormControl):

<FormItem>
  <FormLabel>Nama Lengkap</FormLabel>
  <FormControl>
    <Input placeholder="Nama Anda" />
  </FormControl>
</FormItem>

---

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.form-label-missing-control intentional exception -->

// charites:ignore a11y.form-label-missing-control intentional exception

---

7. Configuration Reference (charites.yaml)

rules:
  a11y.form-label-missing-control:
    severity: error # 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.