Added tab and keyboard toggle support to dropdown toggles

Author: Joseph Schick

src/EventLogExpert/Components/DetailsPane.razor

@@ -4,7 +4,7 @@
 <div data-toggle="@IsVisible" hidden="@(SelectedEvent is null)" id="details-pane">
     <div id="details-resizer"></div>
 
-    <div class="flex-space-between" id="details-header" @onclick="ToggleMenu">
+    <div class="flex-space-between" id="details-header" @onclick="ToggleMenu" @onkeydown="HandleKeyDown" tabindex="0">
         <div>Details</div>
 
         <span class="menu-toggle" data-rotate="@IsVisible">
@@ -35,7 +35,7 @@
 
         <hr />
 
-        <div class="details-row-xml" @onclick="ToggleXml">
+        <div class="details-row-xml" @onclick="ToggleXml" @onkeydown="HandleKeyDownXml" tabindex="0">
             <div>XML</div>
             <div class="justify-self-center">
                 <button class="button" @onclick="CopyEvent">Copy Event</button>

src/EventLogExpert/Components/DetailsPane.razor.cs

@@ -8,6 +8,7 @@
 using EventLogExpert.UI.Store.EventLog;
 using Fluxor;
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 using Microsoft.JSInterop;
 using System.Collections.Immutable;
 
@@ -63,6 +64,22 @@ protected override void OnInitialized()
 
     private void CopyEvent() => ClipboardService.CopySelectedEvent(CopyType.Full);
 
+    private void HandleKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key is "Enter" or " ")
+        {
+            ToggleMenu();
+        }
+    }
+
+    private void HandleKeyDownXml(KeyboardEventArgs e)
+    {
+        if (e.Key is "Enter" or " ")
+        {
+            ToggleXml();
+        }
+    }
+
     private void ToggleMenu()
     {
         if (!_hasOpened) { _hasOpened = true; }

src/EventLogExpert/Components/FilterPane.razor

@@ -47,7 +47,7 @@
                 </div>
             }
 
-            <span class="menu-toggle justify-self-right" data-rotate="@MenuState" @onclick="ToggleMenu">
+            <span class="menu-toggle justify-self-right" data-rotate="@MenuState" @onclick="ToggleMenu" @onkeydown="HandleKeyDown" tabindex="0">
                 <i class="bi bi-caret-up"></i>
             </span>
         }

src/EventLogExpert/Components/FilterPane.razor.cs

@@ -9,6 +9,7 @@
 using EventLogExpert.UI.Store.FilterPane;
 using Fluxor;
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 using IDispatcher = Fluxor.IDispatcher;
 
 namespace EventLogExpert.Components;
@@ -144,6 +145,14 @@ private int GetActiveFilters()
         return count;
     }
 
+    private void HandleKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key is "Enter" or " ")
+        {
+            ToggleMenu();
+        }
+    }
+
     private void RemoveDateFilter()
     {
         _canEditDate = false;

src/EventLogExpert/Shared/Components/Filters/FilterGroupSection.razor

@@ -1,7 +1,7 @@
 @using EventLogExpert.UI.Models
 
 <div>
-    <div class="flex-space-between my-1" @onclick="ToggleMenu">
+    <div class="flex-space-between my-1" @onclick="ToggleMenu" @onkeydown="HandleKeyDown" tabindex="0">
         <span>@Name</span>
 
         <span class="menu-toggle" data-rotate="@MenuState">

src/EventLogExpert/Shared/Components/Filters/FilterGroupSection.razor.cs

@@ -3,6 +3,7 @@
 
 using EventLogExpert.UI.Models;
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace EventLogExpert.Shared.Components.Filters;
 
@@ -19,4 +20,12 @@ public sealed partial class FilterGroupSection
     private string MenuState => _menuState.ToString().ToLower();
 
     private void ToggleMenu() => _menuState = !_menuState;
+
+    private void HandleKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key is "Enter" or " ")
+        {
+            ToggleMenu();
+        }
+    }
 }