diff --git a/.Jules/palette.md b/.Jules/palette.md index 58909748..6d536305 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -29,3 +29,6 @@ ## 2024-07-12 - [Dynamic Accessibility Labels for List Item Actions] **Learning:** Icon-only buttons (like Edit/Delete) inside lists pose a major accessibility challenge for VoiceOver users when identical labels ("Edit") are repeated without context, making it impossible to know which row is being acted on. **Action:** Always interpolate the dynamic item context (e.g., `item.name`) into both `.help()` tooltips and `.accessibilityLabel()` modifiers in repeated SwiftUI lists. Include fallback text for empty states (e.g., `"Unnamed Item"`). +## 2024-05-24 - [Accessible List Items] +**Learning:** Using `.onTapGesture` on list items or cards in SwiftUI breaks keyboard interactivity and drops standard accessibility traits. It prevents users from tabbing to the item or pressing Space/Enter to activate it. +**Action:** When making elements interactive, wrap them in a `Button` with `.buttonStyle(.plain)` instead of using `.onTapGesture`. This natively supports keyboard navigation and correctly propagates `.help()` and `.accessibilityLabel()` to screen readers. diff --git a/XboxControllerMapper/XboxControllerMapper/Views/Scripts/ScriptExamplesGalleryView.swift b/XboxControllerMapper/XboxControllerMapper/Views/Scripts/ScriptExamplesGalleryView.swift index d9c2a535..aaf73d3e 100644 --- a/XboxControllerMapper/XboxControllerMapper/Views/Scripts/ScriptExamplesGalleryView.swift +++ b/XboxControllerMapper/XboxControllerMapper/Views/Scripts/ScriptExamplesGalleryView.swift @@ -26,11 +26,15 @@ struct ScriptExamplesGalleryView: View { ScrollView { LazyVGrid(columns: columns, spacing: 12) { ForEach(ScriptExamplesData.all) { example in - ExampleCard(example: example) - .onTapGesture { - onSelect(example) - dismiss() - } + Button(action: { + onSelect(example) + dismiss() + }) { + ExampleCard(example: example) + } + .buttonStyle(.plain) + .help("Use \(example.name) example") + .accessibilityLabel("Use \(example.name) example") } } .padding()