diff --git a/.jules/palette.md b/.jules/palette.md index abfc068..f2d658a 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -13,3 +13,7 @@ ## 2024-05-25 - Tooltips on Icon-only Controls **Learning:** While `.accessibilityLabel` is required for VoiceOver users on icon-only controls, sighted mouse users can also struggle to understand the purpose of these controls without visual feedback. **Action:** Always add a `.help()` modifier to icon-only controls in SwiftUI to provide a hover tooltip for mouse users, complementing the `.accessibilityLabel()` for screen reader users. + +## 2024-05-25 - Dynamic Labels and Disabled State Tooltips +**Learning:** Users can feel confused when a primary button is disabled without explanation or when a long-running action lacks immediate inline text feedback on the button itself. +**Action:** In SwiftUI, enhance button accessibility and UX by adding `.help()` tooltips to explain the required state when disabled, and using dynamic labels (e.g., 'Scanning...') to provide immediate feedback during async operations. diff --git a/Sources/Cacheout/Views/ContentView.swift b/Sources/Cacheout/Views/ContentView.swift index e242eac..6951bd3 100644 --- a/Sources/Cacheout/Views/ContentView.swift +++ b/Sources/Cacheout/Views/ContentView.swift @@ -222,19 +222,21 @@ struct ContentView: View { Button { Task { await viewModel.scan() } } label: { - Label("Scan", systemImage: "arrow.clockwise") + Label(viewModel.isScanning ? "Scanning..." : "Scan", systemImage: "arrow.clockwise") } .disabled(viewModel.isScanning) + .help(viewModel.isScanning ? "Scan in progress" : "Scan for caches") // Clean button Button { viewModel.showCleanConfirmation = true } label: { - Label("Clean Selected", systemImage: "trash") + Label(viewModel.isCleaning ? "Cleaning..." : "Clean Selected", systemImage: "trash") } .buttonStyle(.borderedProminent) .tint(.red) .disabled(!viewModel.hasSelection || viewModel.isCleaning) + .help(viewModel.isCleaning ? "Cleanup in progress" : (!viewModel.hasSelection ? "Select at least one item to clean" : "Clean selected items")) } .padding(.horizontal) .padding(.vertical, 10)