make list text clickable to toggle

e2e/tests/lists.spec.ts

@@ -34,6 +34,17 @@ test("a user can check off an item", async ({ page }) => {
   await expect(row).toHaveClass(/is-checked/);
 });
 
+test("clicking an item's text toggles the checkbox", async ({ page }) => {
+  await registerAndLogin(page, "alice@example.com");
+  await createList(page, "Weekly shop");
+  await addItem(page, "Apple");
+
+  const row = page.locator(".item-row").filter({ hasText: "Apple" });
+  await row.locator(".item-copy").click();
+
+  await expect(row).toHaveClass(/is-checked/);
+});
+
 test("a user can edit an item via the actions modal", async ({ page }) => {
   await registerAndLogin(page, "alice@example.com");
   await createList(page, "Weekly shop");

src/views.rs

@@ -664,11 +664,11 @@ fn item_row(item: &Item, categories: &[Category], csrf_token: &str) -> Markup {
             {
                 input type="hidden" name="csrf" value=(csrf_token);
                 input type="hidden" name="checked" value=(next_checked);
-                button class="check-button" type="submit" aria-label=(if item.checked { "Mark unchecked" } else { "Mark complete" }) {
+                button id=(format!("item-check-{}", item.id)) class="check-button" type="submit" aria-label=(if item.checked { "Mark unchecked" } else { "Mark complete" }) {
                     @if item.checked { "✓" } @else { "" }
                 }
             }
-            div class="item-copy" {
+            label class="item-copy" for=(format!("item-check-{}", item.id)) {
                 @if !item.quantity.is_empty() {
                     span class="item-qty" { "(" (item.quantity) ")" }
                 }