Accessibility Extender

Adding App-Specific Accessibility

Wijmo's FlexGrid control has extensive built-in accessibility support, but there may be situations where you want to extend that and provide additional support, specific to your application or user base.

To show how to extend functionality for accessibility support, we'll go through how to notify users when columns are sorted, as well as when a filter is applied:

// 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);
})

We create our accessibility extender and tie it to the FlexGrid by creating an AccessibilityExtender object and passing our FlexGrid as an arguement. We can then use this object's alert method to notify the user when the interact with the grid, whether that be filtering or sorting.

Keyboard Handling

The FlexGrid uses Microsoft Excel as a model for many operations, including keyboard handling. However, we've made a few changes to keyboard handling logic to better accommodate accessibility:

1. Ctrl+UP/DOWN: Excel uses these keys to move the selection to the first/list rows of the grid, however, the control arrows are used extensivel by accessibility tools. So, FlexGrid instead uses Alt+PAGEUP/DOWN to navigate to the first and last rows instead.
2. Tab: In Excel, the Tab key is used to cycle through cells, but this interferes with default browser behavior, which is to move focus to the next element. The default behavior of FlexGrid is to let the browser handle the focus, but have added a keyActionTab property so users can revert to the Excel-like behavior.
3. Enter: We have added a keyActionEnter property that allows users to customize the behavior of the enter key.

The other keyboard commands used by FlexGrid follow the ARIA recommendations and are largely compatible with Excel.

Click Event Handling

FlexGrid avoids adding event handlers to child elements, instead attaching them to the grid's host element. It then forwards the commands to the appropriate child elements based on hit-testing logic. This presents some problems in accessibility scenarios that expect to get references to child elements and fire events in code by invoking the child element's "click" methods directly.

To accommodate this scenario, Wijmo now has a new HitTest constructor that takes an element as a parameter and builds the necessary hit-test information so the grid can honor click events fires in code. For example, you can generate a "click" event on a column header using the following code:

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

Or, you could drop down the filter editor for a given column using this code:

// 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();  

You can follow the same approach to simulate clicks and select cells, expand/collapse nodes, drop down list boxes associated with cells, etc.