Add FilterLibraryModal 3-tab redesign with LibraryEntryRow overflow menu and ARIA focus cascade#564
Merged
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR redesigns the Filter Library modal UI into a 3-tab (Saved / Favorites / Previously Used) layout with per-row actions (Apply / Favorite / overflow “More” menu), adds a JS keydown shim to suppress native tablist key behavior, and implements a strict focus-restoration cascade for accessibility after row removal.
Changes:
- Reworks
FilterLibraryModalinto an ARIA tablist + 3 persistent tabpanels (inactive panels hidden viadisplay:none) with roving-focus keyboard handling and focus restoration after removal. - Rewrites
LibraryEntryRowto include status/kind visuals, favorite toggling semantics, and an overflow menu anchored via JS bounding-rect interop. - Adds new UI-level types (
LibraryTab, intents) and extends unit tests to cover the new UI behavior and invariants.
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| tests/Unit/EventLogExpert.UI.Tests/FilterLibrary/LibraryEntryRowTests.cs | Expands unit coverage for row rendering, menu contents, confirm flows, and intent callbacks. |
| tests/Unit/EventLogExpert.UI.Tests/FilterLibrary/FilterLibraryModalTests.cs | Adds tests for 3-tab projections, sorting, empty states, and tab keyboard navigation. |
| src/EventLogExpert.UI/wwwroot/FilterLibrary/FilterLibraryModal.js | Adds a keydown shim to prevent default browser behavior for handled tablist keys. |
| src/EventLogExpert.UI/Focus/ElementFocus.cs | Adds TrySafelyAsync for focus-attempt semantics needed by the focus cascade. |
| src/EventLogExpert.UI/FilterLibrary/LibraryTab.cs | Introduces LibraryTab enum for Saved/Favorites/PreviouslyUsed. |
| src/EventLogExpert.UI/FilterLibrary/LibraryEntryRow.razor.css | Updates row styling for the new icon/name/status/actions layout. |
| src/EventLogExpert.UI/FilterLibrary/LibraryEntryRow.razor.cs | Implements row behavior: confirm dialogs, overflow menu building, announcements, menu anchoring, and menu service subscription. |
| src/EventLogExpert.UI/FilterLibrary/LibraryEntryRow.razor | Updates markup for kind icon, name/details, status badge, and action buttons with ARIA attributes. |
| src/EventLogExpert.UI/FilterLibrary/FilterLibraryModal.razor.css | Adds styles for tab buttons, panels, and improved loading/error/empty states. |
| src/EventLogExpert.UI/FilterLibrary/FilterLibraryModal.razor.cs | Implements tab projections, keyboard navigation, JS attach/detach, and focus restoration cascade logic. |
| src/EventLogExpert.UI/FilterLibrary/FilterLibraryModal.razor | Replaces list rendering with ARIA tablist/tabpanels and wires new row API. |
| src/EventLogExpert.UI/FilterLibrary/FavoriteToggleIntent.cs | Adds intent record for favorite toggle callbacks. |
| src/EventLogExpert.UI/FilterLibrary/AddToPresetIntent.cs | Adds intent record for “add filter to preset” actions with non-null filter validation. |
| src/EventLogExpert.UI/_Imports.razor | Adds using directives for new FilterLibrary namespaces/types. |
| .github/pr-quality-gate/audits/last.md | Updates PR-quality-gate audit snapshot for this change set. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
jschick04
force-pushed
the
jschick/library-modal-ui
branch
from
b6efbe4 to
f54c89b
Compare
jschick04
force-pushed
the
jschick/library-modal-ui
branch
from
f54c89b to
a6e5969
Compare
jschick04
force-pushed
the
jschick/library-modal-ui
branch
from
a6e5969 to
2cf9729
Compare
jschick04
force-pushed
the
jschick/library-modal-ui
branch
from
2cf9729 to
7f82be6
Compare
jschick04
force-pushed
the
jschick/library-modal-ui
branch
from
7f82be6 to
e5e3397
Compare
jschick04
force-pushed
the
jschick/library-modal-ui
branch
from
e5e3397 to
7757674
Compare
jschick04
force-pushed
the
jschick/library-modal-ui
branch
from
7757674 to
35ed5a3
Compare
…enu and ARIA focus cascade
jschick04
force-pushed
the
jschick/library-modal-ui
branch
from
35ed5a3 to
d7f0157
Compare
NikTilton
approved these changes
Jun 3, 2026
This was referenced Jun 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Redesigns the FilterLibraryModal as a 3-tab (Saved / Favorites / Previously Used) layout with an LibraryEntryRow that has Apply/Favorite/More overflow menu, ARIA tablist roving focus, and a strict-priority focus restoration cascade after row removal.
Scope
LibraryTab(enum),FavoriteToggleIntent+AddToPresetIntent(records with non-null param validation on AddToPresetIntent.Filter)wwwroot/FilterLibrary/FilterLibraryModal.jskeydown shim (idempotent attach/detach; HANDLED_KEYS = ArrowLeft/ArrowRight/Home/End for role=tab only)FilterLibraryModal.razor*rewrite: 3 tabs always in DOM withdisplay:nonefor inactive (preservesaria-controlsintegrity); active tabpaneltabindex=0only when empty; strict-priority focus cascade (target-row -> tab-button -> active-tab fallback within same render);@key="entry.Id"for ref stability;OnDialogClosedByUserwired for Esc/backdrop dismissLibraryEntryRow.razor*rewrite: icon + name + status badge + Apply/Favorite/More buttons; 7 EventCallback params (OnApply/OnReplace/OnDelete/OnToggleFavorite/OnSaveToLibrary/OnAddToPreset/OnRequestPendingFocus);IMenuService.StateChangedper-row subscription;IAsyncDisposable; confirm dialogs for destructive actions;BuildMoreMenu()withSubMenufor Add-to-preset; JS bounding-rect for menu anchoringElementFocus.TrySafelyAsync- newValueTask<bool>helper parallel to existingSafelyAsyncfor cascade-on-failure semanticsSpec invariants
LastUsedUtc != null, ordered desc, top 50IsFavorite=true => LastUsedUtc=null(favorites leave Previously Used)Origin=UserSaved; once UserSaved stays UserSavedTests
Pre-PR review (Section 2D 5-model panel)
Follow-up commits