Open
Description
Summary
Checkbox 와 NestedCheckbox 컴포넌트를 구현하기 위한 RFC 문서입니다.
Goals & Requirements
컴포넌트 스펙과 디자인 시안에 맞는 컴포넌트를 각각 구현합니다. 기본적인 요구사항은 다음과 같습니다.
- 마우스로 체크 상태를 토글할 수 있고, 탭키로 포커싱이 가능하며, 포커싱했을 때 스페이스로 체크 상태를 토글 할수 있어야 합니다.
Checkbox를 단독으로 쓰는 경우,Checkbox와NestedCheckbox를 같이 사용하는 경우 모두 대응해야 합니다. 같이 사용했을 때Checkbox는Indeterminate상태까지 표현할 수 있어야 합니다.- uncontrolled와 controlled 모두 사용가능하도록 합니다.
Design Details
- controlled, uncontrolled 방식을 모두 지원해야 합니다. uncontrolled 로 사용할 때는 props중에
defaultChecked가undefined가 아닐때이고, 이 때는NestedCheckbox의 체크 상태를 담고있는 컨텍스트를 주입합니다. 컨텍스트의 인터페이스는 아래와 같은 형태가 될 것 같습니다.NestedCheckbox가 체크될 때나defaultChecked인 상태일 때 컨텍스트의toggleChecked를 호출해서Checkbox의checkedMap을 바꾸게 됩니다.
type CheckedBoxContext = {
checkedMap: Map<string, boolean> // NestedCheckbox의 name을 key 로 활용합니다.
toggleChecked: (name: string) => void
}- 컴포넌트 인터페이스
interface CheckboxOwnProps {
/**
* check 상태
* /
checked?: boolean
/**
* uncontrolled 로 사용하고 싶을 때 선언
* /
defaultChecked?: boolean
/**
* label과 쌍으로 쓰이기 위한 id
* /
id?: string
/**
* form을 제출할 때 value와 같이 쓰이는 값
* /
name?: string
/**
* form을 제출할 때 value와 같이 쓰이는 값
* @default "on"
*
value?: string
/**
* 체크 상태가 변할 때 호출되는 함수
* /
onCheckedChange?: (checked: boolean) => void
}
interface NestedCheckboxOwnProps {
/**
* check 상태
* /
checked?: boolean
/**
* uncontrolled 로 사용하고 싶을 때 선언
* /
defaultChecked?: boolean
/**
* label과 쌍으로 쓰이기 위한 id
* /
id?: string
/**
* form을 제출할 때 value와 같이 쓰이는 값
* /
name?: string // uncontrolled 로 사용할 때는 required
/**
* form을 제출할 때 value와 같이 쓰이는 값
* @default "on"
*
value?: string
/**
* 체크 상태가 변할 때 호출되는 함수
* /
onCheckedChange?: (checked: boolean) => void
} - 폼 컴포넌트는 미구현 상태이기 때문에 FormControl 의 컨텍스트를 받는 것은 TODO 로 남겨놓습
Use Cases
아래와 같은 형태로 사용되길 기대합니다. Nested하게 사용하는 케이스가 있어서 라벨을 children 이 아닌 props로 관리합니다.
<Checkbox label="개인 정보 수집에 동의" />
// Nested로 사용할 때
<Checkbox label="개인 정보 수집에 동의">
<NestedCheckbox label="이메일" value="이메일" />
<NestedCheckbox label="전화 번호" value="전화 번호" />
</Checkbox>Accessibility
Checkbox는 role="checkbox" 속성을 가져야 합니다.
체크 상태에 따라 aria-checked="false", "true", "mixed" 속성을 지원합니다.
탭으로 포커싱을 할 수 있고 키보드로 체크 상태를 지원합니다.
Test Plan
- aria-* 속성 테스트 (role, aria-checked, aria-disabled, aria-required)
- 마우스 클릭, 키보드 (tab, space) 인터렉션 테스트
- Nested & uncontrolled 로 사용했을 때, NestedCheckbox의 체크 상태에 따라 Checkbox의 체크 상태가 잘 결정되는지
Alternatives
No response