From 4f741ed62a9b3b6d3a01f5fc1f5a65b2b33f3aca Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sun, 19 Jul 2026 05:07:09 +0000
Subject: [PATCH] feat(a11y): improve accessibility of dashboard table and
 dialog

- Add `scope="col"` to table headers.
- Add `aria-haspopup="dialog"` to table rows acting as dialog triggers.
- Add `aria-labelledby="dlg-title"` to `<dialog>` element.
- Add `id="dlg-title"` to the dynamically generated dialog title span.
- Append critical learning to `.Jules/palette.md` journal.
---
 .Jules/palette.md            | 4 ++++
 scanner/dashboard/index.html | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 1c4b8357..db2d2242 100644
--- a/.Jules/palette.md
+++ b/.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.
diff --git a/scanner/dashboard/index.html b/scanner/dashboard/index.html
index 398ea8e8..3682245d 100644
--- a/scanner/dashboard/index.html
+++ b/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">