Mejora de accesibilidad en Blazor con .NET 5

Una mejora bastante interesante en términos de accesibilidad fue incluida en Blazor con .NET.

Blazor tiene la posibilidad de crear formularios y realizar validaciones fácilmente utilizando ya sea los atributos de validación o creando una condición personalizada en C#.

En el siguiente ejemplo podemos observar un componente con un formulario donde existe una regla para el campo del formulario name por un máximo de 10 caracteres:

@page "/"
@using System.ComponentModel.DataAnnotations
   
<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
     <DataAnnotationsValidator />
    <ValidationSummary />
    <InputText id="name" @bind-Value="exampleModel.Name" ></InputText>
     <button type="submit">Submit</button>
</EditForm>

@code
{
    private ExampleModel exampleModel = new ExampleModel();

    private void HandleValidSubmit()
    {

    }

    public class ExampleModel
    {
        [Required]
        [StringLength(10, ErrorMessage = "Name is too long.")]
        public string Name { get; set; }
    }
}

La mejora consiste en que cuando falle la validación y no se cumpla entonces automáticamente no solo muestra un error sino que también agrega el atributo aria-invalid indicando que este campo tiene un valor inválido