Currently, the column filters for Tabulator don't have any kind of label attached to them, either a tag or an aria-label. This is causing them to get picked up an in aXe DevTools scan, which is returning the "Form elements must have labels" error for every header filter. However, it doesn't look like an attribute we can pass through params, nor is one automatically generated like it is in other instances in Tabulator (such as row checkboxes). This is the case across all the header filter types I've used, so I'm thinking it's just not a current feature. Does anybody know of a way to manually add a label or aria-label tag? I'm thinking I'll have to open an issue, but I wanted to check first in case I'm missing something. Thank you!
One way would be to loop thru each input element after table is built and add the attributes as needed. Here is an example:
const data = [
{ id: 1, name: 'Billy Bob', age: '12', gender: 'male', height: 1, col: 'red', dob: '', cheese: 1 },
{ id: 2, name: 'Mary May', age: '1', gender: 'female', height: 2, col: 'blue', dob: '14/05/1982', cheese: true },
{ id: 10, name: 'Margret Marmajuke', age: '16', gender: 'female', height: 5, col: 'yellow', dob: '31/01/1999' }
]
const table = new Tabulator('#table', {
data: data,
columns: [
{ title: 'Name', field: 'name', headerFilter:"input" },
{ title: 'Age', field: 'age', headerFilter:"input" },
{ title: 'Gender', field: 'gender', headerFilter:"input" },
{ title: 'Height', field: 'height' },
{ title: 'Color', field: 'col' }
]
})
table.on("tableBuilt", () => {
let inputs = document.querySelectorAll('.tabulator-headers input')
inputs.forEach((input, index) => {
input.setAttribute('aria-label', 'searchInput' + index)
})
})<link href="https://unpkg.com/tabulator-tables@6.2.5/dist/css/tabulator.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.2.5/dist/js/tabulator.min.js"></script>
<div id="table"></div>