xTr1m/RolemasterDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Harden shell and tables interactions

Browse Source
This commit is contained in:
Frank Tovar
2026-04-12 22:38:18 +02:00
parent 222abc155b
commit 0dd1f42fac
18 changed files with 299 additions and 664 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/RolemasterDb.App/Components/Shell/AppShell.razor
View File

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

17
src/RolemasterDb.App/Components/Shell/AppShell.razor.css
View File

@@ -24,6 +24,11 @@
top: 1rem;
}
.skip-link:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.app-shell-header {
position: sticky;
top: 0;
@@ -95,6 +100,7 @@
.app-shell-header-omnibox {
min-width: 0;
overflow: hidden;
}
.app-shell-header-actions {
@@ -127,6 +133,12 @@
background: currentColor;
}
.app-shell-menu-toggle:focus-visible,
.app-shell-drawer-close:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.app-shell-shortcuts {
margin-top: 0.75rem;
}
@@ -135,6 +147,7 @@
flex: 1 1 auto;
min-width: 0;
padding: 1rem 0 5.75rem;
scroll-margin-top: calc(var(--shell-header-height, 5.75rem) + 1rem);
}
.content-shell {
@@ -197,7 +210,7 @@
border-radius: 999px;
background: color-mix(in srgb, var(--surface-2) 84%, transparent);
color: var(--text-primary);
min-height: 2.5rem;
min-height: 2.75rem;
padding: 0.45rem 0.85rem;
}
@@ -212,7 +225,7 @@
}
.app-shell-bar {
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
}

51
src/RolemasterDb.App/Components/Shell/ShellOmniboxPalette.razor
View File

@@ -14,10 +14,12 @@
type="button"
class="shell-omnibox-backdrop"
aria-label="Close search panel"
@onclick="CloseAsync"></button>
@onclick="CloseAsync">
</button>
<section class="shell-omnibox-palette" role="dialog" aria-modal="true" aria-label="Search tables and commands">
<section class="shell-omnibox-palette" role="dialog" aria-modal="true" aria-labelledby="shell-omnibox-title" @onkeydown="HandlePaletteKeyDownAsync">
<header class="shell-omnibox-header">
<h2 id="shell-omnibox-title" class="visually-hidden">Search tables and commands</h2>
<label class="shell-omnibox-search">
<span class="visually-hidden">Search tables or commands</span>
<input
@@ -26,7 +28,7 @@
placeholder="Search tables or type /"
@bind="query"
@bind:event="oninput"
@onkeydown="HandleInputKeyDownAsync" />
@onkeydown="HandleInputKeyDownAsync"/>
</label>
<button type="button" class="shell-omnibox-close" @onclick="CloseAsync">
@@ -139,6 +141,7 @@
}
@code {
private static readonly IReadOnlyList<ShellOmniboxCommand> Commands =
[
new("/tables", "Reference", "Open the reference tables surface.", "/tables"),
@@ -155,37 +158,19 @@
private string query = string.Empty;
private bool HasResults =>
MatchingCommands.Count > 0 ||
MatchingPinned.Count > 0 ||
MatchingRecent.Count > 0 ||
MatchingTables.Count > 0;
MatchingCommands.Count > 0 || MatchingPinned.Count > 0 || MatchingRecent.Count > 0 || MatchingTables.Count > 0;
private IReadOnlyList<CriticalTableReference> MatchingTables =>
referenceData?.CriticalTables
.Where(MatchesTableQuery)
.Take(8)
.ToList()
?? [];
referenceData?.CriticalTables.Where(MatchesTableQuery).Take(8).ToList() ?? [];
private IReadOnlyList<PinnedTableEntry> MatchingPinned =>
PinnedTablesState.Items
.Where(item => MatchesText(item.Label, item.Family, item.Slug))
.Take(6)
.ToList();
PinnedTablesState.Items.Where(item => MatchesText(item.Label, item.Family, item.Slug)).Take(6).ToList();
private IReadOnlyList<RecentTableEntry> MatchingRecent =>
RecentTablesState.Items
.Where(item => MatchesText(item.Label, item.Family, item.Slug))
.Take(6)
.ToList();
RecentTablesState.Items.Where(item => MatchesText(item.Label, item.Family, item.Slug)).Take(6).ToList();
private IReadOnlyList<ShellOmniboxCommand> MatchingCommands =>
Commands
.Where(command => QueryStartsCommandMode()
? command.Shortcut.Contains(query.Trim(), StringComparison.OrdinalIgnoreCase)
: MatchesText(command.Shortcut, command.Label, command.Description))
.Take(5)
.ToList();
Commands.Where(command => QueryStartsCommandMode() ? command.Shortcut.Contains(query.Trim(), StringComparison.OrdinalIgnoreCase) : MatchesText(command.Shortcut, command.Label, command.Description)).Take(5).ToList();
protected override void OnInitialized()
{
@@ -274,11 +259,12 @@
}
}
private Task HandlePaletteKeyDownAsync(KeyboardEventArgs args) =>
string.Equals(args.Key, "Escape", StringComparison.Ordinal) ? CloseAsync() : Task.CompletedTask;
private async Task OpenTableAsync(string tableSlug)
{
var snapshot = new TableContextSnapshot(
TableSlug: tableSlug,
Mode: TableContextMode.Reference);
var snapshot = new TableContextSnapshot(TableSlug: tableSlug, Mode: TableContextMode.Reference);
await TableContextState.PersistAsync("tables", snapshot);
ShellOmniboxState.Close();
@@ -303,11 +289,10 @@
return true;
}
return values.Any(value =>
!string.IsNullOrWhiteSpace(value) &&
value.Contains(normalizedQuery, StringComparison.OrdinalIgnoreCase));
return values.Any(value => !string.IsNullOrWhiteSpace(value) && value.Contains(normalizedQuery, StringComparison.OrdinalIgnoreCase));
}
private bool QueryStartsCommandMode() =>
query.TrimStart().StartsWith("/", StringComparison.Ordinal);
}
}

5
src/RolemasterDb.App/Components/Shell/ShellOmniboxTrigger.razor.css
View File

@@ -3,6 +3,8 @@
display: inline-flex;
align-items: center;
justify-content: flex-start;
min-width: 0;
max-width: 100%;
min-height: 2.75rem;
padding: 0.65rem 0.9rem;
border: 1px solid var(--border-default);
@@ -13,6 +15,9 @@
}
.shell-omnibox-trigger-label {
display: block;
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

5
src/RolemasterDb.App/Components/Shell/ShellPrimaryNav.razor.css
View File

@@ -24,6 +24,11 @@
transform: translateY(-1px);
}
.shell-primary-nav-link:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.shell-primary-nav-link.active {
color: var(--text-primary);
background: color-mix(in srgb, var(--accent-1) 84%, var(--surface-2));