In the complete example, the Search and Show inputs have labels, but they are not programmatically associated with their inputs via for and id attributes.
Right now the markup is like this:
<label class="label">Search</label>
...
<input class="input" type="text" placeholder="Start typing..." x-model="params.search" @keyup.debounce.350="doSearch()">
In order to associate the <label> with the <input>, for and id attributes need to be applied:
<label for="littleBigTable-search" class="label">Search</label>
...
<input id="littleBigTable-search" class="input" type="text" placeholder="Start typing..." x-model="params.search" @keyup.debounce.350="doSearch()">
Here's a great article on how to create accessible forms and another site with many examples of accessible form markup.
In the complete example, the Search and Show inputs have labels, but they are not programmatically associated with their inputs via
forandidattributes.Right now the markup is like this:
In order to associate the
<label>with the<input>,forandidattributes need to be applied:Here's a great article on how to create accessible forms and another site with many examples of accessible form markup.