headers 列中的表格排序按钮

Question

为了提高 tablesorter 插件输出的可访问性，有人要求我在可排序列中包含一个按钮元素 headers。

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

我在selectorSort选项中加上"button"也是这样

我修改了 tablesorter 演示 jsfiddle，以便第一列 header 包含一个 button 并且 "button" 已添加到 selectorSort.

tablesorter button jsfiddle

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

Answer 1

忽略对 table header 中表单元素的点击是 built-in。您可以通过更改内部正则表达式 (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"
  });
});

headers 列中的表格排序按钮

tablesorter buttons in column headers

jquery

tablesorter