🎨 Palette: 테이블 액션 버튼 접근성(aria-label) 개선

.gitignore

@@ -41,3 +41,4 @@ certs/
 
 # CodeGraph local index
 .codegraph/
+node_modules/

.jules/palette.md

@@ -13,3 +13,6 @@
 ## 2026-07-13 - Async Table Actions UX
 **Learning:** Adding explicit loading and disabled states to table action buttons that invoke asynchronous processes helps prevent redundant API calls and visually assures the user that their request is being handled.
 **Action:** Consistently apply `disabled` state and `Loading...` text changes to inline table action buttons linked to async workflows, and carefully preserve underlying DOM structures with `Array.from(btn.childNodes)` during the loading cycle to avoid rendering regressions.
+## 2026-07-19 - Adding context to generic data table actions
+**Learning:** Repetitive table action buttons or links (e.g., 'Details', 'Open') in UI data tables create a frustrating experience for screen reader users because the label lacks context about what row is being modified.
+**Action:** Always provide dynamically generated, context-specific `aria-label` attributes that include row-specific identifiers (like the filename or document name) to aid screen reader users.

CHANGELOG.md

@@ -48,3 +48,5 @@
 
 ### Fixed
 - 뷰어 UI의 재시도 버튼 로딩 상태가 내부 DOM을 손상시키지 않고 안전하게 복원되도록 수정
+### 향상된 점 (Enhancements)
+* 접근성(UX/UI): 데이터 테이블 내 반복적인 'Details', 'Status JSON', 'Open viewer' 버튼 및 링크에 동적으로 컨텍스트를 포함하는 `aria-label`을 부여하여 스크린 리더 사용자의 접근성을 개선했습니다.

src/main/resources/static/assets/viewer/demo.js

@@ -81,13 +81,16 @@ function updateJob(jobId, patch, { refreshKpisAfterUpdate = true } = {}) {
   }
 }
 
-function createLink(href, label) {
+function createLink(href, label, ariaLabel) {
   const link = document.createElement("a");
   link.href = href;
   link.textContent = label;
   link.className = "table-link";
   link.target = "_blank";
   link.rel = "noopener noreferrer";
+  if (ariaLabel) {
+    link.setAttribute("aria-label", ariaLabel);
+  }
   return link;
 }
 
@@ -110,11 +113,14 @@ async function openJsonDocument(url, title) {
     : "Unable to load JSON evidence with the current tenant claim.";
 }
 
-function createActionButton(label, onClick) {
+function createActionButton(label, onClick, ariaLabel) {
   const button = document.createElement("button");
   button.type = "button";
   button.textContent = label;
   button.className = "btn btn-secondary btn-compact";
+  if (ariaLabel) {
+    button.setAttribute("aria-label", ariaLabel);
+  }
   button.addEventListener("click", onClick);
   return button;
 }
@@ -153,13 +159,13 @@ function renderHistory(history = loadHistory()) {
           btn.replaceChildren(...initialChildren);
           btn.disabled = false;
         });
-      }));
+      }, `Details for ${job.fileName || "Document"}`));
       actionsCell.appendChild(createActionButton("Status JSON", () => {
         void openJsonDocument(job.statusUrl, "Clearfolio status JSON");
-      }));
+      }, `Status JSON for ${job.fileName || "Document"}`));
     }
     if (job.jobId) {
-      actionsCell.appendChild(createLink(`/viewer/${encodeURIComponent(job.jobId)}`, "Open viewer"));
+      actionsCell.appendChild(createLink(`/viewer/${encodeURIComponent(job.jobId)}`, "Open viewer", `Open viewer for ${job.fileName || "Document"}`));
     }
 
     row.append(fileCell, statusCell, submittedCell, actionsCell);