From 01e634692737e1c89133f2067403ae902e8aa562 Mon Sep 17 00:00:00 2001
From: jmj <waysoleward01@naver.com>
Date: Sun, 14 Jun 2026 22:36:51 +0900
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=20=E2=80=94=20=EC=B0=A8=ED=8A=B8=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EB=B8=94=C2=B7=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0=C2=B7=ED=8F=AC=EC=BB=A4=EC=8A=A4=20=EB=B3=B5?=
 =?UTF-8?q?=EA=B7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

키보드/스크린리더 사용자 접근성 공백을 보강.

- ScoreTrend: 마우스 전용 title 뿐이던 막대 차트에 role=img + 점수
  추이 요약 aria-label, 장식 막대는 aria-hidden 로 노이즈 제거
- ContextDocumentPicker: 체크박스 id + label htmlFor 명시 연결
- AnswerComposer: 녹음/업로드 전용 바에서 입력 바로 복귀 시 답변창에
  포커스 자동 복귀(busy→idle 전이 시에만, 마운트 시 제외)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/features/history/ui/ScoreTrend.tsx    | 14 ++++++++++++--
 .../features/interview/ui/live/AnswerComposer.tsx  | 14 +++++++++++++-
 .../interview/ui/setup/ContextDocumentPicker.tsx   |  8 +++++++-
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/history/ui/ScoreTrend.tsx b/frontend/src/features/history/ui/ScoreTrend.tsx
index 101c6d3f..b39d328f 100644
--- a/frontend/src/features/history/ui/ScoreTrend.tsx
+++ b/frontend/src/features/history/ui/ScoreTrend.tsx
@@ -18,11 +18,21 @@ export function ScoreTrend({ stats }: { stats: UserStats }) {
   return (
     <section className="flex flex-col gap-3 rounded-2xl border border-border bg-surface-raised p-5 shadow-sm">
       <span className="text-caption text-fg-muted">종합 점수 추이 (최근 {points.length}회)</span>
-      <div className="flex h-32 items-end gap-2">
+      <div
+        className="flex h-32 items-end gap-2"
+        role="img"
+        aria-label={`종합 점수 추이, 최근 ${points.length}회: ${points
+          .map((r) => `${Math.round(Math.max(0, Math.min(100, r.overall as number)))}점`)
+          .join(', ')}`}
+      >
         {points.map((r) => {
           const score = Math.max(0, Math.min(100, r.overall as number))
           return (
-            <div key={r.sessionId} className="flex flex-1 flex-col items-center gap-1">
+            <div
+              key={r.sessionId}
+              className="flex flex-1 flex-col items-center gap-1"
+              aria-hidden
+            >
               <div className="flex w-full flex-1 items-end">
                 <div
                   className="w-full rounded-t bg-primary"
diff --git a/frontend/src/features/interview/ui/live/AnswerComposer.tsx b/frontend/src/features/interview/ui/live/AnswerComposer.tsx
index 7d628548..345f9f23 100644
--- a/frontend/src/features/interview/ui/live/AnswerComposer.tsx
+++ b/frontend/src/features/interview/ui/live/AnswerComposer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import type { KeyboardEvent } from 'react'
 import { TextArea } from '@/shared/ui/TextArea'
 import { Button } from '@/shared/ui/Button'
@@ -62,6 +62,17 @@ export function AnswerComposer({
     void start()
   }
 
+  // 녹음/업로드 전용 바에서 입력 바로 돌아오면 키보드 사용자를 위해 답변창에 포커스를 돌려준다.
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const busy = recording || voiceUploading
+  const prevBusy = useRef(false)
+  useEffect(() => {
+    if (prevBusy.current && !busy && !disabled) {
+      textareaRef.current?.focus()
+    }
+    prevBusy.current = busy
+  }, [busy, disabled])
+
   const submit = () => {
     const trimmed = value.trim()
     if (!trimmed || disabled || submitLocked) return
@@ -120,6 +131,7 @@ export function AnswerComposer({
     <div className="flex flex-col gap-1 border-t border-border bg-surface-raised px-4 py-3">
       <div className="flex items-end gap-2">
         <TextArea
+          ref={textareaRef}
           value={value}
           onChange={setValue}
           onKeyDown={onKeyDown}
diff --git a/frontend/src/features/interview/ui/setup/ContextDocumentPicker.tsx b/frontend/src/features/interview/ui/setup/ContextDocumentPicker.tsx
index 4889e9af..23d2b5e0 100644
--- a/frontend/src/features/interview/ui/setup/ContextDocumentPicker.tsx
+++ b/frontend/src/features/interview/ui/setup/ContextDocumentPicker.tsx
@@ -21,9 +21,15 @@ export function ContextDocumentPicker({
       {documents.map((doc) => (
         <label
           key={doc.id}
+          htmlFor={`ctx-doc-${doc.id}`}
           className="flex cursor-pointer items-center gap-2 rounded-md border border-border bg-surface-raised px-3 py-2"
         >
-          <input type="checkbox" checked={selected.includes(doc.id)} onChange={() => onToggle(doc.id)} />
+          <input
+            id={`ctx-doc-${doc.id}`}
+            type="checkbox"
+            checked={selected.includes(doc.id)}
+            onChange={() => onToggle(doc.id)}
+          />
           <span className="text-button text-fg">{doc.label}</span>
           <span className="text-caption text-fg-muted">{doc.sourceType}</span>
         </label>