fix(a11y): announce empty mail and search states without wrapping actions

frontend/src/components/EmailList.test.tsx

@@ -88,6 +88,26 @@ describe("EmailList", () => {
     expect(selectedThread?.className).toContain("min-h-20");
   });
 
+  it("announces an empty inbox through exactly one polite status region", async () => {
+    const fetchMock = vi.fn(() => Promise.resolve(jsonResponse({ emails: [] })));
+    vi.stubGlobal("fetch", fetchMock);
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+
+    await act(async () => {
+      root?.render(<EmailList onSelectEmail={vi.fn()} selectedEmailId={null} />);
+    });
+    await flushAsyncWork();
+
+    const emptyStatuses = Array.from(container.querySelectorAll<HTMLElement>('[role="status"]')).filter(
+      (node) => node.textContent?.includes("받은 메일이 없습니다"),
+    );
+    expect(emptyStatuses).toHaveLength(1);
+    expect(emptyStatuses[0]?.getAttribute("aria-live")).toBe("polite");
+  });
+
   it("uses the missing-title fallback for blank email subjects", async () => {
     const fetchMock = vi.fn(() =>
       Promise.resolve(
@@ -271,4 +291,4 @@ describe("EmailList", () => {
     expect(container.textContent).not.toContain("alert(1)");
     expect(container.textContent).not.toContain("alert(2)");
   });
-});
+});

frontend/src/components/EmailList.tsx

@@ -254,7 +254,7 @@ export function EmailList({
           ) : error ? (
             <div role="alert" className="rounded-2xl border border-red-200 bg-red-50 p-4 text-sm text-red-600">{error}</div>
           ) : emails.length === 0 ? (
-            <div className="rounded-2xl border border-dashed border-border bg-background/70 p-5 text-sm text-muted-foreground">
+            <div role="status" aria-live="polite" className="rounded-2xl border border-dashed border-border bg-background/70 p-5 text-sm text-muted-foreground">
               <p className="font-bold text-foreground">{folderCopy.emptyTitle}</p>
               <p className="mt-1 text-xs leading-5">{folderCopy.emptyBody}</p>
             </div>

frontend/src/components/SearchLayout.live-region.test.tsx

@@ -0,0 +1,175 @@
+/* @vitest-environment jsdom */
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("next/dynamic", () => ({
+  default: () => function MockDynamic() {
+    return <div>mock graph</div>;
+  },
+}));
+
+vi.mock("next/link", () => ({
+  default: ({ href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) => (
+    <a href={href} {...props}>{children}</a>
+  ),
+}));
+
+vi.mock("lucide-react", () => ({
+  AlertCircle: () => <svg aria-hidden="true" />,
+  CalendarDays: () => <svg aria-hidden="true" />,
+  CheckCircle2: () => <svg aria-hidden="true" />,
+  Clock: () => <svg aria-hidden="true" />,
+  CornerDownRight: () => <svg aria-hidden="true" />,
+  FileText: () => <svg aria-hidden="true" />,
+  Loader2: () => <svg aria-hidden="true" />,
+  Mail: () => <svg aria-hidden="true" />,
+  Network: () => <svg aria-hidden="true" />,
+  Search: () => <svg aria-hidden="true" />,
+  Sparkles: () => <svg aria-hidden="true" />,
+  X: () => <svg aria-hidden="true" />,
+}));
+
+import { SearchLayout } from "./SearchLayout";
+
+function jsonResponse(body: unknown) {
+  return new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+async function flushAsyncWork() {
+  for (let index = 0; index < 5; index += 1) {
+    await act(async () => {
+      await Promise.resolve();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+  }
+}
+
+async function waitForCondition(condition: () => boolean) {
+  for (let index = 0; index < 20; index += 1) {
+    if (condition()) return;
+    await flushAsyncWork();
+  }
+  throw new Error("waitForCondition timed out after 20 attempts");
+}
+
+function searchResult() {
+  return {
+    id: 101,
+    source_message_id: "<launch-source@example.com>",
+    subject: "런칭 캠페인 결과",
+    sender: "pm@example.com",
+    date: "2026-05-20T09:00:00Z",
+    snippet: "검색 결과에서 관계 캡처 액션을 실행할 수 있습니다.",
+    thread_id: "thread-launch",
+    reply_count: 2,
+    score: 0.93,
+  };
+}
+
+describe("SearchLayout live-region semantics", () => {
+  let root: Root | null = null;
+  let container: HTMLDivElement | null = null;
+
+  afterEach(() => {
+    if (root) {
+      act(() => root?.unmount());
+    }
+    root = null;
+    container?.remove();
+    container = null;
+    vi.unstubAllGlobals();
+  });
+
+  it("announces an empty search result set as a polite status", async () => {
+    vi.stubGlobal("fetch", vi.fn((input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url.endsWith("/api/search")) return Promise.resolve(jsonResponse({ results: [] }));
+      if (url.endsWith("/api/search/answer")) return Promise.resolve(jsonResponse({ answer: null }));
+      throw new Error(`Unexpected fetch: ${url}`);
+    }));
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+
+    await act(async () => {
+      root?.render(<SearchLayout />);
+    });
+    await waitForCondition(() => container?.textContent?.includes("맥락 검색 결과가 없습니다.") ?? false);
+
+    const emptyResultStatus = Array.from(container.querySelectorAll<HTMLElement>("[role='status']")).find(
+      (node) => node.textContent?.includes("맥락 검색 결과가 없습니다."),
+    );
+    expect(emptyResultStatus).not.toBeUndefined();
+    expect(emptyResultStatus?.getAttribute("aria-live")).toBe("polite");
+  });
+
+  it("announces the empty sender relationship message without wrapping its action button in a status region", async () => {
+    vi.stubGlobal("fetch", vi.fn((input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url.endsWith("/api/search")) return Promise.resolve(jsonResponse({ results: [searchResult()] }));
+      if (url.includes("/api/ontology/relationships?")) return Promise.resolve(jsonResponse([]));
+      if (url.endsWith("/api/search/answer")) return Promise.resolve(jsonResponse({ answer: null }));
+      throw new Error(`Unexpected fetch: ${url}`);
+    }));
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+
+    await act(async () => {
+      root?.render(<SearchLayout />);
+    });
+    await waitForCondition(() => container?.textContent?.includes("발신자 관계 캡처") ?? false);
+
+    const emptyRelationshipStatus = Array.from(container.querySelectorAll<HTMLElement>("[role='status']")).find(
+      (node) => node.textContent?.includes("이 맥락 검색 결과에 연결된 발신자 관계가 아직 없습니다."),
+    );
+    expect(emptyRelationshipStatus).not.toBeUndefined();
+    expect(emptyRelationshipStatus?.querySelector("button, a, input, select, textarea")).toBeNull();
+  });
+
+  it("announces relationship capture failure as an alert", async () => {
+    vi.stubGlobal("fetch", vi.fn((input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url.endsWith("/api/search")) return Promise.resolve(jsonResponse({ results: [searchResult()] }));
+      if (url.includes("/api/ontology/relationships?")) return Promise.resolve(jsonResponse([]));
+      if (url.endsWith("/api/search/answer")) return Promise.resolve(jsonResponse({ answer: null }));
+      if (url.endsWith("/api/ontology/relationships/capture-source")) {
+        return Promise.resolve(new Response(JSON.stringify({ error_code: "capture_failed" }), {
+          status: 500,
+          headers: { "Content-Type": "application/json" },
+        }));
+      }
+      throw new Error(`Unexpected fetch: ${url}`);
+    }));
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+
+    await act(async () => {
+      root?.render(<SearchLayout />);
+    });
+    await waitForCondition(() => container?.textContent?.includes("발신자 관계 캡처") ?? false);
+
+    const captureButton = Array.from(container.querySelectorAll<HTMLButtonElement>("button")).find(
+      (button) => button.textContent?.includes("발신자 관계 캡처"),
+    );
+    expect(captureButton).not.toBeUndefined();
+
+    await act(async () => {
+      captureButton?.click();
+    });
+    await waitForCondition(() => container?.textContent?.includes("발신자 관계 캡처에 실패했습니다.") ?? false);
+
+    const captureAlert = Array.from(container.querySelectorAll<HTMLElement>("[role='alert']")).find(
+      (node) => node.textContent?.includes("발신자 관계 캡처에 실패했습니다."),
+    );
+    expect(captureAlert).not.toBeUndefined();
+  });
+});

frontend/src/components/SearchLayout.tsx

@@ -208,7 +208,7 @@ function SenderDagPanel({
   if (relationships.length === 0) {
     return (
       <div className="rounded-lg border border-border bg-background p-4 text-sm font-semibold text-muted-foreground">
-        <p>이 맥락 검색 결과에 연결된 발신자 관계가 아직 없습니다.</p>
+        <p role="status" aria-live="polite">이 맥락 검색 결과에 연결된 발신자 관계가 아직 없습니다.</p>
         {canCapture ? (
           <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
             <p className="text-xs">
@@ -229,7 +229,7 @@ function SenderDagPanel({
           </div>
         ) : null}
         {captureStatus === "error" ? (
-          <p className="mt-2 text-xs font-bold text-destructive">
+          <p role="alert" className="mt-2 text-xs font-bold text-destructive">
             발신자 관계 캡처에 실패했습니다.
           </p>
         ) : null}
@@ -617,7 +617,7 @@ export function SearchLayout() {
           {error}
         </div>
       ) : filteredResults.length === 0 ? (
-        <div className="p-5 text-sm font-semibold text-muted-foreground">
+        <div role="status" aria-live="polite" className="p-5 text-sm font-semibold text-muted-foreground">
           맥락 검색 결과가 없습니다.
         </div>
       ) : (
@@ -1027,4 +1027,4 @@ export function SearchLayout() {
       </div>
     </div>
   );
-}
+}