🎨 Palette: 닫기 버튼에 aria-keyshortcuts 속성 추가

.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-09-28 - Keyboard Shortcut Tooltips Accessibility
+**Learning:** Adding visual keyboard shortcuts in `title` tooltips (e.g., `title="Close (Esc)"`) on buttons that handle global keyboard events provides great UX for mouse users, but screen readers miss this implicit relationship unless explicitly told.
+**Action:** Always ensure that buttons with visual keyboard shortcuts in tooltips or labels also include the programmatic `aria-keyshortcuts="Escape"` attribute to satisfy both screen reader accessibility and test contracts.

scanner/dashboard/console.html

@@ -158,15 +158,15 @@ <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);
     scrollDetailIntoView(d);
     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});

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>

tests/test_console_dashboard_security.py

@@ -27,7 +27,7 @@ def test_detail_panel_close_invalidates_async_work_and_restores_focus() -> None:
     assert "currentDetailRequest+=1;" in html
     assert "lastDetailFocus instanceof HTMLElement && lastDetailFocus.isConnected" in html
     assert 'e.key==="Escape"' in html
-    assert html.count('class="close-btn" aria-label="Close details"') == 2
+    assert html.count('class="close-btn" aria-label="Close details" title="Close (Esc)" aria-keyshortcuts="Escape"') == 2
     assert html.count('d.querySelector(".close-btn").addEventListener("click",closeDetail);') == 2
     assert html.count("d.focus({preventScroll:true});") == 2
     assert 'aria-label="${esc(s.created_at)}: ${esc(String(s.deploy_blocking||0))} blocking"' in html

tests/test_dashboard_core.py

@@ -290,6 +290,7 @@ def test_dashboard_dialog_close_button_has_tooltip():
 
     assert any(
         attributes.get("title") == "Close (Esc)"
+        and attributes.get("aria-keyshortcuts") == "Escape"
         and attributes.get("aria-label") == "Close"
         for attributes in parser.buttons
     )