🎨 Palette: 세션 이력 지우기 버튼의 UX 및 접근성 개선

.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.
+## 2024-10-04 - 세션 이력 지우기 버튼 비동기 및 접근성 상태 반영
+**Learning:** 비동기 동작을 수행하는 UI 요소(예: 기록 삭제 등)에 적절한 시각적/접근성 피드백이 없으면 사용자가 작업 상태를 파악하기 어렵습니다.
+**Action:** 비동기 작업을 트리거하는 버튼은 `aria-label`로 기능을 명확히 하고, 동작 중일 때 명시적인 로딩(Clearing...) 및 비활성화 상태를 보여주는 것이 필수적입니다.

src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java

@@ -284,7 +284,7 @@ private static String demoShellHtml() {
                             <h2 id="history-title" class="panel__title">Session history</h2>
                             <p class="panel__caption">Open status JSON for diligence or launch the preview when conversion is ready.</p>
                           </div>
-                          <button type="button" class="btn btn-secondary btn-compact" id="clear-history-btn">Clear</button>
+                          <button type="button" class="btn btn-secondary btn-compact" id="clear-history-btn" aria-label="Clear session history">Clear</button>
                         </div>
 
                         <div class="table-wrap" id="session-history">

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

@@ -546,17 +546,22 @@ function init() {
   el.loadDemoDataBtn.addEventListener("click", () => {
     void loadDemoData();
   });
-  el.clearHistoryBtn.addEventListener("click", () => {
+  el.clearHistoryBtn.addEventListener("click", async () => {
     if (!window.confirm("Are you sure you want to clear all session history?")) {
       return;
     }
-    saveHistory([]);
-    renderHistory([]);
-    activeJobDetail = null;
-    el.jobDetail.hidden = true;
-    void refreshKpis();
-    void refreshKpiEvidence();
-    setStatus("Session history cleared.");
+    const restore = setBusyState(el.clearHistoryBtn, "Clearing...");
+    try {
+      saveHistory([]);
+      renderHistory([]);
+      activeJobDetail = null;
+      el.jobDetail.hidden = true;
+      await refreshKpis();
+      await refreshKpiEvidence();
+      setStatus("Session history cleared.");
+    } finally {
+      restore();
+    }
   });
   el.retryJobBtn.addEventListener("click", () => {
     void retryActiveJob();