🎨 Palette: 대시보드 'Deploy-blocking' 카드 클릭 필터 기능 추가

.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-02 - Interactive Dashboard Cards for Quick Filtering (Deploy-blocking)
+**Learning:** Transforming static metric summary cards (like "Deploy-blocking") into interactive toggle filters significantly enhances dashboard UX, but requires careful accessibility implementations.
+**Action:** When making metric cards interactive, explicitly add `role="button"`, `tabindex="0"`, `aria-pressed`, and `onkeydown` handlers for both Enter and Space keys. Ensure global 'Clear filters' actions also reset this new toggle state.

scanner/dashboard/index.html

@@ -132,6 +132,7 @@
 
 let ALL = null;
 let filterSev = '', query = '';
+let filterBlocking = false;
 let lastFocus = null;
 
 function render(){
@@ -194,6 +195,7 @@ <h1>Clean scan</h1>
   const filtered = ALL
     .map((f,i)=>({f,i}))
     .filter(({f})=> (!filterSev || String(f.severity).toUpperCase()===filterSev))
+    .filter(({f})=> !filterBlocking || isDeployBlocking(f))
     .filter(({f})=> !query || (String(f.message)+' '+String(f.file)+' '+String(f.rule_id)+' '+String(f.category)).toLowerCase().includes(query))
     .sort((a,b)=> SEV_ORDER.indexOf(String(a.f.severity).toUpperCase()) - SEV_ORDER.indexOf(String(b.f.severity).toUpperCase()));
   const allFindingsText = formatFindingCount(ALL.length);
@@ -219,7 +221,9 @@ <h1>Clean scan</h1>
     <h1>Dashboard</h1>
     <p class="sub">${findingsText} · <strong>${blocking}</strong> deploy-blocking (gate ${blocking?'active':'clear'})</p>
     <div class="cards">${cards}
-      <div class="card"><div class="lbl"><span class="dot" style="background:var(--primary)"></span>Deploy-blocking</div><div class="n">${blocking}</div></div>
+      <div id="deploy-blocking-card" class="card" role="button" tabindex="0" aria-label="Filter by Deploy-blocking: ${blocking}" aria-pressed="${filterBlocking}" onclick="filterBlocking=!filterBlocking; render();" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault(); this.click();}" style="${filterBlocking ? 'border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); cursor:pointer;' : 'cursor:pointer;'}">
+        <div class="lbl"><span class="dot" style="background:var(--primary)"></span>Deploy-blocking</div><div class="n">${blocking}</div>
+      </div>
     </div>
     <div class="grid2">
       <div class="panel"><h2>Findings by category</h2><div class="rowlist">${catRows||'<div class="r">—</div>'}</div></div>
@@ -235,7 +239,7 @@ <h1>Dashboard</h1>
           <thead><tr><th scope="col">Severity</th><th scope="col">Finding</th><th scope="col">File</th><th scope="col">Category</th><th scope="col">Status</th></tr></thead>
           <tbody>${rows||`<tr><td colspan="5" style="padding:32px 24px;text-align:center">
           <div style="color:var(--text);font-weight:600;font-size:14px;margin-bottom:8px">No findings match the filter</div>
-          <button type="button" aria-label="Clear filters" onclick="query=''; filterSev=''; render(); document.getElementById('q')?.focus();" style="padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font:inherit;color:var(--text);font-weight:500;transition:background 0.2s">Clear filters</button>
+          <button type="button" aria-label="Clear filters" onclick="query=''; filterSev=''; filterBlocking=false; render(); document.getElementById('q')?.focus();" style="padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font:inherit;color:var(--text);font-weight:500;transition:background 0.2s">Clear filters</button>
         </td></tr>`}</tbody>
         </table></div>
       </div>

tests/test_dashboard_blocking_filter_contract.py

@@ -0,0 +1,115 @@
+"""Behavioral contracts for the deploy-blocking dashboard filter."""
+
+import re
+import subprocess
+
+from scanner.cli.appguardrail import dashboard_index_path
+
+
+def _dashboard_html() -> str:
+    """Read the shipped dashboard asset used by the CLI server."""
+    return dashboard_index_path().read_text(encoding="utf-8")
+
+
+def _render_script_prefix(html: str) -> str:
+    """Return the real dashboard script through `render` without boot side effects."""
+    match = re.search(r"<script>(?P<script>[\s\S]*?)</script>", html)
+    assert match is not None
+    script = match.group("script")
+    prefix, separator, _ = script.partition("function openDetail(f){")
+    assert separator
+    return prefix
+
+
+def test_deploy_blocking_card_filter_contract_is_complete() -> None:
+    """The card must expose pointer, keyboard, pressed-state, and filter wiring."""
+    html = _dashboard_html()
+    card = re.search(
+        r'<div id="deploy-blocking-card" class="card"(?P<attrs>[^>]*)>',
+        html,
+    )
+
+    assert card is not None
+    attrs = card.group("attrs")
+    assert 'role="button"' in attrs
+    assert 'tabindex="0"' in attrs
+    assert 'aria-pressed="${filterBlocking}"' in attrs
+    assert 'onclick="filterBlocking=!filterBlocking; render();"' in attrs
+    assert "event.key==='Enter'||event.key===' '" in attrs
+    assert ".filter(({f})=> !filterBlocking || isDeployBlocking(f))" in html
+
+
+def test_deploy_blocking_filter_executes_and_restores_focus() -> None:
+    """Run the shipped render logic and verify filtering, pressed state, and focus."""
+    html = _dashboard_html()
+    script = _render_script_prefix(html)
+    harness = r'''
+const registry = new Map();
+function makeElement(id) {
+  return {
+    id,
+    _html: '',
+    textContent: '',
+    value: '',
+    selectionStart: 0,
+    selectionEnd: 0,
+    listeners: {},
+    addEventListener(type, fn) { this.listeners[type] = fn; },
+    querySelectorAll() { return []; },
+    focus() { document.activeElement = this; },
+    setSelectionRange(start, end) { this.selectionStart = start; this.selectionEnd = end; }
+  };
+}
+const body = makeElement('body');
+const app = makeElement('app');
+const summary = makeElement('findings-summary');
+Object.defineProperty(app, 'innerHTML', {
+  get() { return this._html; },
+  set(value) {
+    this._html = value;
+    registry.set('q', makeElement('q'));
+    registry.set('sev', makeElement('sev'));
+    if (value.includes('id="deploy-blocking-card"')) {
+      registry.set('deploy-blocking-card', makeElement('deploy-blocking-card'));
+    } else {
+      registry.delete('deploy-blocking-card');
+    }
+  }
+});
+const document = {
+  activeElement: body,
+  getElementById(id) {
+    if (id === 'app') return app;
+    if (id === 'findings-summary') return summary;
+    if (id === 'body') return body;
+    return registry.get(id) || null;
+  }
+};
+'''
+    assertions = r'''
+ALL = [
+  {severity:'CRITICAL', context:'app-code', message:'blocking-one', file:'a.py', rule_id:'A', category:'security', line:1},
+  {severity:'HIGH', context:'test', message:'nonblocking-test', file:'b.py', rule_id:'B', category:'security', line:2},
+  {severity:'WARNING', context:'app-code', message:'warning-only', file:'c.py', rule_id:'C', category:'quality', line:3}
+];
+render();
+const firstCard = registry.get('deploy-blocking-card');
+if (!firstCard) throw new Error('deploy-blocking card was not rendered with a stable id');
+firstCard.focus();
+filterBlocking = !filterBlocking;
+render();
+if (!app.innerHTML.includes('blocking-one')) throw new Error('blocking finding disappeared');
+if (app.innerHTML.includes('nonblocking-test')) throw new Error('non-blocking test finding leaked through filter');
+if (app.innerHTML.includes('warning-only')) throw new Error('warning finding leaked through filter');
+if (!app.innerHTML.includes('aria-pressed="true"')) throw new Error('pressed state did not follow filter state');
+if (document.activeElement?.id !== 'deploy-blocking-card') throw new Error('focus was not restored to the replaced card');
+'''
+
+    completed = subprocess.run(
+        ["node", "-e", harness + script + assertions],
+        check=False,
+        capture_output=True,
+        text=True,
+    )
+
+    assert completed.returncode == 0, completed.stderr

tests/test_dashboard_core.py

@@ -271,7 +271,7 @@ def test_dashboard_empty_state_clear_filters():
 
     assert "No findings match the filter" in html
     assert "aria-label=\"Clear filters\"" in html
-    assert "onclick=\"query=''; filterSev=''; render(); document.getElementById('q')?.focus();\"" in html
+    assert "onclick=\"query=''; filterSev=''; filterBlocking=false; render(); document.getElementById('q')?.focus();\"" in html
     assert "Clear filters</button>" in html