From 2b380b9e8ffa7d8b9df5526939856510cbbcba9e Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 3 Oct 2026 14:23:22 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=ED=82=A4=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C=20=EB=8B=A8=EC=B6=95=ED=82=A4=20=EC=A0=91=EA=B7=BC?=
 =?UTF-8?q?=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

아이콘만 있는 닫기 버튼에 단축키(`Esc`)를 시각적 툴팁(`title="Close details (Esc)"`) 및 프로그래매틱 속성(`aria-keyshortcuts="Escape"`)으로 추가했습니다.
---
 .jules/palette.md              | 4 ++++
 scanner/dashboard/console.html | 4 ++--
 scanner/dashboard/index.html   | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index ea004e2d2..cf87af94d 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -81,3 +81,7 @@
 ## 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-03 - Keyboard Shortcuts Accessibility
+**Learning:** Adding a keyboard shortcut listener (like `Escape` to close a modal) improves UX for keyboard users, but screen reader users remain unaware of the shortcut unless it is explicitly announced. Furthermore, mouse users benefit from seeing the shortcut in a tooltip.
+**Action:** When implementing keyboard shortcuts on interactive elements (like close buttons), always add the corresponding `aria-keyshortcuts` attribute (e.g., `aria-keyshortcuts="Escape"`) for screen readers and a visual `title` attribute (e.g., `title="Close (Esc)"`) for mouse users.
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>