🎨 Palette: Improve CategoryRow hit target and accessibility

.jules/palette.md

@@ -0,0 +1,3 @@
+## 2025-02-18 - SwiftUI CategoryRow Hit Target and Accessibility
+**Learning:** Wrapping an entire row (`HStack`) in a single `Button` and applying `.contentShape(Rectangle())` dramatically increases the clickable hit target compared to just making a single small element (like a checkbox) clickable. Additionally, combining this with `.accessibilityElement(children: .combine)` and state-appropriate traits (`.accessibilityAddTraits([.isSelected])`) creates a unified and much more intuitive experience for VoiceOver users, treating the row as a single selectable item.
+**Action:** Always wrap entire list rows in `Button`s with `.contentShape(Rectangle())` when the row represents a selectable or actionable item, rather than placing individual small buttons inside the row.

Sources/Cacheout/Views/CategoryRow.swift

@@ -24,55 +24,58 @@ struct CategoryRow: View {
     let onToggle: () -> Void
 
     var body: some View {
-        HStack(spacing: 12) {
-            // Checkbox
-            Button(action: onToggle) {
+        Button(action: onToggle) {
+            HStack(spacing: 12) {
+                // Checkbox
                 Image(systemName: result.isSelected ? "checkmark.circle.fill" : "circle")
                     .font(.title3)
                     .foregroundStyle(result.isSelected ? .blue : .secondary)
-            }
-            .buttonStyle(.plain)
-            .disabled(result.isEmpty)
 
-            // Icon
-            Image(systemName: result.category.icon)
-                .font(.title3)
-                .frame(width: 24)
-                .foregroundStyle(iconColor)
+                // Icon
+                Image(systemName: result.category.icon)
+                    .font(.title3)
+                    .frame(width: 24)
+                    .foregroundStyle(iconColor)
 
-            // Name + description
-            VStack(alignment: .leading, spacing: 2) {
-                Text(result.category.name)
-                    .font(.body.weight(.medium))
-                if result.isEmpty {
-                    Text("Not found")
-                        .font(.caption)
-                        .foregroundStyle(.tertiary)
-                } else {
-                    Text(result.category.description)
-                        .font(.caption)
-                        .foregroundStyle(.secondary)
-                        .lineLimit(1)
+                // Name + description
+                VStack(alignment: .leading, spacing: 2) {
+                    Text(result.category.name)
+                        .font(.body.weight(.medium))
+                    if result.isEmpty {
+                        Text("Not found")
+                            .font(.caption)
+                            .foregroundStyle(.tertiary)
+                    } else {
+                        Text(result.category.description)
+                            .font(.caption)
+                            .foregroundStyle(.secondary)
+                            .lineLimit(1)
+                    }
                 }
-            }
 
-            Spacer()
+                Spacer()
 
-            // Size
-            if !result.isEmpty {
-                Text(result.formattedSize)
-                    .font(.body.monospacedDigit())
-                    .foregroundStyle(.primary)
-            }
+                // Size
+                if !result.isEmpty {
+                    Text(result.formattedSize)
+                        .font(.body.monospacedDigit())
+                        .foregroundStyle(.primary)
+                }
 
-            // Risk badge
-            if !result.isEmpty {
-                RiskBadge(level: result.category.riskLevel)
+                // Risk badge
+                if !result.isEmpty {
+                    RiskBadge(level: result.category.riskLevel)
+                }
             }
+            .padding(.vertical, 6)
+            .padding(.horizontal, 10)
+            .opacity(result.isEmpty ? 0.5 : 1)
+            .contentShape(Rectangle())
         }
-        .padding(.vertical, 6)
-        .padding(.horizontal, 10)
-        .opacity(result.isEmpty ? 0.5 : 1)
+        .buttonStyle(.plain)
+        .disabled(result.isEmpty)
+        .accessibilityElement(children: .combine)
+        .accessibilityAddTraits(result.isSelected ? [.isSelected] : [])
     }
 
     private var iconColor: Color {