🎨 Palette: 작업 상세 영역의 접근성 및 사용자 안내 개선

.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-10-05 - Focus Management for Dynamic Content
+**Learning:** When dynamic content like a side panel or detailed view is loaded asynchronously upon user action, screen readers and keyboard users may not notice the new content if focus remains on the triggering button. Moving focus to the title of the newly loaded content drastically improves discoverability and logical flow.
+**Action:** Always programmatically move focus to a newly rendered panel's title (`tabindex="-1"`) when it is opened via user interaction, such as clicking a 'Details' button.

CHANGELOG.md

@@ -4,6 +4,9 @@
 
 ### Added
 
+- **작업 상세 영역 접근성 개선**:
+  - 세션 기록의 빈 상태 메시지에 '업로드하여 시작하라'는 안내를 추가하여 사용자 행동을 유도했습니다.
+  - 'Details' 버튼 클릭 시 작업 상세 패널이 열릴 때, 패널의 제목 요소(`tabindex="-1"`)로 포커스를 자동으로 이동시켜 스크린 리더 및 키보드 사용자의 탐색 경험을 개선했습니다.
 - **UI UX 개선**: 'Details' 버튼 클릭 시, 작업 상세 정보 로드 중에 사용자가 명시적인 로딩 상태를 확인할 수 있도록 'Loading...' 텍스트와 비활성화 상태를 표시하도록 추가했습니다.
 - **관리자용 단건 작업 삭제 및 재시도 API 추가**
   - 특정 변환 작업을 삭제할 수 있는 `DELETE /api/v1/admin/convert/jobs/{jobId}` 엔드포인트를 추가했습니다.

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

@@ -299,13 +299,13 @@ private static String demoShellHtml() {
                             </thead>
                             <tbody id="history-body"></tbody>
                           </table>
-                          <p class="empty-state" id="empty-history">No documents submitted in this session.</p>
+                          <p class="empty-state" id="empty-history">No documents submitted in this session. Upload a document above to begin.</p>
                         </div>
 
                         <aside class="job-detail" id="job-detail" aria-labelledby="job-detail-title" hidden>
                           <div class="job-detail__header">
                             <div>
-                              <h3 id="job-detail-title" class="job-detail__title">Job detail</h3>
+                              <h3 id="job-detail-title" class="job-detail__title" tabindex="-1">Job detail</h3>
                               <p class="job-detail__caption" id="job-detail-caption">Select a document to inspect operational evidence.</p>
                             </div>
                             <button type="button" class="btn btn-secondary btn-compact" id="retry-job-btn" hidden>Retry dead-lettered job</button>

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

@@ -40,6 +40,7 @@ const el = {
   recoveryLatestInspected: document.getElementById("recovery-latest-inspected"),
   recoveryStatus: document.getElementById("recovery-status"),
   jobDetail: document.getElementById("job-detail"),
+  jobDetailTitle: document.getElementById("job-detail-title"),
   jobDetailCaption: document.getElementById("job-detail-caption"),
   jobDetailBody: document.getElementById("job-detail-body"),
   retryJobBtn: document.getElementById("retry-job-btn"),
@@ -190,6 +191,7 @@ function renderJobDetail(detail) {
   addDetailRow("Artifact", detail.convertedResourcePath);
 
   el.retryJobBtn.hidden = !detail.deadLettered;
+  el.jobDetailTitle.focus();
 }
 
 function isNeedsAction(job) {