A11y fixes: add keydown handler to remove column sort

microsoft · Apr 11, 2024 · 0e77a2b · 0e77a2b
1 parent 0d36324
commit 0e77a2b
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 19 deletions.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -1084,20 +1084,20 @@
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.Title">
             <summary>
-            Gets or sets the title text for the column. 
+            Gets or sets the title text for the column.
             This is rendered automatically if <see cref="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.HeaderCellItemTemplate" /> is not used.
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.Class">
             <summary>
-            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.
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.Style">
             <summary>
-            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.
             </summary>
@@ -1119,7 +1119,7 @@
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.HeaderCellItemTemplate">
             <summary>
-            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 <see cref="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.Title" /> along with any applicable sort indicators and options buttons.
             </summary>
         </member>

diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor
@@ -8,7 +8,7 @@
     <PropertyColumn Property="@(c => c.Name)" Sortable="true" Filtered="!string.IsNullOrWhiteSpace(nameFilter)" Tooltip="true" Title="Name of the country">
         <ColumnOptions>
             <div class="search-box">
-                <FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" @bind-Value:after="HandleClear" Placeholder="Country name..." />
+                <FluentSearch Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" @bind-Value:after="HandleClear" Placeholder="Country name..." />
             </div>
         </ColumnOptions>
     </PropertyColumn>
@@ -21,8 +21,8 @@
 
 <FluentPaginator State="@pagination" />
 
-<FluentSwitch @bind-Value="@_clearItems" 
-              @bind-Value:after="ToggleItemsAsync" 
+<FluentSwitch @bind-Value="@_clearItems"
+              @bind-Value:after="ToggleItemsAsync"
               UncheckedMessage="Clear all results"
               CheckedMessage="Restore all results">
 </FluentSwitch>
@@ -37,7 +37,7 @@
         .ByDescending(x => x.Medals.Gold)
         .ThenDescending(x => x.Medals.Silver)
         .ThenDescending(x => x.Medals.Bronze);
-    
+
     Func<Country, string?> rowClass = x => x.Name.StartsWith("A") ? "highlighted-row" : null;
     Func<Country, string?> 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
@@ -33,6 +33,7 @@
 
             if (Sortable.HasValue ? Sortable.Value : IsSortableByDefault())
             {
+                <FluentKeyCode Only="new [] { KeyCode.Ctrl, KeyCode.Enter}" OnKeyDown="HandleKeyDown" class="keycapture">
                 <span class="col-sort-container" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(this))" @oncontextmenu:preventDefault>
                     <FluentButton Appearance="Appearance.Stealth" class="col-sort-button" @onclick="@(() => Grid.SortByColumnAsync(this))" aria-label="@tooltip" title="@tooltip">
                         <div class="col-title-text" title="@tooltip">@Title</div>
@@ -51,6 +52,7 @@
 
                     </FluentButton>
                 </span>
+                </FluentKeyCode>
             }
             else
             {

diff --git 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<TGridItem>
     [CascadingParameter] internal InternalGridContext<TGridItem> InternalGridContext { get; set; } = default!;
 
     /// <summary>
-    /// Gets or sets the title text for the column. 
+    /// Gets or sets the title text for the column.
     /// This is rendered automatically if <see cref="HeaderCellItemTemplate" /> is not used.
     /// </summary>
     [Parameter] public string? Title { get; set; }
 
     /// <summary>
-    /// 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.
     /// </summary>
     [Parameter] public string? Class { get; set; }
 
     /// <summary>
-    /// 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.
     /// </summary>
@@ -49,7 +49,7 @@ public abstract partial class ColumnBase<TGridItem>
     [Parameter] public Func<TGridItem, string?>? TooltipText { get; set; }
 
     /// <summary>
-    /// 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 <see cref="Title" /> along with any applicable sort indicators and options buttons.
     /// </summary>
     [Parameter] public RenderFragment<ColumnBase<TGridItem>>? HeaderCellItemTemplate { get; set; }
@@ -135,6 +135,14 @@ public abstract partial class ColumnBase<TGridItem>
     /// <returns>True if the column should be sortable by default, otherwise false.</returns>
     protected virtual bool IsSortableByDefault() => false;
 
+    protected void HandleKeyDown(FluentKeyCodeEventArgs e)
+    {
+        if (e.CtrlKey && e.Key == KeyCode.Enter)
+        {
+            Grid.RemoveSortByColumnAsync(this);
+        }
+    }
+
     public bool ShowSortIcon;
 
     /// <summary>

diff --git 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
@@ -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;
         }