From 480e64c3108e20c50ace07467a8f925af593baaf Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 7 Mar 2026 16:40:26 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement]=20?=
 =?UTF-8?q?Add=20full=20keyboard=20&=20screen=20reader=20accessibility=20t?=
 =?UTF-8?q?o=20file=20accordion=20headers?=
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 | 23 ++++++++++++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 082d77a..b7a4dc2 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-16 - Full Accessibility for Div-Based Accordion Headers
+**Learning:** Discovered that custom div-based interactive elements used for accordion behaviors (e.g., file headers to show diffs) often lack keyboard interactivity out-of-the-box. When building such headers, screen reader and keyboard-only users will miss the content entirely without deliberate enhancements.
+**Action:** Always implement explicit ARIA attributes (`role="button"`, `tabindex="0"`, `aria-expanded`), add `:focus-visible` styling matching `:hover`, and ensure `onkeydown` supports both 'Enter' and 'Space' actions.
diff --git a/public/index.html b/public/index.html
index 44fbbc0..e155abe 100644
--- a/public/index.html
+++ b/public/index.html
@@ -120,8 +120,11 @@
             user-select: none;
         }
 
-        .file-header:hover {
+        .file-header:hover,
+        .file-header:focus-visible {
             background: #21262d;
+            outline: 2px solid #58a6ff;
+            outline-offset: -2px;
         }
 
         .file-path {
@@ -1207,7 +1210,12 @@ <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"
+                             role="button"
+                             tabindex="0"
+                             aria-expanded="false"
+                             onclick="toggleFile('${file}', '${fileId}')"
+                             onkeydown="if(event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggleFile('${file}', '${fileId}'); }">
                             <div class="file-path">
                                 <span class="expand-icon" id="icon-${fileId}">▶️</span>
                                 <span>${fileIcon}</span>
@@ -1262,18 +1270,27 @@ <h3>No Staged Changes</h3>
         async function toggleFile(file, fileId) {
             const diffDiv = document.getElementById(`diff-${fileId}`);
             const icon = document.getElementById(`icon-${fileId}`);
+            const header = diffDiv.previousElementSibling;
 
             if (diffDiv.classList.contains('active')) {
                 diffDiv.classList.remove('active');
                 icon.classList.remove('rotated');
+                header.setAttribute('aria-expanded', 'false');
                 return;
             }
 
             // Close all other diffs
-            document.querySelectorAll('.file-diff').forEach(d => d.classList.remove('active'));
+            document.querySelectorAll('.file-diff').forEach(d => {
+                d.classList.remove('active');
+                const h = d.previousElementSibling;
+                if (h && h.classList.contains('file-header')) {
+                    h.setAttribute('aria-expanded', 'false');
+                }
+            });
             document.querySelectorAll('.expand-icon').forEach(i => i.classList.remove('rotated'));
 
             icon.classList.add('rotated');
+            header.setAttribute('aria-expanded', 'true');
 
             if (!allDiffs[file]) {
                 try {