Add aria-invalid and title attributes to Components like NumericTextBox, Select, etc.

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Duplicated

Last Updated: 15 Mar 2022 11:02 by ADMIN

Mike

Created on: 01 Mar 2022 15:31

Category: UI for Blazor

Type: Feature Request

Add aria-invalid and title attributes to Components like NumericTextBox, Select, etc.

This request is to add the aria-invalid attribute to your components so that we can manually flag a field for screen reader accessibility if there is a validation issue. I perform some validation rules manually without using an edit form, and would like to be able to add that attribute to the controls when there is an issue. Numeric Text Box is one of your controls in particular that I need this for.

Additionally, adding a title attribute to these controls would be helpful to allow providing tooltips on the control.

I would also like to point out that allowing attribute splatting in your controls would solve both of these requests and any future attributes that may come up that developers may need to add.

Duplicated

This item is a duplicate of an already existing item. You can find the original item here:

Add title parameter for input-based components

3 comments

ADMIN

Joana

Posted on: 15 Mar 2022 11:02

Hi Mike,

The Blazor framework comes with the EditContext and guidelines for the validation. So, in the context of a blazor app I would recommend exploring the option to attach custom validation to the EditContext.

https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-6.0

https://blazor-university.com/forms/writing-custom-validation/

An alternative to simulate the validation to the Telerik Components is to pass a cascading parameter of EditContext and manually update the Validation store. However, in my opinion such decision will introduce a bad code style in your application and I believe that the custom validation is the best architecture for a Blazor application.

On a side note, even if we supported attributes splatting, the value would be overriden by the built-in validation values.

Regards,
Joana
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.

Mike

Posted on: 08 Mar 2022 12:06

Hi Joana,

I am not using an EditForm in my application, since I'm using more robust validation than the Data Annotation model. So I don't have an EditContext to pass the validation state into. This is why I am requesting for aria-invalid to be added as an attribute. If there is a manual way for me to set the validation state on the control without an Edit Form, let me know and I will use that.

Thanks,

Mike

ADMIN

Joana

Posted on: 08 Mar 2022 07:04

Hi Mike,

AriaInvalid attribute is automatically added to the components based on the state of the field in the `EditContext`. So, if you inspect the following demo you will see the aria-invalid attribute toggled based on the validation state:

https://demos.telerik.com/blazor-ui/numerictextbox/validation

The best approach to provide a built-in accessible validation stateis through the EditContext.

In regards to the title attribute of the input-based components, it is a valid feature request and I have opened it on your behalf:

https://feedback.telerik.com/blazor/1556646

I am linking this FR as duplicate of the request for the title attribute.

Regards,
Joana
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.