From 01f82d41d6ee125f1537c0b58012c4baaec71c0a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 9 Jun 2026 06:27:35 +0000
Subject: [PATCH] Accessible node_modules section header

Co-authored-by: acebytes <2820910+acebytes@users.noreply.github.com>
---
 .jules/palette.md                               | 3 +++
 Sources/Cacheout/Views/NodeModulesSection.swift | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/.jules/palette.md b/.jules/palette.md
index f2d658a..e87a912 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -17,3 +17,6 @@
 ## 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.
+## 2024-05-26 - Accessible Section Headers
+**Learning:** In SwiftUI, custom section header buttons with mixed content (e.g., icons, text, dynamic counts) are read as separate, disconnected elements by VoiceOver if left unconfigured, and adding an explicit accessibility label hides the dynamic text content.
+**Action:** Apply `.accessibilityElement(children: .combine)` to group the content, use `.accessibilityValue` to announce the dynamic expanded/collapsed state, and provide an `.accessibilityHint` for interaction context, ensuring VoiceOver naturally reads all concatenated text while providing proper control state.
diff --git a/Sources/Cacheout/Views/NodeModulesSection.swift b/Sources/Cacheout/Views/NodeModulesSection.swift
index 9f0af4e..fd9cb48 100644
--- a/Sources/Cacheout/Views/NodeModulesSection.swift
+++ b/Sources/Cacheout/Views/NodeModulesSection.swift
@@ -58,6 +58,9 @@ struct NodeModulesSection: View {
                 .contentShape(Rectangle())
             }
             .buttonStyle(.plain)
+            .accessibilityElement(children: .combine)
+            .accessibilityValue(isExpanded ? "Expanded" : "Collapsed")
+            .accessibilityHint("Double tap to toggle section")
 
             if isExpanded && viewModel.isNodeModulesScanning {
                 HStack {