SYIDAX GRID

키보드와 다국어

Grid는 많은 행과 열을 키보드로 탐색하는 작업 공간입니다. 셀 이동·편집·메뉴 진입과 화면 밖 앱 버튼으로 나가는 경로가 모두 이해 가능해야 합니다.

동작 원리와 선택 기준

언어 설정은 Grid 기본 문구를 바꿉니다. 열 이름·원본 데이터·앱 안내 문구는 앱이 직접 번역하고, 숫자·날짜 표시는 valueFormatter에서 목적에 맞게 처리합니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

예제 1. 한국어와 키보드 탐색

한국어 안내와 키보드 탐색이 가능한 기본 환경을 구성합니다.

javascript
grid.locale = 'ko';
grid.keyboardNavigation = true;

결과 확인: 기본 문구가 한국어로 표시되고 키보드 탐색을 사용할 수 있습니다. 모든 버튼과 편집기를 Tab·방향키·Enter·Escape로 확인하세요.

예제 2. 지원 언어 전환

앱의 언어 선택 결과를 Grid에 전달합니다.

javascript
grid.locale = 'ja';

결과 확인: Grid의 내장 문구가 일본어로 바뀝니다. 주문 상태 같은 원본 값이 자동 번역되는 것은 아닙니다.

예제 3. 접근 가능한 업무 셀

렌더러의 버튼에 행을 구분하는 이름을 제공하고 상태 색 옆에 텍스트도 표시합니다. 표 바깥에는 결과 개수와 저장 결과를 읽을 수 있는 안내 영역을 둡니다.

결과 확인: 스크린 리더와 키보드 사용자가 현재 위치와 다음 동작을 알 수 있습니다. 대량 데이터 갱신마다 모든 셀 내용을 live region으로 읽게 만들지 마세요.

조합할 때와 문제를 해결할 때

앱이 모든 keydown을 가로채면 Grid 편집·탐색이 깨집니다. 단축키의 대상과 기본 동작 차단 범위를 제한합니다.

행 가상화는 일부 DOM만 유지합니다. DOM에 없는 행을 접근할 수 없다고 단정하지 말고 실제 탐색과 안내를 보조 기술로 확인합니다.

함께 읽기