From 75fafe218496564cf292eb1d1ee108d6b793f050 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 4 Mar 2026 16:35:29 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20keyboard=20acce?=
 =?UTF-8?q?ssibility=20to=20file=20accordions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: PrakharMNNIT <73683289+PrakharMNNIT@users.noreply.github.com>
---
 .Jules/palette.md | 4 ++++
 public/index.html | 6 +++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 082d77a..cb0d930 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -1,3 +1,7 @@
 ## 2024-05-15 - ARIA and Focus Polish for Review Modals
 **Learning:** Found an accessibility issue pattern where custom visual interactive elements like comment icons embedded in diff views lack both ARIA descriptions and `:focus-visible` styling, making them invisible and unexplained to keyboard/screen reader users.
 **Action:** When adding interactive icons to complex nested views (like a diff viewer), always pair ARIA labels with explicit `:focus-visible` styling that matches the `:hover` interaction to ensure full keyboard support.
+
+## 2024-05-15 - ARIA Expanded and Keyboard Support for Accordions
+**Learning:** Adding keyboard support to composite components (like an accordion header with internal buttons/checkboxes) requires careful event handling to prevent inner element interactions from triggering the parent action.
+**Action:** When adding `onkeydown` to make a component accessible, always check `event.target === this` if there are nested interactive elements. Also, remember to dynamically update `aria-expanded` state during the toggling lifecycle to communicate visibility to screen readers.
diff --git a/public/index.html b/public/index.html
index 44fbbc0..3064930 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1207,7 +1207,7 @@ <h3>No Staged Changes</h3>
                     const fileDiv = document.createElement('div');
                     fileDiv.className = 'file-item';
                     fileDiv.innerHTML = `
-                        <div class="file-header" onclick="toggleFile('${file}', '${fileId}')">
+                        <div class="file-header" id="header-${fileId}" role="button" tabindex="0" aria-expanded="false" aria-controls="diff-${fileId}" onclick="toggleFile('${file}', '${fileId}')" onkeydown="if(event.key === 'Enter' || event.key === ' ') { if(event.target === this) { event.preventDefault(); toggleFile('${file}', '${fileId}'); } }">
                             <div class="file-path">
                                 <span class="expand-icon" id="icon-${fileId}">▶️</span>
                                 <span>${fileIcon}</span>
@@ -1262,18 +1262,22 @@ <h3>No Staged Changes</h3>
         async function toggleFile(file, fileId) {
             const diffDiv = document.getElementById(`diff-${fileId}`);
             const icon = document.getElementById(`icon-${fileId}`);
+            const header = document.getElementById(`header-${fileId}`);
 
             if (diffDiv.classList.contains('active')) {
                 diffDiv.classList.remove('active');
                 icon.classList.remove('rotated');
+                if (header) header.setAttribute('aria-expanded', 'false');
                 return;
             }
 
             // Close all other diffs
             document.querySelectorAll('.file-diff').forEach(d => d.classList.remove('active'));
             document.querySelectorAll('.expand-icon').forEach(i => i.classList.remove('rotated'));
+            document.querySelectorAll('.file-header').forEach(h => h.setAttribute('aria-expanded', 'false'));
 
             icon.classList.add('rotated');
+            if (header) header.setAttribute('aria-expanded', 'true');
 
             if (!allDiffs[file]) {
                 try {