responsive.desktop only content

responsive.desktop-only-content

Rule ID: responsive.desktop-only-content Severity: WARN Category: responsive Target Standards: Mobile-First Responsive Web Design (Luke Wroblewski), WCAG 2.2 Guideline 3.2 (Predictable - Consistent Navigation), Google Mobile-Friendly & Core Web Vitals Guidance

---

1. Overview & Core Invariant

Warns when primary action buttons or form submit controls are hidden on mobile viewports without mobile alternatives

Core Invariant:

"Primary call-to-action (CTA) controls, checkout buttons, and form submissions must not be hidden on the mobile baseline ('hidden md:...') without accessible mobile parity."

---

2. Technical Grounding & Engine Realities

In mobile-first design, hiding ancillary content (such as secondary marketing badges or decorative sidebars) on narrow viewports is standard practice.

However, hiding vital action triggers (e.g. 'Checkout', 'Bayar Sekarang', 'Kirim Berkas', or form submit buttons) via 'hidden md:flex' or 'hidden lg:block' leaves smartphone users stranded with incomplete user flows and broken core functionality.

Charites enforces that essential primary actions remain discoverable across all breakpoints, whether inline, within a bottom action sheet, or through a responsive floating bar.

---

3. Vulnerability & Risk Taxonomy

Risk Vector	Severity	Impact
Mobile User Conversion Disruption	HIGH	Smartphone users cannot complete essential transactions, checkouts, or form submissions when action buttons are hidden on mobile.
Inconsistent Navigation Experience	MEDIUM	Users switching between devices experience confusing functional disparity between desktop and mobile layouts.

---

4. Non-Compliant Code Patterns (Bad Examples)

TSX (Primary checkout button hidden on mobile baseline):

<button type="submit" className="hidden md:flex items-center px-4 py-2 bg-primary text-primary-foreground">
  Bayar Sekarang
</button>

---

5. Compliant Implementation Patterns (Good Examples)

TSX (Primary checkout button visible across all viewports with responsive sizing):

<button type="submit" className="flex items-center justify-center w-full md:w-auto px-4 py-2 bg-primary text-primary-foreground">
  Bayar Sekarang
</button>

---

6. Detection & Verification Pipeline (How The Rule Evaluates Code)

This rule evaluates source code through the standard AST inspection pipeline:

flowchart TD
    Node["AST Node (Astro / TSX element)"] --> Inspect["1. Inspect Element & Attributes"]
    Inspect --> Invariant{"2. Evaluate Rule Invariant"}
    Invariant -- "Compliant" --> Safe["Pass"]
    Invariant -- "Non-Compliant" --> IgnoreCheck{"3. Check charites:ignore directive"}
    IgnoreCheck -- "Ignored" --> Safe
    IgnoreCheck -- "Not Ignored" --> Diag["4. Emit Diagnostic: responsive.desktop-only-content"]

Loading

Step-by-Step Evaluation:

1. AST Traversal: Visits normalized ir.Node structures during AST streaming.
2. Invariant Check: Compares node attributes against rule invariants.
3. Directive Suppression Check: Honors inline charites:ignore responsive.desktop-only-content directives.
4. Diagnostic Emission: Emits compiler-grade diagnostic on invariant violation.

---

7. Verification & Test Harness (How The Test Works: 1-SSOT Tri-Corpus)

This rule is rigorously tested and validated across the canonical 1-SSOT Tri-Corpus in tests/correctness/responsive.desktop-only-content/:

flowchart TD
    subgraph GoldenCorpus ["1-SSOT Tri-Corpus Test Matrix for responsive.desktop-only-content"]
        subgraph P ["Positive Corpus (tests/correctness/responsive.desktop-only-content/positive/)"]
            P1["P1: Obvious Direct Violation"]
            P2["P2: Indirect / Variant Concatenation"]
            P3["P3: Helper / clsx / cn Wrapper"]
            P4["P4: Deeply Nested Elements"]
            P5["P5: Aliased Imports / Re-exports"]
        end
        subgraph N ["Negative Corpus (tests/correctness/responsive.desktop-only-content/negative/)"]
            N1["N1: Valid Design Tokens"]
            N2["N2: Explicit charites:ignore Directive"]
            N3["N3: Third-Party / Vendor Components"]
            N4["N4: Clean Semantic HTML"]
            N5["N5: Untokenized Custom Values (Banana Test)"]
        end
        subgraph A ["Adversarial Corpus (tests/correctness/responsive.desktop-only-content/adversarial/)"]
            A1["A1: Template Literal Interpolations"]
            A2["A2: Ternary Conditional Expressions"]
            A3["A3: Spread Properties & Dynamic Overrides"]
            A4["A4: Dynamic Object Class Syntax"]
            A5["A5: Shadowed Variable Identifiers"]
            A6["A6: Nested Closures & HOC Wrappers"]
            A7["A7: Obfuscated Classes & Cyclic Tokens"]
        end
    end

    P --> TestRunner["Automated Runner (rule_test.go)"]
    N --> TestRunner
    A --> TestRunner
    TestRunner --> Gates["Quality Gates: Zero Panic, Zero False-Positive, Zero Bypass"]

Loading

• Positive Fixtures (P1-P5): Verified to trigger diagnostics at exact lines and column spans.
• Negative Fixtures (N1-N5): Verified to produce zero diagnostics on valid tokens and legitimate exemptions.
• Adversarial Fixtures (A1-A7): Verified to prevent evasion across dynamic expressions, string interpolations, and cyclic references.

---

8. 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 responsive.desktop-only-content intentional exception -->

// charites:ignore responsive.desktop-only-content intentional exception

---

9. Configuration Reference (charites.yaml)

rules:
  responsive.desktop-only-content:
    severity: warn # error | warn | info | off