[ProfileMenu] Toggle open on enter/space key press

src/Core/Components/DataGrid/Columns/PropertyColumn.cs

@@ -2,12 +2,12 @@
 // This file is licensed to you under the MIT License.
 // ------------------------------------------------------------------------
 
+using System.Linq.Expressions;
+using System.Reflection;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Rendering;
 using Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure;
 using Microsoft.FluentUI.AspNetCore.Components.Extensions;
-using System.Linq.Expressions;
-using System.Reflection;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
@@ -119,7 +119,6 @@ protected override void OnParametersSet()
             return (Func<TGridItem, string?>)method.Invoke(null, [getter, format])!;
         }
 
-
         if (typeof(IFormattable).IsAssignableFrom(typeof(TProp)))
         {
             //Struct

src/Core/Components/DataGrid/FluentDataGrid.razor.cs

@@ -1033,7 +1033,7 @@ private void SaveStateToQueryString()
             var order = _sortByAscending ? "asc" : "desc";
             stateParams.Add($"{SaveStatePrefix}orderby", $"{_sortByColumn.Title} {order}");
         }
-        stateParams.Add($"{SaveStatePrefix}page", Pagination?.CurrentPageIndex + 1 ?? null);
+        stateParams.Add($"{SaveStatePrefix}page", (Pagination?.CurrentPageIndex + 1) ?? null);
         stateParams.Add($"{SaveStatePrefix}top", Pagination?.ItemsPerPage ?? null);
         NavigationManager.NavigateTo(NavigationManager.GetUriWithQueryParameters(stateParams), replace: true);
     }

src/Core/Components/ProfileMenu/FluentProfileMenu.razor

@@ -1,8 +1,8 @@
 @namespace Microsoft.FluentUI.AspNetCore.Components
 @inherits FluentComponentBase
 
-<div id="@Id" class="@ClassValue" style="@StyleValue" top-corner="@TopCorner"
-     @onclick="@ProfileMenuClickedAsync">
+<div id="@Id" class="@ClassValue" style="@StyleValue" top-corner="@TopCorner" tabindex="1"
+     @onclick="@ProfileMenuClickedAsync" @onkeydown="@ProfileMenuKeyDownAsync" >
     @StartTemplate
     <FluentPersona Id="@PersonaId"
                    Image="@Image"

src/Core/Components/ProfileMenu/FluentProfileMenu.razor.cs

@@ -3,6 +3,7 @@
 // ------------------------------------------------------------------------
 
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
@@ -178,6 +179,15 @@ private async Task ProfileMenuClickedAsync()
         await OpenChangedHandlerAsync();
     }
 
+    private async Task ProfileMenuKeyDownAsync(KeyboardEventArgs args)
+    {
+        if (args.Key == "Enter" || args.Key == "NumpadEnter" || args.Key == " " || args.Key == "Spacebar")
+        {
+            Open = !Open;
+            await OpenChangedHandlerAsync();
+        }
+    }
+
     /// <summary />
     private async Task OpenChangedHandlerAsync()
     {

src/Core/Components/Splitter/FluentMultiSplitter.razor.cs

@@ -1,6 +1,6 @@
-// --------------------------------------------------------------
-// Copyright (c) Microsoft Corporation.  All rights reserved.
-// --------------------------------------------------------------
+// ------------------------------------------------------------------------
+// This file is licensed to you under the MIT License.
+// ------------------------------------------------------------------------
 
 using System.Globalization;
 using Microsoft.AspNetCore.Components;
@@ -174,7 +174,7 @@ public async Task OnPaneResizedAsync(int paneIndex, double sizeNew, int? paneNex
                 // cancel omitted because it is managed by the parent panel
             }
 
-            paneNext.SizeRuntime = sizeNextNew?.ToString("0.00", CultureInfo.InvariantCulture) + "%" ?? string.Empty;
+            paneNext.SizeRuntime = (sizeNextNew?.ToString("0.00", CultureInfo.InvariantCulture) + "%") ?? string.Empty;
             paneNext.Refresh();
         }
     }

tests/Core/ProfileMenu/FluentProfileMenuTests.FluentProfileMenu_Customized.verified.razor.html

@@ -1,5 +1,5 @@
 
-<div id="xxx" class="fluent-profile-menu" blazor:onclick="1" b-rsm9d6pikk="">
+<div id="xxx" class="fluent-profile-menu" tabindex="1" blazor:onclick="1" blazor:onkeydown="2" b-rsm9d6pikk="">
   <div id="xxx" class="fluent-persona" style="height: inherit;" position="end" b-n7zog0zvqi="">
     <div class="initials" b-n7zog0zvqi="">
       <div class="fluent-presence-badge" title="" b-1o8tp31nhy="">
@@ -8,7 +8,7 @@
     </div>
   </div>
 </div>
-<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" blazor:onclick="2" blazor:oncontextmenu="3" blazor:oncontextmenu:preventdefault="" b-xkrr7evqik="">
+<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" blazor:onclick="3" blazor:oncontextmenu="4" blazor:oncontextmenu:preventdefault="" b-xkrr7evqik="">
   <div b-xkrr7evqik=""></div>
 </div>
 <fluent-anchored-region id="xxx" anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="start" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="bottom" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" b-2ov9fhztky="" blazor:elementreference="xxx">

tests/Core/ProfileMenu/FluentProfileMenuTests.FluentProfileMenu_Default.verified.razor.html

@@ -1,12 +1,12 @@
 
-<div id="xxx" class="fluent-profile-menu" blazor:onclick="1" b-rsm9d6pikk="">
+<div id="xxx" class="fluent-profile-menu" tabindex="1" blazor:onclick="1" blazor:onkeydown="2" b-rsm9d6pikk="">
   <div id="xxx" class="fluent-persona" style="height: inherit;" position="end" b-n7zog0zvqi="">
     <div class="initials" b-n7zog0zvqi="">
       <div class="fluent-presence-badge" title="I'm available" b-1o8tp31nhy="">
         <div style="display: table-cell; vertical-align: middle; width: 20px; min-width: 20px; height: 20px; min-height: 20px;" b-n7zog0zvqi="">
           <img src="iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" alt="Bill Gates" title="Bill Gates" style="max-width: 20px; max-height: 20px;" b-n7zog0zvqi="">
         </div>
-        <svg class="status" style="width: 12px; fill: var(--presence-available);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="2" blazor:onclick="3">
+        <svg class="status" style="width: 12px; fill: var(--presence-available);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="3" blazor:onclick="4">
           <title>I'm available</title>
           <path d="M12 24a12 12 0 1 0 0-24 12 12 0 0 0 0 24Zm5.06-13.44-5.5 5.5a1.5 1.5 0 0 1-2.12 0l-2-2a1.5 1.5 0 0 1 2.12-2.12l.94.94 4.44-4.44a1.5 1.5 0 0 1 2.12 2.12Z"></path>
         </svg>
@@ -15,7 +15,7 @@
     <div class="name" b-n7zog0zvqi="">Bill Gates</div>
   </div>
 </div>
-<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" blazor:onclick="4" blazor:oncontextmenu="5" blazor:oncontextmenu:preventdefault="" b-xkrr7evqik="">
+<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" blazor:onclick="5" blazor:oncontextmenu="6" blazor:oncontextmenu:preventdefault="" b-xkrr7evqik="">
   <div b-xkrr7evqik=""></div>
 </div>
 <fluent-anchored-region id="xxx" anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="start" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="bottom" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" b-2ov9fhztky="" blazor:elementreference="xxx">
@@ -26,7 +26,7 @@
           <div class="stack-horizontal" style="justify-content: start; align-items: center; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
             <p part="header-label" typo="body" class="fluent-typography" b-1nnnfjehkp="">Microsoft</p>
             <div style="flex-grow: 1;"></div>
-            <fluent-button type="button" appearance="stealth" blazor:onclick="6" part="header-button" b-x1200685t0="" blazor:elementreference="xxx">Sign out</fluent-button>
+            <fluent-button type="button" appearance="stealth" blazor:onclick="7" part="header-button" b-x1200685t0="" blazor:elementreference="xxx">Sign out</fluent-button>
           </div>
         </div>
         <div part="body" b-qp3z8ghd2d="">
@@ -50,7 +50,7 @@ <h5 part="fullname" typo="header" class="fluent-typography" style="font-weight:
           <div class="stack-horizontal" style="justify-content: start; align-items: center; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
             <p part="footer-label" typo="body" class="fluent-typography" b-1nnnfjehkp="">v 3.14</p>
             <div style="flex-grow: 1;"></div>
-            <fluent-anchor href="#" appearance="hypertext" blazor:onclick="7" blazor:onclick:preventdefault="" part="footer-link" blazor:elementreference="xxx">View account</fluent-anchor>
+            <fluent-anchor href="#" appearance="hypertext" blazor:onclick="8" blazor:onclick:preventdefault="" part="footer-link" b-acyx52swce="" blazor:elementreference="xxx">View account</fluent-anchor>
           </div>
         </div>
       </div>

tests/Core/ProfileMenu/FluentProfileMenuTests.FluentProfileMenu_StartEndTemplate.verified.razor.html

@@ -1,5 +1,5 @@
 
-<div id="xxx" class="fluent-profile-menu" blazor:onclick="1" b-rsm9d6pikk="">Before
+<div id="xxx" class="fluent-profile-menu" tabindex="1" blazor:onclick="1" blazor:onkeydown="2" b-rsm9d6pikk="">Before
   <div id="xxx" class="fluent-persona" style="height: inherit;" position="end" b-n7zog0zvqi="">
     <div class="initials" b-n7zog0zvqi="">
       <div class="fluent-presence-badge" title="" b-1o8tp31nhy="">
@@ -9,4 +9,4 @@
       </div>
     </div>
   </div>
-  After</div>
+  After</div>

tests/Core/ProfileMenu/FluentProfileMenuTests.razor

@@ -42,6 +42,42 @@
         cut.Verify();
     }
 
+    [Theory]
+    [InlineData("Enter")]
+    [InlineData(" ")]
+    [InlineData("Spacebar")]
+    [InlineData("NumpadEnter")]
+    public void FluentProfileMenu_OpenWithKeyboard(string key)
+    {
+        bool opened = false;
+
+        // Arrange && Act
+        var cut = Render(
+            @<FluentProfileMenu Image="@SamplePicture"
+                   ButtonSize="20px"
+                   ImageSize="48px"
+                   @bind-Open="@opened"
+                   Status="@PresenceStatus.Available"
+                   StatusTitle="I'm available"
+                   HeaderLabel="Microsoft"
+                   FooterLabel="v 3.14"
+                   Initials="BG"
+                   FullName="Bill Gates"
+                   EMail="bill.gates@microsoft.com" />
+    );
+
+        Assert.False(opened);
+
+        // Open the Popover
+        //var button = cut.Find(".initials");
+        //button.Click();
+        cut.Find(".fluent-profile-menu").KeyDown(key);
+
+        // Assert
+        Assert.True(opened);
+
+    }
+
     [Fact]
     public void FluentProfileMenu_Buttons()
     {