접근성 및 키보드 사용 (Accessibility & Keyboard)
현재 제공되는 DOM 기반 셀, 활성 셀 이동, 행 선택과 셀 선택 단축키의 접근성 적용 범위를 확인합니다.
1. 현재 제공 범위
AXBOOT DataGrid는 Canvas가 아니라 DOM 기반 테이블 요소로 셀을 렌더링합니다. 그리드 루트는 키보드 포커스를 받을 수 있으며, 활성 셀은 시각적 테두리와 data-axdg-cell-active 상태로 구분됩니다. 행 선택 컨트롤은 실제 checkbox 또는 radio 역할과 aria-checked, aria-disabled 상태를 제공합니다.
화살표, Tab, Home/End, PageUp/PageDown을 통한 셀 포커스 이동, F2/Enter 편집 진입, Enter/Space 셀 활성화도 제공합니다. 전체 키 목록과 제어형 상태 예제는 셀 포커스와 키보드 이동 가이드에서 직접 확인할 수 있습니다.
다만 현재 구현을 완전한 WAI-ARIA Grid 패턴 준수로 간주해서는 안 됩니다. 애플리케이션에서 요구하는 접근성 기준은 실제 사용 화면에서 스크린 리더와 키보드로 별도 검증하세요.
2. 키보드 기능 구분
| 대상 | 주요 키 | 설명 |
|---|---|---|
| 활성 셀 | 방향키, Home/End, PageUp/PageDown, Tab | 그리드에 포커스가 있을 때 셀을 이동하고 필요한 경우 내부 스크롤을 조정 |
| 셀 활성화 | Enter, Space | 읽기 전용 셀 또는 Enter 편집이 꺼진 셀에서 onClick 콜백 실행 |
| 셀 범위 | Shift + 방향키, Ctrl/Cmd + A | 선택 범위 확장 또는 전체 셀 선택 |
| 클립보드 | Ctrl/Cmd + C | 선택 영역을 탭과 줄바꿈으로 구분해 복사 |
| 인라인 편집 | F2, Enter, Escape | 편집 진입 또는 커스텀 편집기에서 저장·취소 처리 |
| 행 선택 | Space, Enter | 포커스된 체크박스 또는 라디오 선택 토글 |
그리드는 input, textarea, select, button, contenteditable에서 발생한 키를 가로채지 않습니다. 따라서 커스텀 에디터와 툴박스 입력은 자신의 기본 키보드 동작을 유지합니다.
3. 적용 시 점검 목록
rowChecked.disabled로 선택 불가 행을 지정하고 시각 상태와aria-disabled가 함께 반영되는지 확인합니다.- 마우스 없이 활성 셀 이동, 행 선택, 셀 범위 선택과 복사가 가능한지 실제 브라우저에서 확인합니다.
- 포커스 표시가 서비스 테마에서도 충분한 대비를 갖는지 확인합니다.
- 커스텀
itemRender내부 입력 요소가 포커스 순서를 깨거나 필요한 키 이벤트를 누락하지 않는지 확인합니다. - 제어형
activeCell을 사용한다면onActiveCellChange값을 다시 props로 전달하는지 확인합니다. - 서비스의 목표 접근성 수준이 높다면 자동 검사뿐 아니라 스크린 리더와 키보드 전용 사용 시나리오를 수행합니다.