Add keyboard navigation to previews - #34
Merged
Merged
Conversation
Make table previews navigable without a mouse. A shared useGridKeyboard hook tracks a focused cell and maps arrow keys, Home/End, Ctrl/Cmd+Home/End, PageUp/PageDown, Enter (activate), and Escape (collapse/clear) to focus moves, scrolling the virtualized list to keep the focused row visible. Keys are ignored while an input is focused so navigation never fights the find box. VirtualTable gets a focusable container with a cell-level focus ring and Enter-to-activate across the table previews; VcfPreview gets row-level focus with Enter to expand and Escape to collapse. Includes tests for the navigation, paging, activate/escape, scroll, and input-guard behaviours.
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
1 participant
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.
Summary
Makes the table previews navigable from the keyboard — the third Tier 1 preview UX feature, after inline error decorations (#32) and in-preview find (#33).
What's new
useGridKeyboardhook tracks a focused{row, col}and maps:↑ / ↓rows,← / →columnsHome/End(row edges),Ctrl/Cmd+Home / End(first/last row)PageUp/PageDownEnter— activate (expand) the focused rowEscape— collapse an expanded row, else clear focusWiring
VirtualTable(the table previews): focusable container, cell-level focus ring,Enteractivates the row, clicking a row sets focus.VcfPreview: focusable container, row-level focus ring,Entertoggles the row's expanded detail,Esccollapses.--vscode-focusBorder.Testing
useGridKeyboard.test.tsx— entry, movement + edge clamping, Home/End and Ctrl variants, paging,scrollToRow,Enter→activate,Escapeclear-vs-consume, and the input-focus guard.Deferred (follow-ups)
← / →, and typeahead-to-row.