이벤트

접근성 확장

앱-특정 접근성 추가

Wijmo의 FlexGrid 컨트롤은 광범위한 액세스 지원 기능이 내장되어 있지만 애플리케이션 또는 사용자 기반에 맞게 이를 확장하고 추가 지원을 제공해야 하는 상황이 발생할 수 있습니다.

접근성 지원에 대한 기능을 확장하는 방법을 보기 위해 열이 정렬될 때와 필터가 적용될 때, 사용자에게 이를 알리는 방법에 대해 살펴보도록 하겠습니다.:

// Extend accessibility features
var acX = new AccessibilityExtender(theGrid);
// Notify users when columns are sorted
theGrid.sortedColumn.addHandler(function(s, e) {
    let col = s.columns[e.col];
    acX.alert('column ' + col.header + ' sorted in ' + (col.currentSort == '+' ? 'ascending' : 'descending') + ' order');
});

// Hook up to filter
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;
        };
        // notify users that a filter was applied
        setTimeout(function () {
            var msg = search ? 'grid filtered on ' + search : 'filter removed';
            msg += ': ' + theGrid.rows.length + ' items displayed';
            acX.alert(msg);
        }, 200);
    }, 900);
})

Wijmo에서 자체적인 접근성 확장(Accessibility Extender)을 생성하고 AccessibilityExtender 객체를 만들어 FlexGrid에 연결하여 FlexGrid에 인자로 넘겨 주었습니다. 그 다음, 개체의 alert 메서드를 사용하여 필터링 또는 정렬과 같은 그리드와의 상호 작용이 발생시 사용자에게 알림을 가게 하였습니다.

키보드 처리

FlexGrid는 키보드 처리를 포함한 많은 작업에 대해 Microsoft Excel을 모델로 사용합니다. 그러나 접근성을 개선을 위해 키보드 처리 로직에 대해 몇 가지 변경 사항을 주었습니다.:

1. Ctrl+UP/DOWN: Excel은 이 키를 사용하여 선택을 그리드의 첫 번째/목록 행으로 이동하지만 제어 화살표는 필요한 도구에서 광범위하게 사용됩니다. FlexGrid는 Alt+PAGEUP/DOWN을 사용하여 탐색합니다.
2. Tab: Excel에서 Tab 키는 셀을 순환하는 데 사용되지만 이는 포커스를 다음 요소로 이동하는 기본 브라우저 동작을 방해합니다. FlexGrid의 기본 동작은 브라우저에서 포커스를 처리하도록 허용하지만 keyActionTab 속성을 추가하여 사용자가 Excel과 같은 동작으로 되돌릴 수 있도록 구성하였습니다.
3. Enter: 사용자가 Enter 키의 동작을 사용자 지정할 수 있는 KeyActionEnter 속성을 추가했습니다. FlexGrid에서 사용하는 다른 키보드 명령은 ARIA 권장 사항을 따르며 Excel과 대부분 호환됩니다.

클릭 이벤트 처리

FlexGrid는 하위 요소에 이벤트 핸들러를 추가하지 않고 대신 해당 핸들러를 그리드의 호스트 요소에 연결하지 않습니다. 그런 다음 hit-testing 논리에 따라 명령을 적절한 하위 요소로 전달합니다. 이는 하위 요소의 "클릭" 방법을 직접 호출하여 코드에 이벤트를 발생하고 하위 요소에 대한 참조를 얻을 것으로 예상되는 접근성 시나리오에서 일부 문제를 보일 수 있습니다.

이러한 시나리오를 수용하기 위해 Wijmo는 이제 요소를 매개변수로 삼고 필요한 HitTest 정보를 구축하여 그리드가 코드에서 발생한 클릭 이벤트를 준수할 수 있도록 하는 새로운 HitTest 생성자를 보유하고 있습니다. 예를 들어 다음 코드를 사용하여 열 헤더에 "클릭" 이벤트를 생성할 수 있습니다.

// Get the header cell
var headerCell = grid.columnHeaders.getCellElement(0,0);
// Invoke the “click” event on the header cell
headerCell.click();

또는 다음 코드를 사용하여 지정된 열에 대한 필터 편집기를 드롭다운할 수 있습니다.

// Get the filter glyph element using a CSS selector
var selector = '.wj-flexgrid .wj-colheaders .wj-cell .wj-elem-filter'; var filterBtn = grid.hostElement.querySelector(selector);  
columnHeaders.getCellElement(0, 0);  
// Invoke the “click” event on the filter glyph  
filterBtn.click();  

동일한 접근 방식을 따라 클릭을 시뮬레이션하고 셀을 선택하고 노드를 확장/축소하고 셀과 연결된 드롭다운 목록 상자 등을 수행할 수 있습니다.