Skip to content

[DataGrid] Fix issue #5026 (from Aspire) #5028

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Vincent Baaij (vnbaaij) merged 6 commits into from
Jul 21, 2026
Merged

[DataGrid] Fix issue #5026 (from Aspire) #5028

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b141614
- Extend a11y support for typical example by supplying HeaderTooltip …
vnbaaij Jul 20, 2026
a8bef16
Update verified files
vnbaaij Jul 20, 2026
aba3854
Tweak new behavior, add back aria-sort="none"
vnbaaij Jul 20, 2026
200be16
Process comment
vnbaaij Jul 20, 2026
bfc000d
Fix veriefied files
vnbaaij Jul 21, 2026
51e8e5e
Merge branch 'dev' into users/vnbaaij/dev/fix-issue-#5026
vnbaaij Jul 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,20 @@
RowStyle="@rowStyle"
HeaderCellAsButtonWithMenu="true"
ColumnResizeLabels="@resizeLabels">
<TemplateColumn Tooltip="true" TooltipText="@(c => "Flag of " + c.Name)" Title="Rank" SortBy="@rankSort" Align="Align.Center" InitialSortDirection="SortDirection.Ascending" IsDefaultSortColumn=true>
<TemplateColumn Tooltip="true" TooltipText="@(c => "Flag of " + c.Name)" HeaderTooltip="Column options for rank" Title="Rank" SortBy="@rankSort" Align="Align.Center" InitialSortDirection="SortDirection.Ascending" IsDefaultSortColumn=true>
<img class="flag" src="_content/FluentUI.Demo.Shared/flags/@(context.Code).svg" alt="Flag of @(context.Code)" />
</TemplateColumn>
<PropertyColumn Property="@(c => c.Name)" Sortable="true" Filtered="!string.IsNullOrWhiteSpace(nameFilter)" Tooltip="true" Title="Name of the country">
<PropertyColumn Property="@(c => c.Name)" Sortable="true" Filtered="!string.IsNullOrWhiteSpace(nameFilter)" Tooltip="true" HeaderTooltip="Column options for country" Title="Name of the country">
<ColumnOptions>
<div class="search-box">
<FluentSearch Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" @onkeydown="HandleCloseFilterAsync" @bind-Value:after="HandleClear" Placeholder="Country name..." Style="width: 100%;" Label="Filter" />
</div>
</ColumnOptions>
</PropertyColumn>
<PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" Align="Align.Start" Tooltip="true" TooltipText="@(c => "That is " + c.Medals.Gold + " x GOLD!!")" />
<PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" Align="Align.Center" Tooltip="true" />
<PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="false" Align="Align.End" />
<PropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" Filtered="@(minMedals != 0 || maxMedals != 130)" Align="Align.End" Tooltip="true">
<PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" Align="Align.Start" Tooltip="true" TooltipText="@(c => "That is " + c.Medals.Gold + " x GOLD!!")" HeaderTooltip="Column options for gold" />
<PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" Align="Align.Center" Tooltip="true" HeaderTooltip="Column options for silver" />
<PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="false" Align="Align.End" HeaderTooltip="Adjust column width for bronze" />
<PropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" Filtered="@(minMedals != 0 || maxMedals != 130)" Align="Align.End" Tooltip="true" HeaderTooltip="Column options for total">
<ColumnOptions>
<div style="width: 100%; height: 150px;">
<FluentSlider Label="@($"Min ({minMedals})")" Min="0" Max="150" Step="1" Orientation="Orientation.Horizontal" @bind-Value=minMedals Immediate="true" Style="width: 100%;">
Expand Down
2 changes: 1 addition & 1 deletion src/Core/Components/DataGrid/Columns/ColumnBase.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@

@if (AnyColumnActionEnabled)
{
<FluentButton Disabled="@(!AnyColumnActionEnabled)" Id="@_columnId" Appearance="Appearance.Stealth" Class="col-sort-button" Style="width: calc(100% - 10px);" @onclick="@HandleColumnHeaderClickedAsync" aria-label="@tooltip" title="@tooltip">
<FluentButton Disabled="@(!AnyColumnActionEnabled)" Id="@_columnId" Appearance="Appearance.Stealth" Class="col-sort-button" Style="width: calc(100% - 10px);" @onclick="@HandleColumnHeaderClickedAsync" aria-label="@(HeaderTooltip ?? tooltip)" Title="@Title" aria-haspopup="menu">
Comment thread
vnbaaij marked this conversation as resolved.
Outdated
<div class="col-title-text" title="@tooltip">
@HeaderTitleContent
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/Core/Components/DataGrid/FluentDataGrid.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1019,10 +1019,10 @@ private async ValueTask<GridItemsProviderResult<TGridItem>> ResolveItemsRequestA
return GridItemsProviderResult.From(Array.Empty<TGridItem>(), 0);
}

private string AriaSortValue(ColumnBase<TGridItem> column)
private string? AriaSortValue(ColumnBase<TGridItem> column)
=> _sortByColumn == column
? (_sortByAscending ? "ascending" : "descending")
: "none";
: null;
Comment thread
vnbaaij marked this conversation as resolved.
Outdated

private string? StyleValue => new StyleBuilder(Style)
.AddStyle("grid-template-columns", _internalGridTemplateColumns, !string.IsNullOrWhiteSpace(_internalGridTemplateColumns) && DisplayMode == DataGridDisplayMode.Grid)
Expand Down
4 changes: 4 additions & 0 deletions src/Core/Components/Menu/FluentMenu.razor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ export async function initialize(anchorId, menuId, menuOpen, anchoredRegionModul
// Dispose existing listeners if any
dispose(anchorId);

if (anchorId && menuId) {
document.getElementById(anchorId)?.setAttribute("aria-expanded", menuOpen);
}

if (!menuId || !menuOpen) {
return;
}
Expand Down
Loading