From 7b10433889382cf823f855a2be41e5478424fe8c Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 8 Mar 2026 16:19:46 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Make=20file=20headers?=
 =?UTF-8?q?=20keyboard=20accessible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: praxstack <73683289+praxstack@users.noreply.github.com>
---
 .Jules/palette.md |  8 ++++++--
 public/index.html | 22 +++++++++++++++++++---
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 082d77a..ccf8229 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.
+**Learning:** Found an accessibility issue pattern where custom visual interactive elements like comment icons embedded in diff views lack both semantic ARIA labels and clear focus rings, making them invisible to screen readers and difficult to navigate via keyboard.
+**Action:** When adding interactive icons to complex nested views (like a diff viewer), always pair ARIA labels with explicit `:focus-visible` styling (`outline: 2px solid var(--accent); outline-offset: -2px;`) to ensure full keyboard and screen reader accessibility without adding custom CSS classes.
+
+## 2024-05-20 - Custom Interactive Div Accessibility
+**Learning:** In vanilla JavaScript UI with custom interactive components like accordions (e.g., file diff expanders built with `<div>`), developers frequently forget keyboard accessibility. Since they aren't native `<button>` or `<details>` elements, keyboard users cannot tab to them or activate them with Enter/Space.
+**Action:** When creating or modifying custom interactive `.file-header` components (or similar interactive `<div>` elements), always implement explicit ARIA attributes (`role="button"`, `tabindex="0"`, `aria-expanded`), add `:focus-visible` styling for a clear focus ring, and attach a keyboard event handler (`onkeydown`) to trigger the same action as the click event on Enter or Space keys.
diff --git a/public/index.html b/public/index.html
index 44fbbc0..35a2dbe 100644
--- a/public/index.html
+++ b/public/index.html
@@ -124,6 +124,12 @@
             background: #21262d;
         }
 
+        .file-header:focus-visible {
+            outline: 2px solid #58a6ff;
+            outline-offset: -2px;
+            background: #21262d;
+        }
+
         .file-path {
             display: flex;
             align-items: center;
@@ -1207,10 +1213,16 @@ <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"
+                             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>
+                                <span class="expand-icon" id="icon-${fileId}" aria-hidden="true">▶️</span>
+                                <span aria-hidden="true">${fileIcon}</span>
                                 <span>${file}</span>
                             </div>
                             <div style="display: flex; align-items: center; gap: 12px;">
@@ -1262,18 +1274,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 {