[Studio UI] Fix sidebar tab selection firing on every keypress - #4046
Open
idaiv wants to merge 4 commits into
Open
[Studio UI] Fix sidebar tab selection firing on every keypress#4046idaiv wants to merge 4 commits into
idaiv wants to merge 4 commits into
Conversation
The onKeyDown handler triggered handleSidebarClick on any key, breaking arrow key navigation within the sidebar. Restrict to Enter and Space only, matching the WAI-ARIA tab pattern. 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
Fixes unintended sidebar tab activation on arbitrary keypresses by restricting activation to Enter and Space.
Changes:
- Guards keyboard activation by key.
- Prevents default Enter/Space behavior.
Assessment:
- The shared component is the correct boundary and covers all consumers without API breakage.
- The immediate activation bug is fixed, but arrow-key focus navigation remains unimplemented.
- No regression test was added.
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+130
to
135
| onKeyDown={ (event) => { | ||
| if (event.key === 'Enter' || event.key === ' ') { | ||
| event.preventDefault() | ||
| handleSidebarClick(entry.key) | ||
| } | ||
| } } |
Comment on lines
+130
to
+134
| onKeyDown={ (event) => { | ||
| if (event.key === 'Enter' || event.key === ' ') { | ||
| event.preventDefault() | ||
| handleSidebarClick(entry.key) | ||
| } |
Address review: role="tab" elements need arrow key focus movement. ArrowDown/Right moves to next tab, ArrowUp/Left to previous (wraps). Also apply roving tabindex: active tab gets tabIndex=0, others -1. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
3 tasks
idaiv
removed
the
Skip Milestone Check
idaiv
added a commit
that referenced
this pull request
Sep 4, 2026
* [Studio UI] Add Escape key to collapse sidebar panel When focus is inside the sidebar content panel, pressing Escape collapses it (sets active tab to empty). Completes the sidebar keyboard accessibility alongside PR #4046 which added Enter/Space tab activation and arrow key navigation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Automatic frontend build * [Studio UI] Move focus to sidebar tab after Escape collapse When Escape collapses the sidebar, focus was left on the now-hidden content. Move focus to the previously active tab via rAF so the keyboard user's position continues from the sidebar navigation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Automatic frontend build --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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
onKeyDownhandler triggered tab selection on any keypress, breaking arrow key navigationTest plan
🤖 Generated with Claude Code
Relates to https://github.com/pimcore/product-management/issues/372