Panel control accessibility

Radzen.Blazor Components
1

Im using a panel control that allows collapse. When I run HTML Codespiffer it reports an accessibility issue on the collapse button.

This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined.

Ive set the CollapseTitle giving it a descriotion but this doesnt resolver the issue.
How can this be resolved? How can I set the properties require to meet the standard?

2

Found out how to fix this.
CollapseAriaLabel and ExpandAriaLabel properties.

Now I have to find out how to applie this to data grid.

3

Hi @BrianG,

We are not familiar with this tool and are not sure whether it works as expected. Our team has used WAVE to validate our components (including the Panel).

Here is what that element outputs:

<a class="rz-panel-titlebar-icon rz-panel-titlebar-toggler" role="button" aria-controls="rz-panel-0-content" aria-expanded="true" title="Collapse" tabindex="0">

As you see it has its title attribute set which all screen readers would recognize (I am attaching a screenshot).

image
image1646×738 114 KB

The title attribute can be set via the ExpandTitle and CollapseTitle properties. You can also set the aria-label attribute of that element via the ExpandAriaLabel and CollapseAriaLabel properties.

Here is the relevant source code: radzen-blazor/Radzen.Blazor/RadzenPanel.razor at master · radzenhq/radzen-blazor · GitHub

4

The data grid shouldn't have such issues however if you nest content in it (e.g. by using inline editing) you can set title or aria-label like this:

<RadzenTextBox title="My title" ... >

<RadzenNumeric @bind-Value=@value InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "enter value" }})" />
5

Im not using inline editing but I am running into issues. All the filtering controls throw accessibility violations. the grid below throws 14 violations all of which seem centered around the filter controls.

<RadzenDataGrid Count="@count" @ref="grid" IsLoading=@isLoading AllowSorting="true" AllowPaging="true" AllowColumnResize="true" PageNumbersCount="8" PageSize="100" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                FilterMode=FilterMode.Advanced LoadData="@LoadData" Data="@ISM747FormList" TItem="vISM747wStatusRecDateasDate"
                SelectionMode="DataGridSelectionMode.Single" RowSelect="grid_dummyselect" PageSizeOptions="@pageSizeOptions" ShowPagingSummary="@showPagerSummary" PagingSummaryFormat="@pagingSummaryFormat">

    <Columns>
        <RadzenDataGridColumn TItem="vISM747wStatusRecDateasDate" Property="RDate" Title="Record Date" FormatString="{0:d}" Width="100px" />
        
        <RadzenDataGridColumn TItem="vISM747wStatusRecDateasDate" Context="data" Property="SARDisplayNumber" Title="SAR Number" Width="100px">
            
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="vISM747wStatusRecDateasDate" Context="data" Property="SubmittedName" Title="Submitter" Width="300px">                  
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="vISM747wStatusRecDateasDate" Context="data" Property="ISMStatus" Title="Status" Width="200px">                  
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Width="50px" TItem="vISM747wStatusRecDateasDate" Context="data" Property="Id" Title="Edit" Sortable="false" Filterable="false">
            <Template>
                <RadzenButton Icon="edit" Size="ButtonSize.Small" Click="@(e => EditISM(@data.ISMNumber))">
                </RadzenButton>

            </Template>
        </RadzenDataGridColumn>

    </Columns>
</RadzenDataGrid>
6

Looks like the tool you are using will attempt to validate the rendered HTML unlike WAVE which validates what’s available on the screen. Anyhow we will address these issues in our next update next week.

7

btw: If you set FilterPopupRenderMode="PopupRenderMode.OnDemand" you will not get such errors.

8

As we promised, we've published update of Radzen.Blazor with various accessibility improvements across all components including the DataGrid filtering popup. Keep in mind that the tool you are using has various issues that will report valid and accessible HTML, like this one: