Associate a Kendo label to a custom angular component and keep WCAG conformity

[Michael]

Hi,

We need advice on how to add "id" and "for" reference attributes to custom angular components and associated kendo labels.

 

We use custom controls, that implement the ControlValueAccessor interface. We would like to use them with associated kendo-labels.

There is a good documentation here:

https://www.telerik.com/kendo-angular-ui/components/labels/label/association#other-angular-components

However it is not sufficient for our case. We need to keep WCAG conformity (level AA), means, the Html label element and the Html input element should be connected by attributes for and id, e.g.:

<label for="someId">Input here</label>
<input id="someId">

With standard kendo label and kendo input controls, these reference attributes for the inner Html elements are added by some kendo magic.
This however does not work if the kendo input control is wrapped in a component.
The accessability testing tools (e.g. WAVE, AInspector) mark this as an error.

Can someone propose a solution, on how to get the proper attributes onto the Html elements, or does anyone know a good and usable workaround (final ressort would be to set aria-label to the inner input element ...).

I attach a codesandbox  link which extends the kendo documentation mentioned above, and a screenshot with WAVE test result for the code snippet.

Thank you in advance.

https://codesandbox.io/p/sandbox/exciting-water-s8hp6k

 

[Martin Bechev]

Hi Michael,

Thank you for the provided screenshot.

To address your requirement of associating Kendo Label with custom Angular components while maintaining WCAG Level AA conformity, you can manually set the id and for attributes. Here's a detailed approach for your scenario:

Solution

1. Manually Set id and for Attributes: When using custom controls, manually set the id attribute on the input element within your custom component and use the for attribute on the Kendo label to reference this id. This ensures that the label and input elements are properly connected for accessibility.

   Here's an example based on your setup:

   <kendo-label for="firstNameInput" text="Enter first name"></kendo-label>
   <my-input [(ngModel)]="firstName" [id]="'firstNameInput'"></my-input>

2. Custom Component Implementation: Ensure your custom component correctly passes the id to the inner input element. Since your component uses ControlValueAccessor, bind, the id attribute to the input element inside your component template:

       <input
        ...
         [id]="customId"
       />

   In your component class, expose an id input property:

   import { Component, Input } from '@angular/core';
   
   @Component({
     selector: 'custom-input-component',
   })
   export class CustomInputComponent {
     @Input() customId: string;
   }

Here is the updated example from our documentation where the Kendo Label is associated with the custom input:

https://stackblitz.com/edit/angular-amiyxttc?file=src%2Fapp%2Fmy-input.component.ts,src%2Fapp%2Fapp.component.ts

I hope this helps.

Regards,
Martin Bechev
Progress Telerik

[Michael]

Hi Martin, 

thank you for your elaborated reply!!

Unfortunately your proposed solution does not work in our case.  The reason is that our custom control wraps a kendo component (in our case a kendo-combobox), not just a plain Html - Input. 

So the codesandbox sample I provided in the first place was not sufficient and misleading, my apologies!

Here is a new codesandbox example .

The sample contains two more custom controls, one wraps a kendo-textbox, the other one wraps a kendo-combobox.

My aim is to set our customId to the inner Html inputs of the kendo components.

With the kendo-textbox, I try to use the "input" field. This works on my local environment, but for some reason it fails in the codesandbox: 

  ngAfterViewInit(): void {
    if (this.customId() && this.textbox()) {
      this.textbox().input.nativeElement.setAttribute('id', this.customId());
    }
  }

For the kendo-combobox, I try to use the "inputAttributes" input, however this does not work at all: 

  template: ` <kendo-combobox
    #combobox
    [data]="data"
    (valueChange)="onChange($event)"
    [value]="value"
    [inputAttributes]="{ id: customId() }"
    class="k-textbox"
    [style.width.px]="180"
  ></kendo-combobox>`,

Is there a way to get the custom id to the inner Html elements of the kendo components?

Thank you in advance!

Regards

Michael

[Michael]

Or perhaps there is a way to use other kendo functionality. 

There seems to be a functionality, which, for kendo input components, generates and sets an id to the inner inputs, and then sets this id  as "for" attribute to the inner html label tag of the adjacent kendo-label.

(and sets an "aria-labelledby" attribute to the components inner input)

If this somehow would work for custom controls that wrap a kendo input component, that would certainly be the smartest solution.

Regards

Michael

[Martin Bechev]

Hi Michael,

Kendo components that have an <input /> focusable element have internal logic of associating the Kendo Label when the components are direct children of the label, or siblings as show here:

https://www.telerik.com/kendo-angular-ui/components/labels/label/association#kendo-ui-for-angular-components

When a Kendo component is wrapped into a custom Angular component, then we need to set the id to the inner input the same as wrapping a custom HTML component.

The inputAttributes property is created to set additional attributes to the same inner <input />, however, the id is essential for certain component functionalities and cannot be changed through it directly.

To associate a wrapped Kendo TextBox or any other component that can be focused, manually set the id using setAttributes method or Render2:

  ngAfterViewInit(){
    this.textboxRef.input.nativeElement.setAttribute('id',this.customId)
  }

https://stackblitz.com/edit/angular-amiyxttc-tpkgyleh?file=src%2Fapp%2Ftextbox.component.ts,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fmy-input.component.ts

I hope this sheds some light on the case.

[Michael]

Hi Martin, 

thank you for your reply!

So this seems to be a working solution for our problem.

For future readers I would like to add, that kendo-combox components do not expose the inner input, but it could be accessed this way: 

 constructor (private elementRef: ElementRef){}

  ngAfterViewInit(){
    this.elementRef.nativeElement.getElementsByTagName('input')[0].setAttribute('id',this.customId);
  }

Regards

Michael