アクセシビリティの拡張

アプリ固有のアクセシビリティの追加

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

AccessibilityExtender　オブジェクトを作成し、引数としてFlexGridを渡すことで、AccessibilityExtenderを作成し、FlexGridに関連付けます。 次に、このオブジェクトの alert メソッドを使用して、グリッドとの対話がフィルタリングか並べ替えかを問わず、ユーザーに通知できます。

キーボード処理のハンドリング

FlexGridは、キーボード処理を含む多くの操作のモデルとしてMicrosoftExcelを使用します。 ただし、アクセシビリティに対応するために、キーボード処理ロジックにいくつかの変更を加えました。

1. Ctrl+UP/DOWN：Excelはこれらのキーを使用して、選択範囲をグリッドの最初/リスト行に移動しますが、ユーザー補助ツールではコントロール矢印が広く使用されています。 したがって、FlexGridは代わりに Alt+PAGEUP/DOWN を使用して、代わりに最初と最後の行に移動します。
2. Tab：Excelでは、 Tab キーを使用してセルを循環しますが、これは、フォーカスを次の要素に移動するというデフォルトのブラウザーの動作を妨げます。 FlexGridのデフォルトの動作は、ブラウザにフォーカスを処理させることですが、ユーザーがExcelのような動作に戻れるように、keyActionTab プロパティが追加されています。
3. Enter：ユーザーがEnterキーの動作をカスタマイズできるようにする keyActionEnter プロパティを追加しました。

FlexGridで使用される他のキーボードコマンドはARIAの推奨事項に従っており、Excelとほぼ互換性があります。

クリックイベントのハンドリング

FlexGridは、子要素へのイベントハンドラーの追加を回避し、代わりにそれらをグリッドのホスト要素にアタッチします。 次に、ヒットテストロジックに基づいてコマンドを適切な子要素に転送します。 これは、子要素の「クリック」メソッドを直接呼び出すことによって、子要素への参照を取得し、コードでイベントを発生させることを期待するアクセシビリティシナリオでいくつかの問題を提示します。

このシナリオに対応するために、Wijmoには、要素をパラメーターとして受け取り、必要なヒットテスト情報を構築する新しい　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();  

同じアプローチに従って、クリックをシミュレートしてセルを選択したり、ノードを展開/折りたたんだり、セルに関連付けられたリストボックスをドロップダウンしたりできます。