Skip to content

Commit

Permalink
DataGrid filter accessibility improved
Browse files Browse the repository at this point in the history
  • Loading branch information
@enchev
enchev committed Dec 6, 2023
1 parent 0ad1d57 commit db193bd
Show file tree
Hide file tree
Showing 6 changed files with 23 additions and 19 deletions.
6 changes: 3 additions & 3 deletions Radzen.Blazor/RadzenDataGrid.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@
</div>
</div>

<RadzenDatePicker TValue="@object" AllowInput=@(AllowFilterDateInput) InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "filter value" }})"
<RadzenDatePicker TValue="@object" AllowInput=@(AllowFilterDateInput) InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", column.Title + " filter value " + column.GetFilterValue() }})"
ShowTime="@column.ShowTimeForDateTimeFilter()" ShowTimeOkButton="false" Inline="true" DateFormat="@getFilterDateFormat(column)"
Value="@column.GetFilterValue()" Change="@(args => { column.SetFilterValue(args.Value); SaveSettings(); })" />

Expand All @@ -278,7 +278,7 @@
else
{
<RadzenDataGridFilterMenu Grid="@this" Column="@column" />
<RadzenDatePicker Disabled=@column.CanSetFilterValue() TValue="@object" Style="width:100%" AllowInput=@(AllowFilterDateInput) AllowClear="true" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "filter value" }})"
<RadzenDatePicker Disabled=@column.CanSetFilterValue() TValue="@object" Style="width:100%" AllowInput=@(AllowFilterDateInput) AllowClear="true" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", column.Title + " filter value " + column.GetFilterValue() }})"
ShowTime="false" ShowTimeOkButton="false" DateFormat="@getFilterDateFormat(column)"
Value="@column.GetFilterValue()" Change="@(args => { if(!args.HasValue) { InvokeAsync(() => ClearFilter(column, true)); } else {column.SetFilterValue(args.Value); InvokeAsync(() => ApplyFilter(column, true));} })" />
}
Expand Down Expand Up @@ -310,7 +310,7 @@
{
<RadzenDataGridFilterMenu Grid="@this" Column="@column" />
}
<input aria-label="filter" disabled=@column.CanSetFilterValue() id="@(getFilterInputId(column))" @onchange="@((args) => OnFilter(args, column))" @onkeydown="@((args) => OnFilterKeyPress(args, column))" value="@column.GetFilterValue()" type="text" placeholder="@column.GetFilterPlaceholder()" class="rz-textbox" style="width: 100%;" />
<input aria-label=@(column.Title + " filter value " + column.GetFilterValue()) disabled=@column.CanSetFilterValue() id="@(getFilterInputId(column))" @onchange="@((args) => OnFilter(args, column))" @onkeydown="@((args) => OnFilterKeyPress(args, column))" value="@column.GetFilterValue()" type="text" placeholder="@column.GetFilterPlaceholder()" class="rz-textbox" style="width: 100%;" />
@if (column.GetFilterValue() != null && filters.Any(d => d.Property == column.GetFilterProperty()))
{
<i @onclick="@((args) => ClearFilter(column))" class="rzi rz-cell-filter-clear" style="position:absolute;right:10px;">close</i>
Expand Down
1 change: 1 addition & 0 deletions Radzen.Blazor/RadzenDataGrid.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -694,6 +694,7 @@ internal RenderFragment DrawNumericFilter(RadzenDataGridColumn<TItem> column, bo
builder.AddAttribute(1, "Value", isFirst ? column.GetFilterValue() : column.GetSecondFilterValue());
builder.AddAttribute(2, "ShowUpDown", column.ShowUpDownForNumericFilter());
builder.AddAttribute(3, "Style", "width:100%");
builder.AddAttribute(4, "InputAttributes", new Dictionary<string,object>(){ { "aria-label", column.Title + $"{(!isFirst ? " second " : " ")}filter value " + (isFirst ? column.GetFilterValue() : column.GetSecondFilterValue()) } });

Action<object> action;
if (force)
Expand Down
27 changes: 15 additions & 12 deletions Radzen.Blazor/RadzenDataGridHeaderCell.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,8 @@
{
<form id="@($"{getColumnPopupID()}-form")" @onsubmit="@(args => ApplyFilter())" class="rz-grid-filter">
<span class="rz-grid-filter-label">@Grid.FilterText</span>
<RadzenDropDown @onclick:preventDefault="true" Data="@(Column.GetFilterOperators().Select(t => new { Value = Column.GetFilterOperatorText(t), Key = t }))" TextProperty="Value" ValueProperty="Key" TValue="FilterOperator" Value="@Column.GetFilterOperator()" Change="@(args => Column.SetFilterOperator((FilterOperator)args))" />
<RadzenDropDown InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "second filter operator " + Column.GetFilterOperatorText(Column.GetSecondFilterOperator()) }})"
@onclick:preventDefault="true" Data="@(Column.GetFilterOperators().Select(t => new { Value = Column.GetFilterOperatorText(t), Key = t }))" TextProperty="Value" ValueProperty="Key" TValue="FilterOperator" Value="@Column.GetFilterOperator()" Change="@(args => Column.SetFilterOperator((FilterOperator)args))" />
@if (Column.FilterValueTemplate != null)
{
@Column.FilterValueTemplate(Column)
Expand All @@ -79,38 +80,40 @@
{
<RadzenDropDown AllowClear="false" AllowFiltering="false" TValue="@object"
Value=@Column.GetFilterValue() Multiple="false" Placeholder="@Grid.EnumFilterSelectText" TextProperty="Text" ValueProperty="Value" Data=@EnumExtensions.EnumAsKeyValuePair(Nullable.GetUnderlyingType(Column.FilterPropertyType) ?? Column.FilterPropertyType)
Change="@(args => Column.SetFilterValue(args))" />
Change="@(args => Column.SetFilterValue(args))"
InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", Column.Title + " filter value " + Column.GetFilterValue() }})" />
}
else if (PropertyAccess.IsNumeric(Column.FilterPropertyType))
{
@(Grid.DrawNumericFilter(Column, false))
}
else if (PropertyAccess.IsDate(Column.FilterPropertyType))
{
<RadzenDatePicker InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "filter value" }})" TValue="@object" ShowTime="@Column.ShowTimeForDateTimeFilter()" ShowTimeOkButton="true" DateFormat="@Grid.getFilterDateFormat(Column)"
Value="@Column.GetFilterValue()" Change="@(args => Column.SetFilterValue(args.Value))" AllowInput=@(Grid.AllowFilterDateInput) />
<RadzenDatePicker TValue="@object" ShowTime="@Column.ShowTimeForDateTimeFilter()" ShowTimeOkButton="true" DateFormat="@Grid.getFilterDateFormat(Column)"
Value="@Column.GetFilterValue()" Change="@(args => Column.SetFilterValue(args.Value))" AllowInput=@(Grid.AllowFilterDateInput)
InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", Column.Title + " filter value " + Column.GetFilterValue() }})" />

}
else if (Column.FilterPropertyType == typeof(bool) || Column.FilterPropertyType == typeof(bool?))
{
<RadzenCheckBox TriState="true" TValue="@object" Value="@Column.GetFilterValue()" Change="@(args => { Column.SetFilterValue(null); Column.SetFilterValue(args); Grid.SaveSettings(); InvokeAsync(() => Grid.Reload()); })" />
<RadzenCheckBox InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", Column.Title + " filter value " + Column.GetFilterValue() }})" TriState="true" TValue="@object" Value="@Column.GetFilterValue()" Change="@(args => { Column.SetFilterValue(null); Column.SetFilterValue(args); Grid.SaveSettings(); InvokeAsync(() => Grid.Reload()); })" />
}
else
{
<RadzenTextBox id="@($"{getColumnPopupID()}-sf")" aria-label="filter" Value="@($"{Column.GetFilterValue()}")" Change="@(args => Column.SetFilterValue(args))" />
<RadzenTextBox id="@($"{getColumnPopupID()}-sf")" aria-label=@(Column.Title + " filter value " + Column.GetFilterValue()) Value="@($"{Column.GetFilterValue()}")" Change="@(args => Column.SetFilterValue(args))" />
}

<RadzenDropDown @onclick:preventDefault="true" TextProperty="Text" ValueProperty="Value" Style="width: 90px"
<RadzenDropDown @onclick:preventDefault="true" TextProperty="Text" ValueProperty="Value" Style="width: 90px" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", Column.Title + " logical operator " + (Column.LogicalFilterOperator == LogicalFilterOperator.And ? Grid.AndOperatorText : Grid.OrOperatorText) }})"
Data="@(Enum.GetValues(typeof(LogicalFilterOperator)).Cast<LogicalFilterOperator>().Select(t => new { Text = t == LogicalFilterOperator.And ? Grid.AndOperatorText : Grid.OrOperatorText, Value = t }))" TValue="LogicalFilterOperator" Value="@Column.LogicalFilterOperator" Change="@(args => Column.SetLogicalFilterOperator((LogicalFilterOperator)args))" />

<RadzenDropDown @onclick:preventDefault="true" Data="@(Column.GetFilterOperators().Select(t => new { Value = Column.GetFilterOperatorText(t), Key = t }))" TextProperty="Value" ValueProperty="Key" TValue="FilterOperator" Value="@Column.GetSecondFilterOperator()" Change="@(args => Column.SetSecondFilterOperator((FilterOperator)args))" />
<RadzenDropDown InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "second filter operator " + Column.GetFilterOperatorText(Column.GetSecondFilterOperator()) }})" @onclick:preventDefault="true" Data="@(Column.GetFilterOperators().Select(t => new { Value = Column.GetFilterOperatorText(t), Key = t }))" TextProperty="Value" ValueProperty="Key" TValue="FilterOperator" Value="@Column.GetSecondFilterOperator()" Change="@(args => Column.SetSecondFilterOperator((FilterOperator)args))" />
@if (Column.SecondFilterValueTemplate != null)
{
@Column.SecondFilterValueTemplate(Column)
}
else if (PropertyAccess.IsNullableEnum(Column.FilterPropertyType) || PropertyAccess.IsEnum(Column.FilterPropertyType))
{
<RadzenDropDown AllowClear="false" AllowFiltering="false" TValue="@object"
<RadzenDropDown AllowClear="false" AllowFiltering="false" TValue="@object" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", Column.Title + " second filter value" }})"
Value=@Column.GetSecondFilterValue() Multiple="false" Placeholder="@Grid.EnumFilterSelectText" TextProperty="Text" ValueProperty="Value" Data=@EnumExtensions.EnumAsKeyValuePair(Nullable.GetUnderlyingType(Column.FilterPropertyType) ?? Column.FilterPropertyType)
Change="@(args => Column.SetFilterValue(args,false))" />
}
Expand All @@ -120,18 +123,18 @@
}
else if (PropertyAccess.IsDate(Column.FilterPropertyType))
{
<RadzenDatePicker TValue="@object" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "second filter value" }})"
<RadzenDatePicker TValue="@object" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", Column.Title + " second filter value " + Column.GetSecondFilterValue() }})"
ShowTime="@Column.ShowTimeForDateTimeFilter()" ShowTimeOkButton="true" DateFormat="@Grid.getFilterDateFormat(Column)"
Value="@Column.GetSecondFilterValue()" Change="@(args => Column.SetFilterValue(args.Value, false))" AllowInput=@(Grid.AllowFilterDateInput) />

}
else if (Column.FilterPropertyType == typeof(bool) || Column.FilterPropertyType == typeof(bool?))
{
<RadzenCheckBox TriState="true" TValue="@object" Value="@Column.GetSecondFilterValue()" Change="@(args => { Column.SetFilterValue(args, false); Grid.SaveSettings(); })" />
<RadzenCheckBox InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", Column.Title + " second filter value " + Column.GetSecondFilterValue() }})" TriState="true" TValue="@object" Value="@Column.GetSecondFilterValue()" Change="@(args => { Column.SetFilterValue(args, false); Grid.SaveSettings(); })" />
}
else
{
<RadzenTextBox id="@($"{getColumnPopupID()}-sf2")" aria-label="filter" Value="@($"{Column.GetSecondFilterValue()}")" Change="@(args => Column.SetFilterValue(args, false))" />
<RadzenTextBox id="@($"{getColumnPopupID()}-sf2")" aria-label=@(Column.Title + " second filter value " + Column.GetSecondFilterValue()) Value="@($"{Column.GetSecondFilterValue()}")" Change="@(args => Column.SetFilterValue(args, false))" />
}
</form>
}
Expand Down
2 changes: 1 addition & 1 deletion RadzenBlazorDemos/Pages/DataFilterLoadData.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<MyCustomEnumerableDataFilterProperty TItem="Order" Property="Employee.Title" Title="Employee Title" FilterValue="@finalSelectedTitles"
Type="typeof(IEnumerable<string>)" FilterOperator="FilterOperator.Contains">
<FilterTemplate>
<RadzenDropDown @bind-Value=@selectedTitles Style="width:100%;"
<RadzenDropDown @bind-Value=@selectedTitles Style="width:100%;" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "select title" }})"
Change=@OnSelectedTitlesChange Data="@(titles)" AllowClear="true" Multiple="true" />
</FilterTemplate>
</MyCustomEnumerableDataFilterProperty>
Expand Down
2 changes: 1 addition & 1 deletion RadzenBlazorDemos/Pages/DataGridLoadData.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<RadzenDataGridColumn TItem="Employee" Property="Title" Title="Job Title"
Type="typeof(IEnumerable<string>)" FilterValue="@selectedTitles" FilterOperator="FilterOperator.Contains" Width="200px">
<FilterTemplate>
<RadzenDropDown @bind-Value=@selectedTitles Style="width:100%"
<RadzenDropDown @bind-Value=@selectedTitles Style="width:100%" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "select title" }})"
Change=@OnSelectedTitlesChange Data="@(titles)" AllowClear="true" Multiple="true" />
</FilterTemplate>
</RadzenDataGridColumn>
Expand Down
4 changes: 2 additions & 2 deletions RadzenBlazorDemos/Pages/DataGridOData.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@
<RadzenDataGridColumn TItem="Employee" Property="Title" Title="Title"
Type="typeof(IEnumerable<string>)" FilterValue="@selectedTitles" FilterOperator="FilterOperator.Contains">
<FilterTemplate>
<RadzenDropDown @bind-Value=@selectedTitles Style="width:100%"
<RadzenDropDown @bind-Value=@selectedTitles Style="width:100%" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "select title" }})"
Change=@OnSelectedTitlesChange Data="@(titles)" AllowClear="true" Multiple="true" />
</FilterTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Employee" Title="Customers" Property="Orders" FilterProperty="Customer/CustomerID" Sortable=false
Type="typeof(IEnumerable<Customer>)" FilterValue="@selectedCustomers" FilterOperator="FilterOperator.In">
<FilterTemplate>
<RadzenDropDown @bind-Value=@selectedCustomers Style="width:100%" TextProperty="CompanyName" ValueProperty="CustomerID"
<RadzenDropDown @bind-Value=@selectedCustomers Style="width:100%" TextProperty="CompanyName" ValueProperty="CustomerID" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "select company" }})"
Change=@OnSelectedCustomersChange Data="@(customers)" AllowSelectAll="false" Multiple="true" MaxSelectedLabels="2" />
</FilterTemplate>
<Template>
Expand Down

0 comments on commit db193bd

Please sign in to comment.