You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When Multiselect generates html code, form elements may miss something, which cause warnings from web browser.
a quick example is, when open official website with debug mode "https://davidstutz.github.io/bootstrap-multiselect/#configuration-options-onChange", you can see browser 100+ warnings (Snapshot as below):
"A form element should have an id or name attribute" and "No label associated with a form field"
It's better to fix these warnings, thanks a lot.
The text was updated successfully, but these errors were encountered:
In case anyone else ends up here, I was able to resolve these accessibility findings reported from multiple accessibility checkers (Chrome Lighthouse, Axe DevTools, WAVE, etc) using the following:
$('#myMultiSelect').multiselect({
buttonTitle: function (options, select) {
//ensures the title on the button is not redundant with the text displayed to avoid redundant title findings when selecting one item
return 'Select Location(s)'
},
//button template addresses bootstrap 5 incompatibilities with bootstrap-multiselect: https://github.com/davidstutz/bootstrap-multiselect/issues/1230
//option template converts buttons to divs to avoid nested interactive controls findings
templates: {
option: '<div class="multiselect-option dropdown-item"></div>',
button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span><b class="caret"></b></button>',
},
});
$('.multiselect-container div').each(function (index) {
//adapted from response found in Stack Overflow: https://stackoverflow.com/questions/41068832/awesome-bootstrap-checkboxes-for-bootstrap-multiselect#answer-41070906
var id = 'multiselect-' + index,
$input = $(this).find('input');
// Associate the label and the input
$(this).find('label').attr('for', id);
$input.attr('id', id);
//remove redundant titles
$(this).removeAttr('title');
});
When Multiselect generates html code, form elements may miss something, which cause warnings from web browser.
a quick example is, when open official website with debug mode "https://davidstutz.github.io/bootstrap-multiselect/#configuration-options-onChange", you can see browser 100+ warnings (Snapshot as below):
"A form element should have an id or name attribute" and "No label associated with a form field"
It's better to fix these warnings, thanks a lot.
The text was updated successfully, but these errors were encountered: