From b7e8ef05158777c0ad411e24c1da0a51593d2166 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Mon, 5 Oct 2026 14:39:01 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=8B=A8=EC=B6=95?=
 =?UTF-8?q?=ED=82=A4=20=ED=88=B4=ED=8C=81=20=EB=B0=8F=20aria-keyshortcuts?=
 =?UTF-8?q?=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .jules/palette.md              | 3 +++
 scanner/dashboard/console.html | 4 ++--
 scanner/dashboard/index.html   | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index ea004e2d2..c11d6aae4 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -81,3 +81,6 @@
 ## 2026-08-12 - Skip to Content Accessibility
 **Learning:** Screen reader and keyboard-only users experience significant friction when forced to navigate through repetitive header controls on every page load.
 **Action:** Keep a visible-on-focus skip link as the first interactive element, target a programmatically focusable main container, and give the focused link a high-contrast outline.
+## 2024-10-05 - Accessibility for Close buttons with ESC shortcut
+**Learning:** For icon-only buttons that trigger actions with keyboard shortcuts like Escape, adding an `aria-keyshortcuts` programmatic attribute satisfies screen reader accessibility when paired with a visual tooltip via the `title` attribute.
+**Action:** Always pair `title="Action (Shortcut)"` with `aria-keyshortcuts="Shortcut"` for keyboard-accessible interactive elements.
diff --git a/scanner/dashboard/console.html b/scanner/dashboard/console.html
index 7ec262af4..3076332b2 100644
--- a/scanner/dashboard/console.html
+++ b/scanner/dashboard/console.html
@@ -158,7 +158,7 @@ <h1>AppGuardrail Console</h1>
     const rows=(s.findings||[]).map(f=>`<tr><td><span class="pill" style="background:${SEV[f.severity]||'var(--info)'}">${esc(f.severity)}</span></td>
       <td><code>${esc(f.rule_id)}</code></td><td>${esc((f.message||"").split("\n")[0].slice(0,120))}</td>
       <td><code>${esc(f.file)}:${esc(f.line)}</code></td></tr>`).join("");
-    d.innerHTML=`<button type="button" class="close-btn" aria-label="Close details">✕</button><strong>Scan #${esc(s.id)}</strong> <span class="muted">${esc(s.created_at)} · ${esc(s.repo||"—")}</span>
+    d.innerHTML=`<button type="button" class="close-btn" aria-label="Close details" title="Close details (Esc)" aria-keyshortcuts="Escape">✕</button><strong>Scan #${esc(s.id)}</strong> <span class="muted">${esc(s.created_at)} · ${esc(s.repo||"—")}</span>
       <table style="margin-top:8px"><thead><tr><th scope="col">Severity</th><th scope="col">Rule</th><th scope="col">Finding</th><th scope="col">Location</th></tr></thead>
       <tbody>${rows||'<tr><td colspan="4" class="muted">No findings.</td></tr>'}</tbody></table>`;
     d.querySelector(".close-btn").addEventListener("click",closeDetail);
@@ -166,7 +166,7 @@ <h1>AppGuardrail Console</h1>
     d.focus({preventScroll:true});
   }catch(e){
     if(requestId!==currentDetailRequest)return;
-    d.innerHTML='<button type="button" class="close-btn" aria-label="Close details">✕</button><div role="alert" class="err">Error loading details: '+esc(e.message)+'</div>';
+    d.innerHTML='<button type="button" class="close-btn" aria-label="Close details" title="Close details (Esc)" aria-keyshortcuts="Escape">✕</button><div role="alert" class="err">Error loading details: '+esc(e.message)+'</div>';
     d.querySelector(".close-btn").addEventListener("click",closeDetail);
     scrollDetailIntoView(d);
     d.focus({preventScroll:true});
diff --git a/scanner/dashboard/index.html b/scanner/dashboard/index.html
index 132bc31b2..42454ba27 100644
--- a/scanner/dashboard/index.html
+++ b/scanner/dashboard/index.html
@@ -290,7 +290,7 @@ <h1>Dashboard</h1>
     <div class="dlg-head">
       <span class="chip" style="background:${SEV[s]?SEV[s].color:'var(--info)'}">${esc(s)}</span>
       <span class="t" id="dlg-title">${esc(f.rule_id)}</span>
-      <button aria-label="Close" title="Close (Esc)" onclick="document.getElementById('detail').close()">✕</button>
+      <button aria-label="Close" title="Close (Esc)" aria-keyshortcuts="Escape" onclick="document.getElementById('detail').close()">✕</button>
     </div>
     <div class="dlg-body">
       <p class="file">${esc(f.file)}:${esc(f.line)} · ${esc(f.category)} · context: ${esc(f.context||'app-code')}${isDeployBlocking(f)?' · <span class="tag block">deploy-blocking</span>':''}</p>