From 2c482bf7bc86205e9650f202a9a6e2815a47d846 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 17 Jul 2026 20:51:29 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B9=84=EB=8F=99?=
 =?UTF-8?q?=EA=B8=B0=20=EC=9E=91=EC=97=85=20=EB=B2=84=ED=8A=BC=EC=97=90=20?=
 =?UTF-8?q?aria-busy=20=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- `demo.js`의 `renderHistory` (Details 버튼)
- `demo.js`의 `retryActiveJob` (Retry 버튼)
- `demo.js`의 `refreshKpiEvidence` (Refresh 버튼)
- `demo.js`의 `loadDemoData` (Load Demo 버튼)
- `demo.js`의 `submitDocument` (제출 버튼)

작업 시작 시 `aria-busy="true"`를 부여하고, 종료 시(`finally` 블록 등) `removeAttribute("aria-busy")`를 호출하여 스크린 리더와 같은 보조 기기에 비동기 로딩 상태가 명확하게 전달되도록 코드를 개선했습니다.
- 관련 배움을 `.jules/palette.md` 파일에 잘 기록해 두었습니다.
---
 .jules/palette.md                               |  4 ++++
 src/main/resources/static/assets/viewer/demo.js | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/.jules/palette.md b/.jules/palette.md
index a34ea59..30ec6ab 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -13,3 +13,7 @@
 ## 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-17 - 비동기 작업 버튼에 대한 aria-busy 접근성 상태 적용
+**Learning:** 비동기 작업(API 호출, 로딩 상태 등)이 실행되는 동안 버튼에 단순히 `disabled` 처리나 텍스트 변경만으로는 스크린 리더 등 보조 기기에 현재 작업이 진행 중이라는 상태가 명확히 전달되지 않을 수 있습니다.
+**Action:** `demo.js` 내의 모든 비동기 작업 버튼(로딩 중 상태를 갖는 버튼들)에 대해, 작업 시작 시 동적으로 `aria-busy="true"` 속성을 부여하고, 작업이 끝나는 `finally` 블록에서 해당 속성을 제거(`removeAttribute("aria-busy")`)하도록 수정하여 접근성 상태(로딩 상태)를 명확하게 알릴 수 있도록 적용했습니다.
diff --git a/src/main/resources/static/assets/viewer/demo.js b/src/main/resources/static/assets/viewer/demo.js
index 51466a8..dce390a 100644
--- a/src/main/resources/static/assets/viewer/demo.js
+++ b/src/main/resources/static/assets/viewer/demo.js
@@ -148,10 +148,12 @@ function renderHistory(history = loadHistory()) {
         const btn = e.currentTarget;
         const initialChildren = Array.from(btn.childNodes);
         btn.disabled = true;
+        btn.setAttribute("aria-busy", "true");
         btn.textContent = "Loading...";
         openJobDetail(job).finally(() => {
           btn.replaceChildren(...initialChildren);
           btn.disabled = false;
+          btn.removeAttribute("aria-busy");
         });
       }));
       actionsCell.appendChild(createActionButton("Status JSON", () => {
@@ -299,6 +301,7 @@ async function retryActiveJob() {
   const jobId = activeJobDetail.jobId;
   const initialChildren = Array.from(el.retryJobBtn.childNodes);
   el.retryJobBtn.disabled = true;
+  el.retryJobBtn.setAttribute("aria-busy", "true");
   el.retryJobBtn.textContent = "Retrying...";
   setStatus("Requesting operator retry...");
 
@@ -340,6 +343,7 @@ async function retryActiveJob() {
   } finally {
     el.retryJobBtn.replaceChildren(...initialChildren);
     el.retryJobBtn.disabled = false;
+    el.retryJobBtn.removeAttribute("aria-busy");
   }
 }
 
@@ -414,6 +418,7 @@ async function refreshKpis() {
 async function refreshKpiEvidence() {
   const initialChildren = Array.from(el.refreshEvidenceBtn.childNodes);
   el.refreshEvidenceBtn.disabled = true;
+  el.refreshEvidenceBtn.setAttribute("aria-busy", "true");
   el.refreshEvidenceBtn.textContent = "Refreshing...";
 
   try {
@@ -429,12 +434,14 @@ async function refreshKpiEvidence() {
   } finally {
     el.refreshEvidenceBtn.replaceChildren(...initialChildren);
     el.refreshEvidenceBtn.disabled = false;
+    el.refreshEvidenceBtn.removeAttribute("aria-busy");
   }
 }
 
 async function loadDemoData() {
   const initialChildren = Array.from(el.loadDemoDataBtn.childNodes);
   el.loadDemoDataBtn.disabled = true;
+  el.loadDemoDataBtn.setAttribute("aria-busy", "true");
   el.loadDemoDataBtn.textContent = "Loading...";
   setStatus("Loading seeded buyer-demo story...");
 
@@ -460,6 +467,7 @@ async function loadDemoData() {
   } finally {
     el.loadDemoDataBtn.replaceChildren(...initialChildren);
     el.loadDemoDataBtn.disabled = false;
+    el.loadDemoDataBtn.removeAttribute("aria-busy");
   }
 }
 
@@ -507,6 +515,7 @@ async function submitDocument(event) {
 
   const initialChildren = Array.from(el.submitBtn.childNodes);
   el.submitBtn.disabled = true;
+  el.submitBtn.setAttribute("aria-busy", "true");
   el.submitBtn.textContent = "Submitting...";
   setStatus("Submitting document...");
 
@@ -552,6 +561,7 @@ async function submitDocument(event) {
   } finally {
     el.submitBtn.replaceChildren(...initialChildren);
     el.submitBtn.disabled = false;
+    el.submitBtn.removeAttribute("aria-busy");
   }
 }