🎨 Palette: ContextSection 접근성 개선 (ARIA 연결 및 키보드 포커스)

.Jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-05-18 - [Dynamic ARIA Links in React]
+**Learning:** When building reusable UI components (like `ContextSection` in this codebase) that require linking elements for accessibility (e.g., `aria-controls` to `id`, `aria-labelledby` to `id`), hardcoded IDs will clash if multiple instances of the component are rendered on the same page.
+**Action:** Always use React's `useId()` hook to generate unique prefixes or full IDs for ARIA relationships within reusable components. Additionally, for components compiled with Vitest in `web`, explicitly import `React` to avoid "React is not defined" errors during testing, and add `jsdom` and `@testing-library/*` dependencies to the specific workspace project if tests are added where they previously did not exist.

packages/web/package.json

@@ -41,12 +41,15 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.2.2",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/bcryptjs": "^2",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "dotenv": "^17.4.2",
     "eslint-config-next": "^16.2.3",
+    "jsdom": "^29.1.1",
     "prisma": "^6",
     "shadcn": "^4.10.0",
     "tailwindcss": "^4",

packages/web/src/components/dashboard/reports/context-section.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { render, screen, cleanup } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, afterEach } from 'vitest'
+import { ContextSection } from './context-section'
+
+/** @vitest-environment jsdom */
+
+describe('ContextSection', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('renders correctly and toggles content visibility', async () => {
+    const user = userEvent.setup()
+    render(
+      <ContextSection title="Test Title">
+        <p>Hidden Content</p>
+      </ContextSection>
+    )
+
+    // Initially collapsed
+    const button = screen.getByRole('button', { name: /Test Title/i })
+    expect(button).toBeDefined()
+    expect(button.getAttribute('aria-expanded')).toBe('false')
+    expect(screen.queryByText('Hidden Content')).toBeNull()
+
+    // Click to expand
+    await user.click(button)
+    expect(button.getAttribute('aria-expanded')).toBe('true')
+
+    const content = screen.getByText('Hidden Content')
+    expect(content).toBeDefined()
+
+    // Verify accessibility attributes are linked correctly
+    const contentId = content.parentElement?.getAttribute('id')
+    expect(button.getAttribute('aria-controls')).toBe(contentId)
+
+    // Click to collapse
+    await user.click(button)
+    expect(button.getAttribute('aria-expanded')).toBe('false')
+    expect(screen.queryByText('Hidden Content')).toBeNull()
+  })
+
+  it('renders defaultOpen correctly', () => {
+    render(
+      <ContextSection title="Open Title" defaultOpen>
+        <p>Visible Content</p>
+      </ContextSection>
+    )
+
+    const button = screen.getByRole('button', { name: /Open Title/i })
+    expect(button.getAttribute('aria-expanded')).toBe('true')
+    expect(screen.getByText('Visible Content')).toBeDefined()
+  })
+})

packages/web/src/components/dashboard/reports/context-section.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, type ReactNode } from 'react'
+import React, { useState, useId, type ReactNode } from 'react'
 import { ChevronDown, ChevronUp } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
@@ -12,17 +12,23 @@ interface ContextSectionProps {
 
 export function ContextSection({ title, children, defaultOpen = false }: ContextSectionProps) {
   const [open, setOpen] = useState(defaultOpen)
+  const id = useId()
+  const contentId = `context-section-content-${id}`
+  const buttonId = `context-section-button-${id}`
 
   return (
     <div className="rounded-xl bg-card ring-1 ring-foreground/10 overflow-hidden">
       <button
+        id={buttonId}
         type="button"
         onClick={() => setOpen((v) => !v)}
         className={cn(
           'w-full flex items-center justify-between px-4 py-3 text-left',
           'hover:bg-card-elevated transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset'
         )}
         aria-expanded={open}
+        aria-controls={contentId}
       >
         <h2 className="text-base font-medium">{title}</h2>
         {open ? (
@@ -32,7 +38,12 @@ export function ContextSection({ title, children, defaultOpen = false }: Context
         )}
       </button>
       {open && (
-        <div className="px-4 pb-4 pt-1">
+        <div
+          id={contentId}
+          role="region"
+          aria-labelledby={buttonId}
+          className="px-4 pb-4 pt-1"
+        >
           {children}
         </div>
       )}

packages/web/vitest.config.ts

@@ -23,7 +23,7 @@ export default defineConfig({
   },
   test: {
     environment: 'node',
-    include: ['src/**/*.test.ts'],
+    include: ['src/**/*.test.ts', 'src/**/*.test.tsx'],
     // .env.local を自動ロードして DATABASE_URL などのローカル環境変数を有効化
     env: (() => {
       try {