Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web browser warnings of "A form element should have an id or name attribute" #1276

Open
Jonathanliu92251 opened this issue Nov 26, 2023 · 1 comment

Comments

@Jonathanliu92251
Copy link

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.

form-id-label-warning
@jeran-urban
Copy link

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');
    });

Hope that helps and good luck!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants