From 9481fe857cc4a14fe6c074b52a1c1cfed540e2fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?= <git@btao.org>
Date: Sat, 20 Jun 2026 12:17:24 +0100
Subject: [PATCH] fix(website/checkbox): wrap checkbox in a <label> so clicking
 text toggles it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The checkbox doc page rendered the label text as a plain <span> beside the
checkbox, so there was no HTML association between them — clicking the text did
nothing. Replace the outer <span> wrapper with a <label>; a <label> wrapping its
input forwards clicks to the box natively (no `for` attribute needed).

Also give each demo a distinct field name (agree/agreed/locked) so generated
checkbox ids are unique. All three demos previously shared field name `agree`,
producing duplicate id="agree" — which breaks LiveView DOM patching and would
make a for="agree" association ambiguous.

Adds a live test asserting each checkbox on the page sits inside a <label>.
---
 .../components/component_live_test.exs        | 12 ++++++++++
 website/components/docs/checkbox.ex           | 24 +++++++++++--------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/test/website/components/component_live_test.exs b/test/website/components/component_live_test.exs
index ae94f2a..6ab15b7 100644
--- a/test/website/components/component_live_test.exs
+++ b/test/website/components/component_live_test.exs
@@ -55,6 +55,18 @@ defmodule Shadix.Website.Components.ComponentLiveTest do
     assert has_element?(view, "#cfg-size-value[phx-update=ignore]")
   end
 
+  test "renders the checkbox page with labels that toggle their checkbox", %{conn: conn} do
+    {:ok, view, html} = live(conn, "/components/checkbox")
+
+    assert html =~ "Accept terms and conditions"
+
+    # Each checkbox's accompanying text is a <label> that wraps the input, so
+    # clicking the text toggles the box (native label-wraps-input behavior).
+    # A bare <span> label would not forward clicks to the input.
+    assert has_element?(view, "label input[type=checkbox]"),
+           "expected a <label> wrapping each checkbox on the checkbox page"
+  end
+
   test "renders the input page", %{conn: conn} do
     {:ok, _view, html} = live(conn, "/components/input")
     assert html =~ "A styled text input"
diff --git a/website/components/docs/checkbox.ex b/website/components/docs/checkbox.ex
index a605ed5..6dc812d 100644
--- a/website/components/docs/checkbox.ex
+++ b/website/components/docs/checkbox.ex
@@ -20,30 +20,34 @@ defmodule Shadix.Website.Components.Docs.Checkbox do
     assigns = assign_new(assigns, :form, fn -> Phoenix.Component.to_form(%{"demo" => false}) end)
 
     ~H"""
-    <span class="flex items-center gap-2">
+    <%!-- Wrapping <label> toggles the checkbox on text click (no `for` needed). --%>
+    <label class="flex items-center gap-2">
       <.checkbox field={@form[:demo]} />
       <span class="text-sm">Accept terms and conditions</span>
-    </span>
+    </label>
     """
   end
 
+  # Each demo uses a DISTINCT field name so the generated checkbox ids stay
+  # unique on the page (duplicate ids break LiveView DOM patching and would
+  # make a `for` association ambiguous).
   demo("Default", [description: "Unchecked and checked states side by side."], """
   <div class="flex flex-col gap-3">
-    <span class="flex items-center gap-2">
+    <label class="flex items-center gap-2">
       <.checkbox field={Phoenix.Component.to_form(%{"agree" => false})[:agree]} />
       <span class="text-sm">Accept terms and conditions</span>
-    </span>
-    <span class="flex items-center gap-2">
-      <.checkbox field={Phoenix.Component.to_form(%{"agree" => true})[:agree]} />
+    </label>
+    <label class="flex items-center gap-2">
+      <.checkbox field={Phoenix.Component.to_form(%{"agreed" => true})[:agreed]} />
       <span class="text-sm">Already agreed</span>
-    </span>
+    </label>
   </div>
   """)
 
   demo("Disabled", [description: "Pass the disabled global to prevent interaction."], """
-  <span class="flex items-center gap-2">
-    <.checkbox field={Phoenix.Component.to_form(%{"agree" => true})[:agree]} disabled />
+  <label class="flex items-center gap-2">
+    <.checkbox field={Phoenix.Component.to_form(%{"locked" => true})[:locked]} disabled />
     <span class="text-sm text-muted-foreground">Cannot be changed</span>
-  </span>
+  </label>
   """)
 end
-- 
2.51.2