From f9ca313fcf0ff0deb8deeb44e417035ade9829b4 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 9 Oct 2026 14:39:51 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=8B=A4=EC=9D=B4?=
 =?UTF-8?q?=EC=96=BC=EB=A1=9C=EA=B7=B8=20=EB=8B=AB=EA=B8=B0=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=ED=96=A5=EC=83=81?=
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..d7b8ba53a 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.
+## 2026-10-09 - Accessible Close Buttons
+**Learning:** For icon-only buttons that trigger actions with keyboard shortcuts, adding `title="Close (Esc)"` alongside `aria-keyshortcuts="Escape"` and `aria-label` provides a visual tooltip for mouse users revealing the shortcut, improving both accessibility and UX, satisfying both screen reader accessibility and test contracts.
+**Action:** Always ensure keyboard shortcuts exposed via visual tooltips also include the programmatic `aria-keyshortcuts` attribute.
diff --git a/scanner/dashboard/console.html b/scanner/dashboard/console.html
index 7ec262af4..3c8d425db 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 (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 (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>