From b141614be820de1a1b28791139a45e06548e5232 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Mon, 20 Jul 2026 18:04:05 +0200 Subject: [PATCH 1/5] - Extend a11y support for typical example by supplying HeaderTooltip valies - Add HeaerTooltip, aria-haspopup="menu and title to button in column header - Return null for aria-sort if not sorted - Set menu aria-expanded in script so it can cleanly be set when dismissed by overlay click --- .../Pages/DataGrid/Examples/DataGridTypical.razor | 12 ++++++------ .../Components/DataGrid/Columns/ColumnBase.razor | 2 +- src/Core/Components/DataGrid/FluentDataGrid.razor.cs | 4 ++-- src/Core/Components/Menu/FluentMenu.razor.js | 4 ++++ 4 files changed, 13 insertions(+), 9 deletions(-) diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor index d8a36d4862..d718b990c8 100644 --- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor +++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor @@ -15,20 +15,20 @@ RowStyle="@rowStyle" HeaderCellAsButtonWithMenu="true" ColumnResizeLabels="@resizeLabels"> - + Flag of @(context.Code) - +
- - - - + + + +
diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor index 941f8d7c77..67f9f9863b 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor +++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor @@ -33,7 +33,7 @@ @if (AnyColumnActionEnabled) { - +
@HeaderTitleContent
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs index ce7aca0c38..9d8295aada 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs @@ -1019,10 +1019,10 @@ private async ValueTask> ResolveItemsRequestA return GridItemsProviderResult.From(Array.Empty(), 0); } - private string AriaSortValue(ColumnBase column) + private string? AriaSortValue(ColumnBase column) => _sortByColumn == column ? (_sortByAscending ? "ascending" : "descending") - : "none"; + : null; private string? StyleValue => new StyleBuilder(Style) .AddStyle("grid-template-columns", _internalGridTemplateColumns, !string.IsNullOrWhiteSpace(_internalGridTemplateColumns) && DisplayMode == DataGridDisplayMode.Grid) diff --git a/src/Core/Components/Menu/FluentMenu.razor.js b/src/Core/Components/Menu/FluentMenu.razor.js index e8401145ed..f603523151 100644 --- a/src/Core/Components/Menu/FluentMenu.razor.js +++ b/src/Core/Components/Menu/FluentMenu.razor.js @@ -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; } From a8bef1628cd4358752762d5f4d95103e334a9736 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Mon, 20 Jul 2026 21:08:40 +0200 Subject: [PATCH 2/5] Update verified files --- ...ortByTests_SortByColumnIndex_Ascending.verified.razor.html | 2 +- ...rtByTests_SortByColumnIndex_Descending.verified.razor.html | 2 +- ...ortByTests_SortByColumnTitle_Ascending.verified.razor.html | 2 +- ...rtByTests_SortByColumnTitle_Descending.verified.razor.html | 2 +- ...elect_MultiSelect_Customized_Rendering.verified.razor.html | 4 ++-- ...Grid_ColumSelect_MultiSelect_Rendering.verified.razor.html | 4 ++-- ...rid_ColumSelect_SingleSelect_Rendering.verified.razor.html | 4 ++-- ...lumSelect_SingleStickySelect_Rendering.verified.razor.html | 4 ++-- ...ntDataGridTests.FluentDataGrid_Default.verified.razor.html | 2 +- 9 files changed, 13 insertions(+), 13 deletions(-) diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html index 349c6594c0..6c3c1691a6 100644 --- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html +++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html @@ -14,7 +14,7 @@
- +
Item2
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html index 744d726603..25640779f5 100644 --- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html +++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html @@ -14,7 +14,7 @@
- +
Item2
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html index 349c6594c0..6c3c1691a6 100644 --- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html +++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html @@ -14,7 +14,7 @@
- +
Item2
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html index 744d726603..25640779f5 100644 --- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html +++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html @@ -14,7 +14,7 @@
- +
Item2
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html index 9e250695cb..cdf0bbcc81 100644 --- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html +++ b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html @@ -2,10 +2,10 @@ - -
+
➖
 +
Name
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html index 5c26a036d5..edc07ec173 100644 --- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html +++ b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html @@ -2,14 +2,14 @@ - -
+ +
Name
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html index 65d99ac97f..a094ccd60a 100644 --- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html +++ b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html @@ -2,8 +2,8 @@ - - +
+
Name
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering.verified.razor.html index 65d99ac97f..a094ccd60a 100644 --- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering.verified.razor.html +++ b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering.verified.razor.html @@ -2,8 +2,8 @@ - - +
+
Name
diff --git a/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html b/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html index 8bf35d5b18..c76addeb41 100644 --- a/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html +++ b/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html @@ -2,7 +2,7 @@ - - - - -
+
Name
From aba385414eec589773a7ee555423c0d82369307d Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Mon, 20 Jul 2026 21:23:47 +0200 Subject: [PATCH 3/5] Tweak new behavior, add back aria-sort="none" --- .../DataGrid/Columns/ColumnBase.razor | 37 ++++++++++++++----- .../DataGrid/FluentDataGrid.razor.cs | 2 +- 2 files changed, 28 insertions(+), 11 deletions(-) diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor index 67f9f9863b..6bce4b5317 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor +++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor @@ -25,18 +25,35 @@ { @HeaderCellItemTemplate(this) } - else if (Grid.HeaderCellAsButtonWithMenu) - { - string? tooltip = Tooltip ? (HeaderTooltip ?? Title) : null; - - + else if (Grid.HeaderCellAsButtonWithMenu) + { + string? tooltip = Tooltip ? (HeaderTooltip ?? Title) : null; - @if (AnyColumnActionEnabled) + // Ensure the accessible name (aria-label) is anchored to the visible Title + // and optionally append HeaderTooltip when it differs. Use HeaderTooltip + // as the mouse tooltip (Title attribute) when provided. + string? ariaLabel = null; + if (!string.IsNullOrEmpty(Title)) { - -
- @HeaderTitleContent -
+ ariaLabel = Title; + if (!string.IsNullOrEmpty(HeaderTooltip) && HeaderTooltip != Title) + { + ariaLabel = $"{HeaderTooltip} - {ariaLabel}"; + } + } + else + { + ariaLabel = HeaderTooltip ?? tooltip; + } + + + + @if (AnyColumnActionEnabled) + { + +
+ @HeaderTitleContent +
@if (Grid.SortByAscending.HasValue && IsActiveSortColumn) { diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs index 9d8295aada..ad913841d5 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs @@ -1022,7 +1022,7 @@ private async ValueTask> ResolveItemsRequestA private string? AriaSortValue(ColumnBase column) => _sortByColumn == column ? (_sortByAscending ? "ascending" : "descending") - : null; + : "none"; private string? StyleValue => new StyleBuilder(Style) .AddStyle("grid-template-columns", _internalGridTemplateColumns, !string.IsNullOrWhiteSpace(_internalGridTemplateColumns) && DisplayMode == DataGridDisplayMode.Grid) From 200be16c09dbac12a7795870fec951ec222a24ae Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Mon, 20 Jul 2026 21:59:27 +0200 Subject: [PATCH 4/5] Process comment --- src/Core/Components/DataGrid/Columns/ColumnBase.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor index 6bce4b5317..4424a966dd 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor +++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor @@ -30,7 +30,7 @@ string? tooltip = Tooltip ? (HeaderTooltip ?? Title) : null; // Ensure the accessible name (aria-label) is anchored to the visible Title - // and optionally append HeaderTooltip when it differs. Use HeaderTooltip + // and optionally prepend HeaderTooltip when it differs. Use HeaderTooltip // as the mouse tooltip (Title attribute) when provided. string? ariaLabel = null; if (!string.IsNullOrEmpty(Title)) From bfc000d0109e0d568f5ad600425abc56f7ae96cf Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Tue, 21 Jul 2026 10:45:45 +0200 Subject: [PATCH 5/5] Fix veriefied files --- ...ortByTests_SortByColumnIndex_Ascending.verified.razor.html | 2 +- ...rtByTests_SortByColumnIndex_Descending.verified.razor.html | 2 +- ...ortByTests_SortByColumnTitle_Ascending.verified.razor.html | 2 +- ...rtByTests_SortByColumnTitle_Descending.verified.razor.html | 2 +- ...elect_MultiSelect_Customized_Rendering.verified.razor.html | 4 ++-- ...Grid_ColumSelect_MultiSelect_Rendering.verified.razor.html | 4 ++-- ...rid_ColumSelect_SingleSelect_Rendering.verified.razor.html | 4 ++-- ...lumSelect_SingleStickySelect_Rendering.verified.razor.html | 4 ++-- ...ntDataGridTests.FluentDataGrid_Default.verified.razor.html | 2 +- 9 files changed, 13 insertions(+), 13 deletions(-) diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html index 6c3c1691a6..349c6594c0 100644 --- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html +++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html @@ -14,7 +14,7 @@
+
Item2
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html index 25640779f5..744d726603 100644 --- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html +++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html @@ -14,7 +14,7 @@
+
Item2
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html index 6c3c1691a6..349c6594c0 100644 --- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html +++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html @@ -14,7 +14,7 @@
+
Item2
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html index 25640779f5..744d726603 100644 --- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html +++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html @@ -14,7 +14,7 @@
+
Item2
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html index cdf0bbcc81..9e250695cb 100644 --- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html +++ b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html @@ -2,10 +2,10 @@ - -
+
➖
 +
Name
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html index edc07ec173..5c26a036d5 100644 --- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html +++ b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html @@ -2,14 +2,14 @@ - -
+ +
Name
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html index a094ccd60a..65d99ac97f 100644 --- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html +++ b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html @@ -2,8 +2,8 @@ - - +
+
Name
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering.verified.razor.html index a094ccd60a..65d99ac97f 100644 --- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering.verified.razor.html +++ b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering.verified.razor.html @@ -2,8 +2,8 @@ - - +
+
Name
diff --git a/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html b/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html index c76addeb41..8bf35d5b18 100644 --- a/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html +++ b/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html @@ -2,7 +2,7 @@ -
+
Name