Accessibly Issues in kendo DropDownList on Angular

195 Views Asked by At

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.

0

There are 0 best solutions below