Unplanned
Last Updated: 10 Dec 2021 09:36 by ADMIN
Michal
Created on: 04 Nov 2021 18:47
Category: MultiSelect
Type: Feature Request
1
aria-label in MultiSelect for NVDA

is it possible to add aria-label to kendo-multiselect? ( and it should be multiselect responsibility to propagate it to internal input )

 

3 comments
ADMIN
Preslava
Posted on: 10 Dec 2021 09:36

Hi Michal,

After further investigation of the case, I can suggest a more generic approach, which will work when the component is redrawn.

A directive can be added to the kendo-multiselect, which will set the aria-label attribute to the inner input element every time the component is created.

The suggested approach will work both when the data bound to the kendo-multiselect component changes and when the component is redrawn.

Here are examples demonstrating both cases:

https://stackblitz.com/edit/angular-jrxdk6-rdnbsa?file=app%2Fapp.component.ts

https://stackblitz.com/edit/angular-jrxdk6-d1qa7p?file=app%2Fapp.component.ts

Let me know should there be further questions.

Regards,
Preslava
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Michal
Posted on: 03 Dec 2021 13:44

hi, 

 

this workaround is not working in some cases, i.e. input is redrawn ( with predefined properties ) on every change of data bound to kendo-multiselect effectively removing added aria-label.

ADMIN
Preslava
Posted on: 11 Nov 2021 07:41

Hi Michal,

Thank you for submitting this feature request. We track the customer demand for such enhancements and consider adding it to our roadmap based on the estimated interest and business value.

In the meantime, I can suggest the following workaround:

constructor(private renderer: Renderer2) {}

public ngAfterViewInit(): void {
    let input = document.querySelector('k-multiselect .k-input');
    this.renderer.setAttribute(input, 'aria-label', 'custom-label');
}

Here is an example demonstrating this approach:

https://stackblitz.com/edit/angular-jrxdk6?file=app/app.component.ts 

I hope this helps.

Regards,
Preslava
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.