WAVE Error on Kendo Dropdownlist Filter Input

[Lee]

I'm getting a WAVE Error on the Kendo Dropdownlist Filter input. Is there any way to correct this?

The error says: 

Missing form label

A form control does not have a corresponding label.

This is the code being flagged:

<div class="k-list-filter"><span class="k-searchbox k-input k-input-md k-rounded-md k-input-solid" type="text" autocomplete="off"><span class="k-icon k-font-icon k-i-search k-input-icon"></span>

<input class="k-input-inner" type="text" placeholder="Filter" role="searchbox" aria-haspopup="listbox" aria-autocomplete="list" tabindex="0" aria-disabled="false" aria-readonly="false" aria-controls="ddLanguageMenu_listbox">

</span></div>

[Lee]

I ended up fixing it with this code but there should probably be a permanent fix put in by Telerik. 

// Code provided by Telerik Kendo UI team. Delete when 2025 Q3 is released.
// https://www.telerik.com/account/support-center/view-ticket/1691395
kendo.ui.List.fn._filterHeader = function() {
    this.filterTemplate = '<div class="k-list-filter">' +
        '<span class="k-searchbox k-input k-input-md k-rounded-md k-input-solid" type="text" autocomplete="off">' +
        kendo.ui.icon({ icon: "search", iconClass: "k-input-icon" }) +
        "</span>" +
        "</div>";

    this.actionSheetFilterTemplate = `<div class="k-actionsheet-titlebar-group k-actionsheet-filter">${this.filterTemplate}</div>`;

    if (this._isFilterEnabled()) {
        this.filterInput = $('<input class="k-input-inner" type="text" />')
            .attr({
                placeholder: this.element.attr("placeholder") || "",
                title: this.options.filterTitle || translateText("Search", "Global"),
                role: "searchbox",
                "aria-label": this.options.filterTitle || translateText("Search", "Global"),
                "aria-haspopup": "listbox",
                "aria-autocomplete": "list"
            });
    }
};

[Neli]

Hi Lee, 

Thank you very uch for your patience.

You can add a label element with the respective 'name'.

<label for="products">Products:</label>
<input name="products" id="dropdownlist" />

This is demonstrated in the Dojo linked here - https://dojo.telerik.com/FIJRbZUP.

Please try the same approach on your side.

Regards,

Neli 

[Lee]

This does not solve the issue or answer the question asked. Please reread and try again. 

[Neli]

Hi Lee,

As far as I see from your initial reply, the issue is that an error for missing form label appears when a DropDownList with filtering enabled is rendered on the page. After adding a label element for the DropDownList, no errors regarding the form label were reported on my side in WAVE. 

Could you please let me know if I am missing something? 

Looking forward to your reply.

Regards,

Neli

 

[Neli]

Hello Lee,

Thank you for the report. I will need some time to discuss the issue with a developer from the team, and I will let you know shortly.

Thank you very much for your patience.

Regards,
Neli
Progress Telerik