[Solved] Blazor GridEditMode.Popup form & Accessibility

[Mary]

I'm using the built in form in my TelerikGrid with the EditMode="GridEditMode.Popup".  I have not customized it at all.  It works great.  However, the Evinced tool was run against it for accessibility and the field is missing an accessible name.  Is there a way to add something to the gridcolumn to give it that info. in the popup form?  Or do I have to create a custom edit form for my 1 column/field to be edited?

Here's my grid in .NET10.

<TelerikGrid Data="@fictitiousNames"
             Width="800px"
             Class="z-index-1"
             Sortable="true"
             EditMode="GridEditMode.Popup"
             OnUpdate="@UpdateFictitiousName"
             OnCreate="@AddFictitiousName"
             OnEdit="@OnFictitiousNameEdit"
             OnDelete="@DeleteFictitiousName">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add"
                           Icon="@SvgIcon.Plus"
                           Class="k-button-sm"
                           OnClick="@(_ => { FictitiousNameTitle = "New Fictitious Name"; })">Add Fictitious Name</GridCommandButton>
    </GridToolBarTemplate>
    <GridSettings>
        <GridPopupEditSettings Width="400px"
                               Height="400px"
                               Title="@FictitiousNameTitle">
        </GridPopupEditSettings>
        <GridPopupEditFormSettings>
            <ButtonsTemplate>
                @{
                    <GridCommandButton Command="Save" Icon="@SvgIcon.Save" class="k-button-sm k-button-solid-primary">
                        @if (context.IsNew)
                        {
                            <span>Save</span>
                        }
                        else
                        {
                            <span>Update</span>
                        }
                    </GridCommandButton>
                    <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" class="k-button-sm k-button-solid-primary">
                        <span>Cancel</span>
                    </GridCommandButton>
                }
            </ButtonsTemplate>
        </GridPopupEditFormSettings>
    </GridSettings>
    <GridColumns>
        <GridColumn Field="@(nameof(FictitiousNameDto.FictitiousName))" Title="Name" Width="60px" />
        <GridCommandColumn Width="20px">
            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
            <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

[Hristian Stefanov]

Hi Mary,

Pasting the answer from the private ticket here for visibility.

=====

The built-in popup edit mode of the TelerikGrid (EditMode="GridEditMode.Popup") is tested against widely used accessibility evaluation tools such as Axe and WAVE. In these validations, no accessible name errors seem to be reported.

When using the built-in popup form, the accessible name for each input field is automatically generated based on the Title property of the corresponding <GridColumn>. With this configuration, the Grid generates a label for the editor input inside the popup form. Most accessibility tools correctly recognize this label as the accessible name of the associated input element.

The built-in popup form does not provide a direct way to add additional ARIA attributes (such as aria-label) or custom <label> elements for individual fields through the <GridColumn> definition.

If the Title property is set and an accessibility tool still reports a missing accessible name, this may be due to the particular validation specifics enforced by the accessibility checker being used (for example, Evinced).

For full control over the popup edit form, the recommended approach is to use FormTemplate.

=====

Regards,
Hristian Stefanov
Progress Telerik