그리드 접근성 확장

앱별 접근성 추가

Wijmo의 FlexGrid 컨트롤은 광범위한 내장 접근성 지원 기능을 가지고 있지만, 애플리케이션이나 사용자 기반하여 특정 추가 지원을 제공하고 싶은 상황이 있을 수 있습니다.

접근성 지원 기능을 확장하는 방법을 보여드리기 위해, 열이 정렬되었을 때와 필터가 적용되었을 때 사용자에게 알리는 방법에 대해 설명하겠습니다.

// 접근성 기능 확장
var acX = new AccessibilityExtender(theGrid);
// 열이 정렬되었을 때 사용자에게 알림
theGrid.sortedColumn.addHandler(function(s, e) {
    let col = s.columns[e.col];
    acX.alert('column ' + col.header + ' sorted in ' + (col.currentSort == '+' ? 'ascending' : 'descending') + ' order');
});

// 필터와 연동
var toSearch = null;
document.getElementById('filter').addEventListener('input', function(e) {
    clearTimeout(toSearch);
    toSearch = setTimeout(function () {
        var search = e.target.value, rx = new RegExp(search, 'i');
        theGrid.collectionView.filter = function (item) {
            return !search || JSON.stringify(item).match(rx) != null;
        };
        // 필터가 적용되었음을 사용자에게 알
        setTimeout(function () {
            var msg = search ? 'grid filtered on ' + search : 'filter removed';
            msg += ': ' + theGrid.rows.length + ' items displayed';
            acX.alert(msg);
        }, 200);
    }, 900);
})

우리는 AccessibilityExtender 객체를 생성하고 우리의 FlexGrid를 인수로 전달하여 접근성 확장기를 만들고 FlexGrid에 연결합니다. 그런 다음 이 객체의 alert 메서드를 사용하여 사용자가 그리드와 상호 작용할 때, 즉 필터링이나 정렬을 할 때 사용자에게 알릴 수 있습니다.

키보드 핸들링

FlexGrid는 키보드 처리 등 많은 작업에서 Microsoft Excel을 모델로 사용합니다. 그러나 접근성을 더 잘 지원하기 위해 키보드 처리 로직에 몇 가지 변경을 추가했습니다.

1. Ctrl+UP/DOWN: Excel은 해당 키들을 사용하여 선택을 그리드의 첫 번째/마지막 행으로 이동시키지만, 제어 화살표는 접근성 도구에서 광범위하게 사용됩니다. 따라서 FlexGrid는 첫 번째 및 마지막 행으로 이동하기 위해 대신 Alt+PAGEUP/DOWN을 사용합니다.

2. Tab: Excel에서는 Tab 키를 사용하여 셀을 순환합니다. 그러나 이는 기본적인 브라우저 동작인 포커스를 다음 요소로 이동시키는 동작과 충돌이 날 수 있습니다. 이를 방지하기 위해서 FlexGrid의 기본 동작은 브라우저가 포커스를 처리하도록 하지만, 사용자가 Excel과 유사한 동작으로 되돌릴 수 있도록 keyActionTab 속성을 추가했습니다.

3. Enter: 사용자가 Enter 키의 동작을 사용자 정의할 수 있도록 keyActionEnter 속성을 추가했습니다.

FlexGrid에서 사용하는 다른 키보드 명령은 ARIA 권장 사항을 따르며 대체로 Excel과 호환됩니다.

클릭 이벤트 핸들링

FlexGrid은 자식 요소에 이벤트 핸들러를 추가하는 것을 피하는 대신 그리드의 호스트 요소에 이벤트 핸들러를 추가합니다. 그런 다음 hit-testing 로직을 기반으로 적절한 자식 요소로 명령을 전달해줍니다. 이로 인해 코드에서 자식 요소의 "click" 메서드를 직접 호출하여 이벤트를 발생시키고 참조를 얻기를 기대하는 접근성 시나리오에서 일부 문제가 발생할 수 있습니다.

이러한 시나리오를 수용하기 위해, Wijmo는 이제 요소를 매개변수로 사용하여 필요한 히트 테스트 정보를 구축하는 새로운 HitTest 생성자를 제공합니다. 예를 들어, 다음 코드를 사용하여 열 머리글에서 "click" 이벤트를 생성할 수 있습니다:

// 헤더 셀 가져오기 
var headerCell = grid.columnHeaders.getCellElement(0,0);
// 헤더 셀에서 "click" 이벤트를 호출
headerCell.click();

또는 다음 코드를 사용하여 특정 열의 필터 편집기를 펼칠 수 있습니다:

// CSS 셀렉터를 사용하여 필터 글리프 요소를 가져오기 
var selector = '.wj-flexgrid .wj-colheaders .wj-cell .wj-elem-filter'; var filterBtn = grid.hostElement.querySelector(selector);  
columnHeaders.getCellElement(0, 0);  
// 필터 글리프에서 "click" 이벤트를 호출
filterBtn.click();  

셀을 클릭하거나 선택하고, 노드를 확장/축소하거나, 셀과 관련된 드롭다운 리스트 상자를 펼치는 등의 작업을 시뮬레이션하는 데 동일한 접근 방식을 사용할 수 있습니다.