Question

为了改善tablesorter插件输出的可访问性，我被要求在可排序的列标题中包含一个按钮元素。

当我包含一个按钮时，该按钮不会触发任何排序操作。

当我添加＆＃34;按钮＆＃34;时也是如此。到selectorSort选项。

我修改了tablesorter demo jsfiddle，以便第一个列标题包含button和＆＃34;按钮＆＃34;已添加到selectorSort。

tablesorter button jsfiddle

（按钮元素的存在应该作为屏幕阅读器用户的提示，标题中有一个可操作元素，因为标题本身通常不可操作。我理解aria-label属性可以提供相关指令，但我告诉我需要更多内容，并且我已被专门指示添加按钮元素。）

Answer 1

内置于忽略表头中表单元素的点击。您可以通过更改内部正则表达式（demo）来覆盖它：

HTML

<table class="tablesorter">
  <thead>
    <tr>
      <th>AlphaNumeric</th>
      <th>Numeric</th>
      <th>Animals</th>
      <th>Sites</th>
    </tr>
  </thead>
  <tbody>
    <!-- ... -->
  </tbody>
</table>

脚本

$(function() {
  // default regex = /(input|select|button|textarea)/i;
  // remove "button" from ignored formElements list
  $.tablesorter.regex.formElements = /(input|select|textarea)/i;

  $('table').tablesorter({
    theme: 'blue',
    headerTemplate: '<button>{content}</button>{icon}',
    widgets: ['zebra', 'columns'],
    selectorSort: "th, button"
  });
});

列标题中的tablesorter按钮

1 个答案: