diff --git a/.jules/palette.md b/.jules/palette.md new file mode 100644 index 0000000..858fa61 --- /dev/null +++ b/.jules/palette.md @@ -0,0 +1,3 @@ +## 2024-05-30 - Make SwiftUI List Rows Fully Clickable +**Learning:** In SwiftUI, just having a button in an HStack restricts the clickable area. Furthermore, wrapping an HStack in a button requires `.contentShape(Rectangle())` to make whitespace clickable and specific `.accessibilityElement(children: .combine)` and `.accessibilityAddTraits` to ensure proper VoiceOver behavior. +**Action:** Always wrap the entire row contents in a Button, apply `.contentShape(Rectangle())`, and apply proper accessibility traits when building custom list rows. diff --git a/Sources/Cacheout/Views/CategoryRow.swift b/Sources/Cacheout/Views/CategoryRow.swift index 2653aae..ee99b7d 100644 --- a/Sources/Cacheout/Views/CategoryRow.swift +++ b/Sources/Cacheout/Views/CategoryRow.swift @@ -24,15 +24,12 @@ 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) @@ -70,6 +67,12 @@ struct CategoryRow: View { RiskBadge(level: result.category.riskLevel) } } + .contentShape(Rectangle()) + } + .buttonStyle(.plain) + .disabled(result.isEmpty) + .accessibilityElement(children: .combine) + .accessibilityAddTraits(result.isSelected ? [.isSelected] : []) .padding(.vertical, 6) .padding(.horizontal, 10) .opacity(result.isEmpty ? 0.5 : 1)