Merge pull request #107 from Team-StackUp/feature/a11y-improvements

feat(ui): 접근성 개선 — 차트 레이블·체크박스 연결·포커스 복귀

Author: i3months

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"

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}

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>