0

I am facing an accessibility issue (label error) on Kendo DropDownList in angular, while testing using the WAVE tool. I am getting the below alert messages on all the kendo dopdownlist.

Accessibility error on kendo dropdownlist

Message: Orphaned form label. A form label is present, but it is not correctly associated with a form control.

            <kendo-formfield>
            <kendo-floatinglabel text="State" >
              <kendo-dropdownlist 
              [disabled]="true"
              [fillMode]="formUiStyle.dropDownFillMode"
              [data]="ddlStates$ | async"
              formControlName="state"              
              textField="stateName"
              valueField="stateCode"
              [valuePrimitive]="true"
              (valueChange)="onStateChange($event)"
              (blur)="validateHomeAddress()"  placeholder="State"
                >
              </kendo-dropdownlist>
            </kendo-floatinglabel>
            <kendo-formerror *ngIf="homeAddress?.state?.errors?.required">
              State is required
            </kendo-formerror>
          </kendo-formfield>

html code for kendo dropdownlist

Facing this issue only for kendo dropdownlist. All other kendo UI controls are working fine. I just want to know how to resolve the accessibility issue which I am facing on the Kendo DropDownList.

Andy
  • 4,783
  • 2
  • 26
  • 51
Joe
  • 11
  • 2
  • Sorry but there is no question here. Can you please clarify how you would like to be helped? – Andy Jan 25 '23 at 09:25
  • I just want to know how to resolve the accessibility issue which I am facing on the Kendo DropDownList. Thanks – Joe Jan 25 '23 at 16:51
  • What version of the Kendo DropDownList component are you using? – Shai Jan 25 '23 at 18:11
  • [According to this FAQ, an orphaned label is a label not associated with a field](https://accessibleweb.com/question-answer/orphaned-form-label/). But the DOM in the screenshot shows that the generated ` – Andy Jan 26 '23 at 08:36
  • The version I am using is @progress/kendo-angular-dropdowns": "^7.0.3" – Joe Jan 27 '23 at 15:38
  • I have tried kendo-label as well, `id`, `for`, and `aria-labelledby` are the same. but still, I am facing the same issue. – Joe Jan 27 '23 at 16:16

0 Answers0