🎨 Palette: [UX improvement] Context Section 컴포넌트 접근성 개선

[seonghobae]

💡 What

ContextSection 컴포넌트 내의 아코디언 토글 버튼에 키보드 탐색 포커스 스타일(focus-visible)을 추가하고, 스크린 리더 사용자를 위해 WAI-ARIA 속성(aria-controls, aria-labelledby, role="region")을 올바르게 매핑했습니다.

🎯 Why

기존 ContextSection 컴포넌트는 마우스 접근에는 문제가 없었으나, 탭 키를 통한 키보드 탐색 시 포커스 링이 표시되지 않아 어느 요소에 위치해 있는지 시각적인 피드백이 부족했습니다. 또한 스크린 리더 사용자에게 토글 버튼과 펼쳐지는 내용 사이의 연관성을 의미적으로 제공하지 않았습니다.

📸 Before/After

(Playwright 영상/스크린샷 검증 완료)

• Before: 탭 키 포커스 시 외곽선 없음, 컨텐츠 영역에 ID 및 aria-labelledby 속성 부재
• After: 탭 키 포커스 시 명확한 포커스 링 표시(ring-2 ring-ring), 토글 버튼과 패널 컨텐츠가 고유 ID를 통해 ARIA 속성으로 연결됨

♿ Accessibility

• useId 훅을 도입하여 고유한 ID를 부여함으로써, 한 페이지에 여러 ContextSection이 사용되더라도 스크린 리더가 버튼과 해당 내용 영역을 정확하게 매핑(aria-controls, aria-labelledby)할 수 있게 되었습니다.
• 패널을 감싸는 div 요소에 role="region"을 할당하여 스크린 리더가 명확한 영역 랜드마크로 인식하도록 개선했습니다.
• 화살표(Chevron) 아이콘 등 시각적인 장식 요소는 aria-hidden="true" 속성을 추가하여 스크린 리더가 불필요하게 읽지 않도록 조치했습니다.
• 키보드 포커스(focus-visible:ring-2) 지원을 추가하여 시각적 접근성을 강화했습니다.

---

PR created automatically by Jules for task 7948769173390846838 started by @seonghobae

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.