Harden shell and tables interactions

src/RolemasterDb.App/Components/Shell/AppShell.razor

@@ -26,7 +26,7 @@
             <nav class="app-shell-header-nav" aria-label="Primary">
                 @if (PrimaryNavContent is null)
                 {
-                    <ShellPrimaryNav />
+                    <ShellPrimaryNav/>
                 }
                 else
                 {
@@ -45,6 +45,7 @@
                 <button
                     type="button"
                     class="app-shell-menu-toggle"
+                    aria-haspopup="dialog"
                     aria-expanded="@isNavMenuOpen"
                     aria-controls="app-shell-drawer"
                     @onclick="ToggleNavMenu">
@@ -65,7 +66,7 @@
         }
     </header>
 
-    <ShellOmniboxPalette />
+    <ShellOmniboxPalette/>
 
     <main id="app-main" class="app-shell-main">
         <div class="content-shell">
@@ -79,26 +80,28 @@
             type="button"
             class="app-shell-drawer-backdrop"
             aria-label="Close navigation"
-            @onclick="CloseNavMenu"></button>
+            @onclick="CloseNavMenu">
+        </button>
 
-        <aside id="app-shell-drawer" class="app-shell-drawer" aria-label="Primary navigation">
+        <aside id="app-shell-drawer" class="app-shell-drawer" role="dialog" aria-modal="true" aria-label="Primary navigation" @onkeydown="HandleNavMenuKeyDownAsync">
             <div class="app-shell-drawer-header">
                 <strong>Navigate</strong>
-                <button type="button" class="app-shell-drawer-close" @onclick="CloseNavMenu">
+                <button type="button" class="app-shell-drawer-close" @ref="navMenuCloseButton" @onclick="CloseNavMenu">
                     Close
                 </button>
             </div>
 
-            <ShellPrimaryNav />
+            <ShellPrimaryNav/>
         </aside>
     }
 
     <nav class="app-shell-mobile-nav" aria-label="Primary">
-        <ShellPrimaryNav IsBottomNav="true" />
+        <ShellPrimaryNav IsBottomNav="true"/>
     </nav>
 </div>
 
 @code {
+
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
@@ -118,20 +121,35 @@
     public RenderFragment? UtilityContent { get; set; }
 
     private bool isNavMenuOpen;
+    private ElementReference navMenuCloseButton;
+    private bool shouldFocusNavMenuCloseButton;
 
     protected override void OnInitialized()
     {
         NavigationManager.LocationChanged += HandleLocationChanged;
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!shouldFocusNavMenuCloseButton || !isNavMenuOpen)
+        {
+            return;
+        }
+
+        shouldFocusNavMenuCloseButton = false;
+        await navMenuCloseButton.FocusAsync();
+    }
+
     private void ToggleNavMenu()
     {
         isNavMenuOpen = !isNavMenuOpen;
+        shouldFocusNavMenuCloseButton = isNavMenuOpen;
     }
 
     private void CloseNavMenu()
     {
         isNavMenuOpen = false;
+        shouldFocusNavMenuCloseButton = false;
     }
 
     private void HandleLocationChanged(object? sender, LocationChangedEventArgs args)
@@ -144,4 +162,15 @@
     {
         NavigationManager.LocationChanged -= HandleLocationChanged;
     }
-}
+
+    private Task HandleNavMenuKeyDownAsync(KeyboardEventArgs args)
+    {
+        if (string.Equals(args.Key, "Escape", StringComparison.Ordinal))
+        {
+            CloseNavMenu();
+        }
+
+        return Task.CompletedTask;
+    }
+
+}