From 4a775786023f82ab05b333651afac59f10d5be9f Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 6 Mar 2026 16:43:58 +0000
Subject: [PATCH] feat(ui): add semantic interaction and keyboard support to
 file diff headers

* Add `role="button"`, `tabindex="0"`, and `aria-expanded` attributes to `.file-header` elements
* Implement `onkeydown` handler for Enter and Space to toggle diff expansion
* Add `:focus-visible` styling for visual feedback during keyboard navigation
* Ensure `toggleFile` updates the `aria-expanded` state correctly
* Journal learning regarding custom div accordions in `.Jules/palette.md`

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

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 082d77a..69e2d8d 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 - Semantic Interaction for Custom Accordions
+**Learning:** Discovered a pattern where custom div-based accordions (like the file diff headers) look clickable to sighted users but lack semantic meaning (`role="button"`), keyboard focusability (`tabindex`), state communication (`aria-expanded`), and keyboard event handlers. This makes them completely inaccessible to keyboard and screen reader users.
+**Action:** When implementing custom interactive containers (like accordions or expanders), always provide complete semantic interaction: add `role="button"`, `tabindex="0"`, dynamic `aria-expanded` attributes, and ensure they respond to both `Enter` and `Space` key presses, along with explicit `:focus-visible` styling.
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 44fbbc0..69623b6 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,7 +1213,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" role="button" tabindex="0" aria-expanded="false" onclick="toggleFile('${file}', '${fileId}')" onkeydown="handleFileHeaderKeydown(event, '${file}', '${fileId}')">
                             <div class="file-path">
                                 <span class="expand-icon" id="icon-${fileId}">▶️</span>
                                 <span>${fileIcon}</span>
@@ -1259,21 +1265,32 @@ <h3>No Staged Changes</h3>
             }
         }
 
+        function handleFileHeaderKeydown(event, file, fileId) {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                toggleFile(file, fileId);
+            }
+        }
+
         async function toggleFile(file, fileId) {
             const diffDiv = document.getElementById(`diff-${fileId}`);
             const icon = document.getElementById(`icon-${fileId}`);
+            const header = icon.closest('.file-header');
 
             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 {