🎨 Palette: 빈 상태(Empty State) 화면 사용성 및 접근성 향상

.Jules/palette.md

@@ -27,3 +27,6 @@
 ## 2024-07-13 - CLI 출력의 영문법적 복수형 및 에러 메시지 힌트 개선
 **Learning:** CLI 출력에서 `file(s)`, `issue(s)`, `rule(s) excluded`와 같이 괄호를 사용한 복수형 표기법은 가독성을 떨어뜨리고 투박한(developer-centric) 느낌을 줍니다. 또한, 에러 발생 시 단순 예외 내용만 출력하는 것보다 즉시 실행 가능한 해결책(Hint)을 함께 제공하는 것이 CLI 사용자 경험(DX) 향상에 매우 효과적입니다.
 **Action:** 조건부 f-string(예: `s_suffix = "s" if count != 1 else ""`)을 활용하여 동적으로 정확한 복수형 단어(file/files)를 출력하도록 개선하고, 예외 발생 로직에는 항상 `💡 Hint:`를 포함하여 후속 액션을 안내하도록 표준화해야 합니다. (단, Python 3.12 환경의 `black` 포매터 호환성을 위해 백슬래시가 포함된 중첩 f-string 사용을 피하고 변수 추출을 권장합니다.)
+## 2024-05-19 - Actionable Empty States
+**Learning:** Empty states should act as helpful dead-ends with actionable Call-To-Actions (CTAs) rather than passive text. When users encounter an empty state (e.g., no findings loaded, or no search results), providing a direct action like "Browse for file..." or "Clear filters" reduces friction and cognitive load.
+**Action:** When designing or refactoring empty states, always ask "What is the most common action the user needs to take to escape this state?" and provide a native HTML `<button>` to facilitate it. Ensure form inputs are always accompanied by screen-reader accessible `<label>`s, using visually hidden CSS if visual labels are not permitted by design constraints.

scanner/dashboard/index.html

@@ -123,6 +123,7 @@
       <h1>No findings loaded</h1>
       <p>Generate a report-safe findings file, then load it above (or place it next to this page).</p>
       <p><code>appguardrail scan --findings-json reports/findings.json .</code></p>
+      <p style="margin:20px 0;"><button type="button" onclick="document.getElementById('file').click()">Browse for file...</button></p>
       <p class="drop">Serve the repo (<code>python3 -m http.server</code>) and open <code>/dashboard/</code>, or drag a <code>findings.json</code> onto this window.</p>
     </div>`;
     return;
@@ -173,15 +174,17 @@ <h1>Dashboard</h1>
       <div class="panel"><h2>Findings by category</h2><div class="rowlist">${catRows||'<div class="r">—</div>'}</div></div>
       <div>
         <div class="toolbar">
+          <label for="q" style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;">Search findings</label>
           <input type="search" id="q" placeholder="Search message, file, rule, category" aria-label="Search findings" value="${esc(query)}">
+          <label for="sev" style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;">Filter by severity</label>
           <select id="sev" aria-label="Filter by severity">
             <option value="">All severities</option>
             ${SEV_ORDER.map(s=>`<option value="${s}" ${s===filterSev?'selected':''}>${s}</option>`).join('')}
           </select>
         </div>
         <div class="panel"><table>
           <thead><tr><th>Severity</th><th>Finding</th><th>File</th><th>Category</th><th>Status</th></tr></thead>
-          <tbody>${rows||'<tr><td colspan="5" style="color:var(--muted);padding:24px">No findings match the filter.</td></tr>'}</tbody>
+          <tbody>${rows||`<tr><td colspan="5"><div class="empty">No findings match the filter.<br><br><button type="button" onclick="document.getElementById('q').value=''; document.getElementById('sev').value=''; query=''; filterSev=''; render();">Clear filters</button></div></td></tr>`}</tbody>
         </table></div>
       </div>
     </div>`;