From 0e77a2b8531791503b29e1dab287c6263d8c63e0 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 11 Apr 2024 13:40:57 +0200 Subject: [PATCH] A11y fixes: add keydown handler to remove column sort --- ...crosoft.FluentUI.AspNetCore.Components.xml | 8 +++---- .../DataGrid/Examples/DataGridTypical.razor | 8 +++---- .../DataGrid/Columns/ColumnBase.razor | 2 ++ .../DataGrid/Columns/ColumnBase.razor.cs | 16 +++++++++---- .../DataGrid/FluentDataGrid.razor.js | 1 + .../DataGrid/FluentDataGridCell.razor.css | 24 +++++++++++++------ 6 files changed, 40 insertions(+), 19 deletions(-) diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index cba619b56c..a774d3169c 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -1084,20 +1084,20 @@ - Gets or sets the title text for the column. + Gets or sets the title text for the column. This is rendered automatically if is not used. - Gets or sets the an optional CSS class name. + Gets or sets the an optional CSS class name. If specified, this is included in the class attribute of header and grid cells for this column. - Gets or sets an optional CSS style specification. + Gets or sets an optional CSS style specification. If specified, this is included in the style attribute of header and grid cells for this column. @@ -1119,7 +1119,7 @@ - Gets or sets an optional template for this column's header cell. + Gets or sets an optional template for this column's header cell. If not specified, the default header template includes the along with any applicable sort indicators and options buttons. diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor index 2127311907..164d8bcea1 100644 --- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor +++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor @@ -8,7 +8,7 @@
- +
@@ -21,8 +21,8 @@ - @@ -37,7 +37,7 @@ .ByDescending(x => x.Medals.Gold) .ThenDescending(x => x.Medals.Silver) .ThenDescending(x => x.Medals.Bronze); - + Func rowClass = x => x.Name.StartsWith("A") ? "highlighted-row" : null; Func rowStyle = x => x.Name.StartsWith("Au") ? "background-color: var(--highlight-bg);" : null; diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor index 06d6668999..b273076a44 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor +++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor @@ -33,6 +33,7 @@ if (Sortable.HasValue ? Sortable.Value : IsSortableByDefault()) { +
@Title
@@ -51,6 +52,7 @@ + } else { diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs index 86bb5677ca..cbd6eb6702 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs +++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs @@ -14,20 +14,20 @@ public abstract partial class ColumnBase [CascadingParameter] internal InternalGridContext InternalGridContext { get; set; } = default!; /// - /// Gets or sets the title text for the column. + /// Gets or sets the title text for the column. /// This is rendered automatically if is not used. /// [Parameter] public string? Title { get; set; } /// - /// Gets or sets the an optional CSS class name. + /// Gets or sets the an optional CSS class name. /// If specified, this is included in the class attribute of header and grid cells /// for this column. /// [Parameter] public string? Class { get; set; } /// - /// Gets or sets an optional CSS style specification. + /// Gets or sets an optional CSS style specification. /// If specified, this is included in the style attribute of header and grid cells /// for this column. /// @@ -49,7 +49,7 @@ public abstract partial class ColumnBase [Parameter] public Func? TooltipText { get; set; } /// - /// Gets or sets an optional template for this column's header cell. + /// Gets or sets an optional template for this column's header cell. /// If not specified, the default header template includes the along with any applicable sort indicators and options buttons. /// [Parameter] public RenderFragment>? HeaderCellItemTemplate { get; set; } @@ -135,6 +135,14 @@ public abstract partial class ColumnBase /// True if the column should be sortable by default, otherwise false. protected virtual bool IsSortableByDefault() => false; + protected void HandleKeyDown(FluentKeyCodeEventArgs e) + { + if (e.CtrlKey && e.Key == KeyCode.Enter) + { + Grid.RemoveSortByColumnAsync(this); + } + } + public bool ShowSortIcon; /// diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.js b/src/Core/Components/DataGrid/FluentDataGrid.razor.js index d005da7c8b..96e06a8a8b 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.js +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.js @@ -16,6 +16,7 @@ export function init(gridElement) { if (columnOptionsElement) { if (event.key === "Escape") { gridElement.dispatchEvent(new CustomEvent('closecolumnoptions', { bubbles: true })); + gridElement.focus(); } columnOptionsElement.addEventListener( "keydown", diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.css b/src/Core/Components/DataGrid/FluentDataGridCell.razor.css index 7723b34558..0610a58026 100644 --- a/src/Core/Components/DataGrid/FluentDataGridCell.razor.css +++ b/src/Core/Components/DataGrid/FluentDataGridCell.razor.css @@ -10,34 +10,44 @@ fluent-data-grid-cell { .column-header { display: flex; + width: 100%; + height: 100%; align-self: center; padding-inline: 0; + padding-right: 1px; + padding-left: 1px; } .column-header.col-justify-end, .column-header.col-justify-right { - width: 100%; - padding: 0; + + padding-right: 1px; + padding-left: 1px; justify-content: end; } .column-header.col-justify-center { - width: 100%; - padding: 0; + + padding-left: 1px; + padding-right: 1px; justify-content: center; } - .column-header > ::deep .col-sort-container { + .column-header > ::deep .keycapture { display: flex; flex-grow: 1; + } + .column-header > ::deep .keycapture .col-sort-container { + display: flex; + flex-grow: 1; } - .column-header > ::deep .col-sort-container .col-sort-button { + .column-header > ::deep .keycapture .col-sort-container .col-sort-button { flex-grow: 1; padding-inline-end: 5px; } - .column-header > ::deep .col-sort-container .col-sort-button::part(content) { + .column-header > ::deep .keycapture .col-sort-container .col-sort-button::part(content) { overflow: hidden; text-overflow: ellipsis; }