ADA Missing form Label with filter

Progress® Telerik® UI for ASP.NET Core Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 01 Feb 2022 13:20 by ADMIN

Release 2022.R1.SP.next

Kris

Created on: 11 May 2021 17:11

Category: DropDownList

Type: Bug Report

ADA Missing form Label with filter - WAVE

Hi Support Team,

When we use filter in the dropdownlist the WAVE is complaining of the missing Label inside the list box (for the search box). Please advise for the fix.

Below is the code, when add the attribute of Filter then WAVE complains about that as shown below screen shot from Telerik Demo site

@(Html.Kendo().DropDownListFor(m => m.OfficerIDTypeID)
.DataValueField(nameof(ReferenceCodeDTO.ID))
.DataTextField(nameof(ReferenceCodeDTO.Label))
.Filter(FilterType.Contains)
.HtmlAttributes(new { style = "width: 100%", tabindex = ++tabIndex })
.ValuePrimitive(true)
.OptionLabel("")
.HtmlAttributes(new { style= "aria-labelledby:OfficerIDTypeID" })
.BindTo(await refCodeLookupHelper.GetCodesByReferenceCodeType("PersonIdentifierTypeKey"))
.Events(e => e.Change("onChangeOfficerTypeId"))
)

3 comments

ADMIN

Tsvetomir

Posted on: 13 May 2021 13:39

Hi Kris,

Thank you for the great addition. Indeed, when the label is not visible, the aria-label attribute has to be added as well.

Best regards,
Tsvetomir
Progress Telerik

Тhe web is about to get a bit better!

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Kris

Posted on: 12 May 2021 19:08

Hi Tsvetomir,

Thank you replying with the suggestion

I have to do this in order make the WAVE error go.

Thank you

Kris R

function onDataBound(e){
              $("input[role='listbox']").attr("aria-label", "ddl_searchbox");

            }

ADMIN

Tsvetomir

Posted on: 12 May 2021 13:30

Hi Kris,

Thank you for sharing the issue that you have encountered. Indeed, this is a miss on our side and I have converted the ticket to an official bug item on our feedback portal.

Until an official fix is available, I can recommend using either of the following options:

1. Set the FilterTitle option, this would resolve the issue, however, it would transform it into a warning.

.FilterTitle("Search")

2. Add a label element and resolve the issue completely.

.Events(ev=>ev.DataBound("onDataBound"))

function onDataBound(e){
              $("input[role='searchbox']").attr("id", "ddl_searchbox");
              $('<label for="ddl_searchbox">Search</label>').insertAfter($("input[role='searchbox']")).hide();
            }

I hope you find this helpful.

Kind regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.