Progress® Kendo® UI for Vue Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 20 Jun 2023 13:50 by ADMIN
Amy
Created on: 12 Jun 2023 19:34
Category: Kendo UI® for Vue
Type: Bug Report
0
vue input aria-labelled-by

When providing the input prop ariaLabelledBy, the resulting rendered element has an attribute of arialabelledby instead of aria-labelledby.

That is, this code:

<span id="my-input-label">My Input Label</span>
<Input aria-labelled-by="my-input-label" />

results in this HTML:

<span data-v-0b8cedaa="" id="my-input-label">My Input Label</span>
<span data-v-0b8cedaa="" class="k-textbox k-input k-input-md k-input-solid k-rounded-md k-required">
  <input id="58c2f77d-91e5-444a-a948-90f4abb960e5" required="" arialabelledby="subject-label" class="k-input-inner">
</span>

But the input's HTML should instead look like:

<input id="58c2f77d-91e5-444a-a948-90f4abb960e5" required="" aria-labelledby="subject-label" class="k-input-inner">

3 comments
ADMIN
Petar
Posted on: 20 Jun 2023 13:50

Hello, Amy.

You are welcome! I am happy to hear that you managed to implement the desired functionality with the Kendo UI for Vue Native Input.

Based on your last reply, I would assume that the current thread can be closed. I will now close it but if you need additional assistance, please reopen the ticket and we will be happy to help you furhter. 

Regards,
Petar
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
Amy
Posted on: 20 Jun 2023 13:31

Thank you for the help! Yes, using aria-labelledby worked.

ADMIN
Petar
Posted on: 15 Jun 2023 14:40

Hello, Amy.

Thank you for the shared details about the experienced issue.

Generally speaking, the Input uses the input's built-in aria-labelledby attribute that depends on the way we define the attribute. May I ask you to define the Input component using a declaration like the one that follows and let me know if using the shared approach the reported behavior is resolved?

<div class="col-xs-12 col-md-6 example-col">
  <p>Input</p>
  <span id="customID">This is the label</span>
  <KInput
    :aria-labelledby="'customID'"
    :style="{ width: '230px' }"
  ></KInput>
</div>

Based on your feedback, probably we should consider editing the API documentation in a way that is more descriptive, and also we should revise the casing of the properties. 

Please let me know if you have additional questions related to the current ticket.

Regards,
Petar
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
Create an account Log In
View
Type
Status
Category