[Studio UI] Add keyboard navigation to search results - #4058
Open
idaiv wants to merge 5 commits into
Open
Conversation
Search result items now support keyboard interaction: - ArrowDown/Up to navigate between results - Enter to open the selected result - role="option" on items, role="listbox" on container - First item gets tabIndex=0 for keyboard entry Fixes WCAG 2.1 2.1.1 (Keyboard) for the search modal. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
idaiv
added
the
Skip Milestone Check
Contributor
There was a problem hiding this comment.
Pull request overview
Verdict: Needs changes. The PR adds keyboard navigation to Quick Search results but leaves accessibility state and documentation inconsistent.
Changes:
- Adds listbox/option semantics and keyboard controls.
- Makes the first result tabbable.
- Adds a broader keyboard-navigation audit.
Review:
- Correct component boundary; all
SearchResultItemcall sites are covered. - No public API compatibility impact.
- Focus does not update selection/details, and multiple options can become tabbable.
- No automated regression test was added.
- The audit contains stale or overly broad findings.
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
docs/keyboard-navigation-audit.md |
Documents keyboard accessibility gaps. |
search-result.tsx |
Adds listbox semantics and initial tab entry. |
search-result-item.tsx |
Adds option semantics and keyboard handlers. |
Suppressed comments (1)
assets/js/src/core/modules/search/modal/tabs/general/search-result/search-result.tsx:98
- Arrow-key focus does not update
selectedItemQuery, so keyboard navigation leaves the active styling and detail pane on the previously mouse-hovered item (or blank). Forward focus through the same preview path used by mouse hover so keyboard users receive the same result context.
onMouseEnter={ () => { onMouseEnter(item) } }
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| onClick={ onClick } | ||
| onKeyDown={ onKeyDown } | ||
| padding={ 'mini' } | ||
| role="option" |
| {data?.items.map((item, index) => ( | ||
| <SearchResultItem | ||
| active={ detectItemActivity(item) } | ||
| first={ index === 0 } |
Comment on lines
+22
to
+25
| ### 1. Shift+F10 context menu not implemented anywhere | ||
| - **Where:** `context-menu-wrapper.tsx`, all tree `with-context-menu.tsx` wrappers, tab context menus | ||
| - **Impact:** Context menus are mouse-only. Keyboard users cannot access tree actions, tab close options, or element actions. | ||
| - **Effort:** Medium — Add global/component-level keydown listener for Shift+F10, dispatch programmatic Ant Dropdown open, focus first menu item. ~20 touch points but can be centralized in `ContextMenuWrapper`. |
Comment on lines
+37
to
+40
| ### 4. Search results not keyboard navigable | ||
| - **Where:** `search-result.tsx`, `search-result-item.tsx` | ||
| - **Impact:** Results respond only to mouse click. No arrow key navigation, no Enter to open. | ||
| - **Effort:** Medium — Add `tabIndex`, `onKeyDown` for arrow up/down + Enter, visual focus indicator. |
- first prop only true when no item is selected (prevents two tabIndex=0 items in the listbox) - Added aria-selected on each option for screen readers Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The keyboard-navigation-audit.md was accidentally included. It's a pre-remediation snapshot that becomes stale as fixes land. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
idaiv
removed
the
Skip Milestone Check
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.
Summary
role="listbox"on container,role="option"on itemstabIndex=0for keyboard entry pointTest plan
🤖 Generated with Claude Code
Relates to https://github.com/pimcore/product-management/issues/372