アクセシビリティの拡張

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

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

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

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

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

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

キーボードの組み合わせ	実行される操作
Shift + Space	行を選択
Ctrl + Space	列を選択
Space	編集を開始するか、チェックボックスを切り替えます現在のレベルグループを展開または折りたたみます
Ctrl + A	グリッドコンテンツ全体を選択します
Left/Right	選択範囲の左/右にあるセルを選択します
Shift + Left/Right	選択範囲を拡張して、選択範囲の左/右にセルを含めます列を左右に移動します（headersFocusability と allowDragging が設定され、列ヘッダーにフォーカスしている場合）
Shift + Up/Down	選択範囲を拡張して、選択範囲の上/下のセルを含めます行を上下に移動します（headersFocusability と allowDragging が設定され、行ヘッダーにフォーカスしている場合）
Alt + Left/Right	列幅を縮小/拡大します（allowResizing が必要です）デフォルトの縮小/拡大幅は 2px です。FlexGrid.SHORTCUT_KEY_RESIZE_GAP で調整できます。 deferResizing が有効になっている場合はプレビューモードに入ります。　Enter：プレビューを確定　Escape ：プレビューをキャンセル
Alt + Up/Down	現在のセルのリストボックスエディタをドロップダウンします行の高さを縮小/拡大します（allowResizing が必要です）デフォルトの縮小/拡大幅は 2px です。FlexGrid.SHORTCUT_KEY_RESIZE_GAP で調整できます。deferResizing が有効になっている場合はプレビューモードに入ります。　Enter：プレビューを確定　Escape ：プレビューをキャンセル
PageUp/Down	選択範囲の1ページ上/下のセルを選択します
Shift + PageUp/Down	選択範囲を拡張して、選択範囲の1ページ上/下のセルを含めます
Alt + PageUp/Down	選択範囲を最初/最後の行に移動します
Shift + Alt + PageUp/Down	選択範囲を拡張して、最初/最後の行を含めます
Home/End	選択範囲を最初/最後の列に移動します
Shift + Home/End	選択範囲を拡張して、最初/最後の列を含めます
Ctrl + Home/End	選択範囲を最初/最後の行と列に移動します
Shift + Ctrl + Home/End	選択範囲を拡張して、最初/最後の行と列を含めます
Escape	現在のセルまたは行の編集操作をキャンセルします
Tab	選択範囲をページ上の次のフォーカス可能な要素に移動します（ keyActionTab プロパティを使用してオーバーライドできます）
Enter	編集モードを終了し、選択範囲を現在のセルの下のセルに移動します（keyActionEnter プロパティを使用して上書きできます）
Delete, Backspace	現在選択されている行を削除するか（ allowDelete プロパティがtrueに設定されている場合）、選択したセルのコンテンツをクリアします（値が不要な場合）
Ctrl + C or Ctrl + Insert	選択範囲をクリップボードにコピーします（ autoClipboard プロパティがtrueに設定されている場合）
Ctrl + X	選択範囲をクリップボードにコピーし、変更可能な選択範囲内のコンテンツをすべてクリアまたは削除します（autoClipboard プロパティが true に設定され、preventCut プロパティが false に設定されている場合）。
Ctrl + V or Shift + Insert	クリップボードの内容を選択した領域に貼り付けます（ autoClipboard プロパティがtrueに設定されている場合）
Ctrl + +	allowAddNew が true の場合、現在のアクティブセルの上に新しい空白行を挿入します。(テンキーの + キー)
Ctrl + -	allowDelete が true の場合、アクティブセルがある行を削除します。(テンキーの - キー)
Ctrl + Shift + P	アクティブセルが配置されている列をピン留め/ピン留め解除します。
Ctrl + Shift + F	アクティブセルが配置されている列フィルターを開きます。
Ctrl + Shift + S	アクティブセルが配置されている列を並べ替えます。
Alt + Shift + F	アクティブセルの前のすべての行と列を固定します。

組み込みのカット処理の動作
カット操作は次の2つのステップで実行されます：
選択された内容をクリップボードにコピーします。
変更可能な選択内容のみをクリアします。
適用されるルールは次のとおりです：
読み取り専用または編集不可のセルはコピーはされますが削除されません。
コピー処理がキャンセルされた、または完了しなかった場合、内容は削除されません。
編集可能と編集不可のセルが混在して選択されている場合、編集可能なセルの内容のみ削除されます。
preventCut を true に設定すると、組み込みのカット処理を無効化し、独自のショートカット処理を実装できます。

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

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

このシナリオに対応するために、Wijmoには、要素をパラメーターとして受け取り、必要なヒットテスト情報を構築する新しい　HitTest　コンストラクターが追加されました。これにより、グリッドはコード内のクリックイベントの発生を受け入れることができます。たとえば、次のコードを使用して、列ヘッダーに「クリック」イベントを生成できます。

// ヘッダーセルを取得
var headerCell = grid.columnHeaders.getCellElement(0,0);
// ヘッダーセルで「クリック」イベントを呼び出します。
headerCell.click();

または、次のコードを使用して、特定の列のフィルターエディターをドロップダウンすることもできます。

// CSSセレクタを使用してフィルターグリフ要素を取得します
var selector = '.wj-flexgrid .wj-colheaders .wj-cell .wj-elem-filter'; var filterBtn = grid.hostElement.querySelector(selector);  
columnHeaders.getCellElement(0, 0);  
// フィルターグリフの「クリック」イベントを呼び出す
filterBtn.click();

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