From fdf21792665ea0e833174e70f2ff3f4b43c86493 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 8 Oct 2026 14:22:33 +0000
Subject: [PATCH] Add tooltip and aria shortcut to console close button

Added title="Close (Esc)" and aria-keyshortcuts="Escape" to the
detail view close button in the standalone console dashboard to
improve accessibility and discoverability for both mouse and
keyboard users.
---
 .jules/palette.md                            | 4 ++++
 scanner/dashboard/console.html               | 4 ++--
 tests/test_console_accessibility_contract.py | 7 +++++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index ea004e2d2..25de26c9c 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.
+
+## 2024-05-24 - Keyboard Shortcut Tooltips
+**Learning:** Icon-only buttons that map to keyboard shortcuts (like Escape to close details) need both a visual hint (`title="... (Key)"`) and a programmatic hint (`aria-keyshortcuts="Key"`) to fully support mouse and screen reader accessibility.
+**Action:** Always include both attributes alongside `aria-label` when adding keyboard listeners to UI action buttons.
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/tests/test_console_accessibility_contract.py b/tests/test_console_accessibility_contract.py
index da45fdc5e..0e8002d1b 100644
--- a/tests/test_console_accessibility_contract.py
+++ b/tests/test_console_accessibility_contract.py
@@ -23,3 +23,10 @@ def test_console_rows_preserve_cell_content_for_screen_readers():
 
     assert 'role="button" title="View scan details"' in html
     assert 'aria-label="View scan details"' not in html
+
+def test_console_close_button_exposes_shortcut():
+    """The close button must expose its Escape key shortcut."""
+    html = _console_html()
+
+    assert 'title="Close (Esc)"' in html
+    assert 'aria-keyshortcuts="Escape"' in html