| 요소 | 키보드 | 확인할 상태 |
|---|---|---|
| popover | Esc | 열린 패널 닫기 |
| details | Enter | 요약 열기와 닫기 |
| form | Tab | label과 오류 메시지 |
| dialog | Esc | modal 닫기와 초점 복귀 |
검토할 때 확인할 순서
마우스 없이 Tab으로 진입하고, Enter와 Esc로 열고 닫은 뒤, 현재 위치를 보여주는 focus ring이 유지되는지 확인합니다.
브라우저가 이미 가진 UI 계약을 다시 씁니다.
popover, details name, command/commandfor, dialog, form validation을 JavaScript 없이 조합하는 한국어 UI kit 실험입니다.
keyboard map
브라우저가 넘겨주는 상호작용
각 예제가 제공하는 초점 이동과 닫기 동작을 같은 밀도로 비교합니다.
Forms
브라우저 기본 validation과 CSS 상태 선택자로 입력 흐름을 만든다.
File Input
운영체제 파일 선택기와 브라우저의 선택 상태를 별도 업로드 코드 없이 사용합니다.
local source review
예제 파일 선택
HTML과 CSS 파일을 여러 개 선택할 수 있습니다. 선택한 파일은 이 데모 밖으로 전송되지 않습니다.
- 선택 상태
- 브라우저가 파일 이름과 선택 개수를 표시합니다.
- 키보드
- Tab으로 이동한 뒤 Enter 또는 Space로 파일 선택기를 엽니다.
Selectors
fieldset, radio, checkbox, color/date picker로 선택 흐름을 구성합니다.
검토 옵션
각 컨트롤은 브라우저 기본 선택 UI와 keyboard interaction을 그대로 사용합니다.
Dialog & Accordion
지원 브라우저에서는 commandfor로 dialog를 선언적으로 열 수 있습니다.
접근성
네이티브 요소가 기본 keyboard interaction과 의미를 제공한다.
유지보수
중앙 maintainer bot이 컴포넌트 예제와 문서를 작은 PR로 개선한다.