Add aria-label to filter widget

[hijklmno]

Hi Team,

Great tool! We use this in production as an internal tool for both sighted and blind individuals at our company.

It would be great to add aria-label to the filter input text fields, such as "Filter by...". Bonus points for appending the column name (from the body of the column's th).

Let me know what you guys think!

[Mottie]

Hi @hijklmno!

Good idea! Please let me know if there are any other ARIA labels that need to be added.

[Mottie]

In the master branch a new option was added: filter_filterLabel; I'm not sure when I'll make the next release available, but you shouldn't have to wait too long.

Notes:

• The data- prefix must not be added in the placeholders.
• An existing & empty data-attribute (e.g. data-label-extra) will not add any content to the resulting label.
• If an included data-attribute does not exist on the header, it will be replaced by the header text.

Use it as follows:

Default example:

HTML

<th data-label="First Name" class="filter-match">First</th>

Script

// ...
widgetOptions: {
  filter_filterLabel: 'Filter "{{label}}" column by...';
}
// ...

Resulting label: Filter "First Name" column by...

Complex example:

HTML

<th data-column-name="last name" data-ordinal-number="second" data-default-filter=", using a fuzzy search" data-label-extra="">
  Last
</th>

Script

// ...
widgetOptions: {
  filter_filterLabel: "Filter the {{column-name}}, the {{ordinal-number}} column{{label-extra}}{{default-filter}}";
}
// ...

Resulting label: Filter the last name, the second column, using a fuzzy search.

[hijklmno]

that is AWESOME. will wait for next update! thank you @Mottie!

[debugguru]

Hi, I tried above but I am not able to get the aria-Label on the text box
This is what I added to configuration
filter_filterLabel: 'Filter "{{label}}"',

and this is what it renders

<td data-column="2" class="tablesorter-filter-cell"><input type="search" placeholder="" class="tablesorter-filter" data-column="2" data-lastsearchtime="1547207892745"></td>

I am not sure if we need to add any more configuration. This is what my configuration looks like

var table = $(".js_applicant-list").tablesorter({
  headerTemplate: "{icon} {content}",
  cssIconNone: "column-sortable__link",
  onRenderHeader: function(index) {
    if (columnsWithoutSort.indexOf(index) > -1) {
      $(this).find("a").removeClass("tablesorter-icon");
    }
  },
  cssIconAsc: "column-sortable__link column-sortable__link--up",
  cssIconDesc: "column-sortable__link column-sortable__link--down",
  cssChildRow: "tablesorter-childRow",
  sortList: [[columnIndexes.lastUpdated, 1]],
  widgets: ["filter"],
  widgetOptions: {
    // If there are child rows in the table (rows with class name from "cssChildRow" option)
    // and this option is true and a match is found anywhere in the child row, then it will make that row
    // visible; default is false
    filter_childRows: true,

    // filter child row content by column; filter_childRows must also be true
    filter_childByColumn: true,

    filter_cssFilter: "tablesorter-filter",

    filter_filterLabel: 'Filter "{{label}}"',

    // Set this option to false to make the searches case sensitive
    filter_ignoreCase: true,

    // jQuery selector string of an element used to reset the filters
    filter_reset: ".reset",

    // Use the $.tablesorter.storage utility to save the most recent filters
    filter_saveFilters: false,

    filter_hideEmpty: true,
    // Delay in milliseconds before the filter widget starts searching; This option prevents searching for
    // every character while typing and should make searching large tables faster.
    filter_searchDelay: 300,

    // Set this option to true to use the filter to find text from the start of the column
    // So typing in "a" will find "albert" but not "frank", both have a's; default is false
    filter_startsWith: false,

    filter_cellFilter: filterCellClassNames
  }
});

[Mottie]

Hi @debugguru!

Is there a data-label included in the table header?

I set up this demo and it appears to be working.

[debugguru]

Thanks @Mottie . No we dont have data-label. I will try that now. Thanks for the response and example