Disclosure
부가적인 정보를 표시하거나 숨기는 컴포넌트입니다. Accordion과 달리 단독으로 사용되며, 여러 개를 동시에 열 수 있습니다.
개요
설치
사용법
trigger와 children을 전달하여 디스클로저를 렌더링합니다. 기본적으로 축소된 상태로 시작합니다.
예제
기본 열림 상태
defaultOpen prop으로 처음부터 열린 상태로 렌더링할 수 있습니다. (KRDS는 축소 상태를 권장)
기본적으로 열려 있는 상태로 시작합니다. 특수한 경우에만 사용을 권장합니다.
접근성
WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.
키보드 지원
| 키 | 동작 |
|---|---|
Enter / Space | 디스클로저 열기/닫기 |
Tab | 다음 포커스 가능한 요소로 이동 |
ARIA 속성
<button>요소로 트리거 구현aria-expanded: 확장/축소 상태 전달aria-controls: 트리거와 콘텐츠 영역 연결- 콘텐츠 영역에
role="region"적용