谷歌图表表格通过键盘排序

Question

我正在尝试在必须 100% 符合第 508 节（即残障人士可以访问）的网站上使用 Google Charts API。

Google Charts 表格具有“排序”功能，但在其默认状态下，键盘无法选择列标题进行排序。

我可以使用一些 Javascript 轻松地将“tabindex=0”属性注入到列标题元素中，并且正如预期的那样，这使得列标题可聚焦...但令人惊讶的是，单击 Enter 键什么也没做。如果我使列标题内的排序箭头可聚焦，也会发生同样的事情 - 我可以使用 TAB 专注于它，但我仍然无法选择它。

有人对此有解决方案吗？如果没有直接的方法来创建仅使用键盘可排序的表格，是否有将焦点/按键转换为 onclick 的解决方法？

Answer 1

我创建了一个使用 jQuery 在按键上重绘图表的小提琴：

http://jsfiddle.net/mVYeL/

以下是相关代码：

google.load('visualization', '1.1', {
    'packages': ['table']
});
google.setOnLoadCallback(drawStuff);

var table;
var data;
var options = {sortAscending:true};

function sortTable(col) {
    if (options.sortColumn == col) {
        options.sortAscending = !options.sortAscending;
    } else {
        options.sortAscending = true;
    }
    options.sortColumn = col;
    table.draw(data, options);
}

$(document).keydown(function(e){
    if (e.keyCode==49) { sortTable(0); }
    if (e.keyCode==50) { sortTable(1); }
    if (e.keyCode==51) { sortTable(2); }
});

function drawStuff() {
    data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

    // Instantiate and draw our chart, passing in some options.
    table = new google.visualization.Table(document.getElementById('chart_div'));
    table.draw(data, options);
};