🎨 Palette: Dashboard Dialog & Table Accessibility (a11y) Improvements

.Jules/palette.md

@@ -27,3 +27,7 @@
 ## 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 사용을 피하고 변수 추출을 권장합니다.)
+
+## 2026-07-19 - Dialog Accessibility Attributes
+**Learning:** Native HTML <dialog> elements generated dynamically need explicit aria-labelledby targeting an ID injected on the fly, and their triggering table rows must use aria-haspopup='dialog'.
+**Action:** Always link trigger roles and dialog labels explicitly using ARIA when rendering zero-build-step vanilla UI components.

scanner/dashboard/index.html

@@ -93,7 +93,7 @@
 </header>
 <main id="app"></main>
 
-<dialog id="detail"></dialog>
+<dialog id="detail" aria-labelledby="dlg-title"></dialog>
 
 <script>
 const SEV = {
@@ -154,7 +154,7 @@ <h1>No findings loaded</h1>
   const rows = filtered.map(({f,i})=>{
     const s = String(f.severity||'INFO').toUpperCase();
     const block = isDeployBlocking(f);
-    return `<tr data-i="${i}" tabindex="0" role="button" aria-label="View details for finding">
+    return `<tr data-i="${i}" tabindex="0" role="button" aria-haspopup="dialog" aria-label="View details for finding">
       <td><span class="chip" style="background:${SEV[s]?SEV[s].color:'var(--info)'}">${s}</span></td>
       <td>${esc(f.message)}</td>
       <td class="file">${esc(f.file)}:${esc(f.line)}</td>
@@ -180,7 +180,7 @@ <h1>Dashboard</h1>
           </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>
+          <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="color:var(--muted);padding:24px">No findings match the filter.</td></tr>'}</tbody>
         </table></div>
       </div>
@@ -221,7 +221,7 @@ <h1>Dashboard</h1>
   d.innerHTML = `
     <div class="dlg-head">
       <span class="chip" style="background:${SEV[s]?SEV[s].color:'var(--info)'}">${s}</span>
-      <span class="t">${esc(f.rule_id)}</span>
+      <span class="t" id="dlg-title">${esc(f.rule_id)}</span>
       <button aria-label="Close" onclick="document.getElementById('detail').close()">✕</button>
     </div>
     <div class="dlg-body">