UI: Handle kb nav edge cases when preview and panel are hidden#33588
Merged
UI: Handle kb nav edge cases when preview and panel are hidden#33588
Conversation
|
View your CI Pipeline Execution ↗ for commit 658d712
☁️ Nx Cloud last updated this comment at |
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughIntroduce a new Drag resizer component and extract layout areas into two new containers (MainAreaContainer, PanelContainer); update Layout to use them, move panel resizer handling into PanelContainer (keeping sidebar resizer), and add focused play tests and skip-link behavior adjustments in stories and Sidebar. Changes
Sequence Diagram(s)mermaid Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
✨ Finishing Touches
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In `@code/core/src/manager/components/layout/Drag.tsx`:
- Around line 14-28: The drag handle is invisible to keyboard users and has no
focus or keyboard resizing support; update the Drag component styles to include
a :focus-visible rule matching :hover and ensure the rendered handle element
receives tabindex={0} so it can be focused, and then implement keyboard handlers
in the resize logic inside useDragging (or the handler component that uses
useDragging) to listen for ArrowLeft/ArrowRight/ArrowUp/ArrowDown (and
optionally Shift modifiers for larger steps) to call the same resize/move
functions used by pointer events; ensure focus/blur are handled so focus-visible
shows the handle and reuse existing resize function names (e.g., startDrag,
onDrag, endDrag or whatever functions are exported by useDragging.ts) so
keyboard events invoke the same state updates and callbacks as pointer dragging.
In `@code/core/src/manager/components/layout/Layout.stories.tsx`:
- Around line 192-195: Fix the minor typo in the step description string used in
the story test: update the call to step that currently reads "Verify preview
area is rendered" (inside the Layout.stories.tsx story test where step(...) and
canvas.getByTestId('preview') are used) to remove the extra space so it reads
"Verify preview area is rendered".
In `@code/core/src/manager/components/layout/PanelContainer.tsx`:
- Around line 8-14: Rename the mismatched symbols so names are consistent:
either rename the interface PagesContainerProps and internal memo function
PagesContainer to PanelContainerProps and PanelContainer respectively, or rename
the exported component to PagesContainer; update all references (Props type
annotation, the memoized function name, and the export statement) to use the
same identifier (e.g., PanelContainer, PanelContainerProps, panelResizerRef) and
ensure the component export matches the function name to eliminate the naming
inconsistency between PagesContainerProps, PagesContainer, and PanelContainer.
🧹 Nitpick comments (1)
code/core/src/manager/components/layout/MainAreaContainer.tsx (1)
34-37: Redundantrole="main"on a<main>element.
PagesInnerContaineris astyled.mainelement, which already has an implicitrole="main". Explicitly settingrole: 'main'in the landmark props is redundant and could be removed for cleaner code.Suggested fix
const { landmarkProps } = useLandmark( - { 'aria-labelledby': 'main-content-heading', role: 'main' }, + { 'aria-labelledby': 'main-content-heading' }, mainRef );
Sidnioulz
force-pushed
the
sidnioulz/panel-overflow-followup
branch
from
ce03b3a to
d752e98
Compare
Package BenchmarksCommit: No significant changes detected, all good. 👏 |
Sidnioulz
force-pushed
the
sidnioulz/panel-overflow-followup
branch
from
426ef82 to
1b93b65
Compare
Sidnioulz
force-pushed
the
sidnioulz/panel-overflow-followup
branch
from
1b93b65 to
a3d69cd
Compare
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@code/core/src/manager/components/layout/PanelContainer.tsx`:
- Around line 22-29: The overflow rule on Container currently uses the selector
"& > aside" which no longer matches because PanelSlot now wraps the aside;
update the styling so the overflow: 'hidden' still applies to the rendered
aside—either broaden the selector on Container to include the extra wrapper
(e.g. target direct children' children like "& > * > aside" or specific wrapper
"& > div > aside") or move the overflow: 'hidden' declaration onto PanelSlot
itself; modify the Container or PanelSlot styles accordingly so the aside
receives overflow: 'hidden' again (refer to Container and PanelSlot).
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
code/core/src/manager/components/layout/Drag.tsxcode/core/src/manager/components/layout/Layout.stories.tsxcode/core/src/manager/components/layout/Layout.tsxcode/core/src/manager/components/layout/MainAreaContainer.tsxcode/core/src/manager/components/layout/PanelContainer.tsxcode/core/src/manager/components/sidebar/Sidebar.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- code/core/src/manager/components/layout/Drag.tsx
- code/core/src/manager/components/sidebar/Sidebar.tsx
- code/core/src/manager/components/layout/Layout.tsx
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
code/core/src/manager/components/layout/PanelContainer.tsx (1)
36-43: Harden collapsed-state checks against invalid negative sizesLine 36 and Line 43 assume only exact
0means collapsed. If persisted panel sizes ever become negative, the panel can remain AOM/keyboard-reachable while effectively non-visible. Consider normalizing sizes before derivinghidden/overlapping.Proposed refactor
- const shouldHidePanelContent = - position === 'bottom' ? bottomPanelHeight === 0 : rightPanelWidth === 0; + const normalizedBottomPanelHeight = Math.max(0, bottomPanelHeight); + const normalizedRightPanelWidth = Math.max(0, rightPanelWidth); + const shouldHidePanelContent = + position === 'bottom' + ? normalizedBottomPanelHeight === 0 + : normalizedRightPanelWidth === 0; ... - overlapping={position === 'bottom' ? !!bottomPanelHeight : !!rightPanelWidth} + overlapping={ + position === 'bottom' + ? normalizedBottomPanelHeight > 0 + : normalizedRightPanelWidth > 0 + }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@code/core/src/manager/components/layout/PanelContainer.tsx` around lines 36 - 43, The collapsed-state checks use strict equality to 0 which misses negative persisted sizes; update derivations in PanelContainer.tsx (e.g., shouldHidePanelContent, the overlapping prop passed to Drag, and any other uses of bottomPanelHeight/rightPanelWidth) to normalize sizes first (use Math.max(0, bottomPanelHeight) and Math.max(0, rightPanelWidth) or test <= 0) and then compute hidden/overlapping from the normalized values so negative sizes are treated as collapsed and not left keyboard/ARIA-reachable.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@code/core/src/manager/components/layout/PanelContainer.tsx`:
- Around line 36-43: The collapsed-state checks use strict equality to 0 which
misses negative persisted sizes; update derivations in PanelContainer.tsx (e.g.,
shouldHidePanelContent, the overlapping prop passed to Drag, and any other uses
of bottomPanelHeight/rightPanelWidth) to normalize sizes first (use Math.max(0,
bottomPanelHeight) and Math.max(0, rightPanelWidth) or test <= 0) and then
compute hidden/overlapping from the normalized values so negative sizes are
treated as collapsed and not left keyboard/ARIA-reachable.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
code/core/src/manager/components/layout/Layout.stories.tsxcode/core/src/manager/components/layout/PanelContainer.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- code/core/src/manager/components/layout/Layout.stories.tsx
valentinpalkovic
approved these changes
Mar 6, 2026
This was referenced Mar 31, 2026
1 task
This was referenced Apr 2, 2026
1 task
This was referenced Apr 5, 2026
1 task
This was referenced Apr 6, 2026
1 task
This was referenced Apr 8, 2026
Closed
1 task
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
3 participants
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.
What I did
Follow up on #33450 + improvements on the settings pages keyboard navigation
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>Summary by CodeRabbit
New Features
Tests
Refactor
Bug Fix