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..4424a966dd 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 prepend 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 ce7aca0c38..ad913841d5 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs @@ -1019,7 +1019,7 @@ 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"; 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; }