A11y: Make resize handles for addon panel and sidebar accessible

[Copilot]

Testing

UI Review

https://www.chromatic.com/review?appId=635781f3500dd2c49e189caf&number=33980&type=linked

Manual testing

1. Run Storybook UI locally
2. Tab to right after the sidebar until you reach the resize handle
3. Press ArrowLeft, ArrowRight, Shift+ArrowLeft, Shift+ArrowRight, Home and End
4. When the sidebar is 0px, press Shift+Tab to ensure kb focus does not go into the sidebar
5. Same as 2-4 for the addon panel resize handle
6. Verify that closing/reopening the sidebar does not cause the drag handle to bug out
7. Verify that closing/reopening the addon panel does not cause the drag handle to bug out
8. Verify that dragging the resize handles doesn't interfere with positions used by the keyboard handler

---

Copilot stream of consciousness

Resize handles for the sidebar and addon panel lack semantic ARIA attributes and keyboard interaction, making them invisible to assistive technologies per the WAI-ARIA separator role spec.

Drag.tsx component

Extracted Drag into its own React component (Drag.tsx) that automatically sets role="separator", tabIndex={0}, and aria-valuemin={0}, reducing ARIA boilerplate at call sites. Callers only need to provide:

• aria-orientation — vertical for sidebar/right panel, horizontal for bottom panel
• aria-label — "Sidebar resize handle" / "Addon panel resize handle"
• aria-valuenow / aria-valuemax — current size in px, max viewport dimension

A TooltipProvider with triggerOnFocusOnly wraps the handle, showing arrow key hints on focus (← → to resize for vertical, ↑ ↓ to resize for horizontal). The tooltip uses TooltipNote for consistent formatting and skips injecting aria-describedby (redundant with the separator role and label).

Focus-visible styles apply outline: 2px solid transparent with boxShadow: inset 0 0 0 4px ${theme.color.secondary}, and conditionally height: 7 when horizontal or width: 7 when vertical. A @media (forced-colors: active) fallback renders outline: 2px solid Highlight so the focus indicator remains visible in Windows High Contrast mode.

<Drag
  ref={sidebarResizerRef}
  position="left"
  aria-label="Sidebar resize handle"
  aria-valuenow={navSize}
  aria-valuemax={maxWidth}
/>

SidebarContainer.tsx

Extracted SidebarContainer into its own file, mirroring PanelContainer. When the sidebar is collapsed (navSize === 0), sidebar content is hidden from keyboard and assistive technologies via hidden and aria-hidden. The drag handle is always rendered outside the hidden slot so users can reopen the sidebar.

PanelContainer.tsx and MainAreaContainer.tsx

Extracted PanelContainer and MainAreaContainer into separate files to match the next branch structure. PanelContainer encapsulates the addon panel's Drag handle with all ARIA attributes and hides collapsed panel content from assistive technologies via hidden and aria-hidden. The position prop is normalized once as resolvedPosition to ensure consistent fallback behavior across all position-dependent logic.

Effective aria-valuemax and keyboard resize limits

The CSS grid reserves MINIMUM_CONTENT_WIDTH_PX (100px) for the content column, so using raw window.innerWidth / window.innerHeight overstates the actual available space. Both containers and useDragging.ts now compute effective maximum sizes that account for the grid constraint and the space occupied by other layout regions:

• Sidebar: window.innerWidth - 100 - rightPanelWidth (when panel is right)
• Right panel: window.innerWidth - 100 - navSize
• Bottom panel: window.innerHeight

MINIMUM_CONTENT_WIDTH_PX is defined in a shared constants.ts file to avoid circular imports.

Keyboard interaction (useDragging.ts)

• Unified applyResizeKeyboard helper with a position parameter (left / right / bottom / top) per the Window Splitter APG pattern
• Arrow keys resize in the expected direction (10px step, 50px with Shift held):
  • Sidebar (left): ArrowRight increases / ArrowLeft decreases
  • Bottom panel (bottom): ArrowUp increases / ArrowDown decreases
  • Right panel (right): ArrowLeft increases / ArrowRight decreases
• Home → minimum size (0), End → maximum size (effective viewport dimension)

Focus management on sidebar/panel toggle

When the sidebar or addon panel is closed via a global keyboard shortcut and focus was inside the region, focus moves to the corresponding "Show sidebar" / "Show addon panel" toolbar button (with fallback to document.body). When either toolbar button is activated via keyboard (Enter / Space), the region opens, focus is polled into the region element, and a landmark animation highlights the target area.

• Added sidebarRegion and showSidebar to focusableUIElements in layout.ts
• Updated menu.tsx toolbar button with ID, focusOnUIElement polling, and useRegionFocusAnimation (matching the existing addons.tsx pattern)
• Updated shortcuts.ts toggleNav handler with focus rescue logic (matching the existing togglePanel pattern)

Layout changes

• Sidebar slot rendered before the drag handle for better keyboard navigation order (search and nav links are reached first)
• Layout.tsx simplified to use the extracted SidebarContainer, PanelContainer, and MainAreaContainer components

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[A11y]: Resize handles for addon panel and sidebar are not accessible</issue_title>
<issue_description>### Describe the bug

Quoting the spec:

separator role

A divider that separates and distinguishes sections of content or groups of menuitems.

There are two types of separators: a static structure that provides only a visible boundary and a focusable, interactive widget that is also moveable. If a separator is not focusable, it is revealed to assistive technologies as a static structural element. For example, a static separator can be used to help visually divide two groups of menu items in a menu or to provide a horizontal rule between two sections of a page.

Authors MAY make a separator focusable to create a widget that both provides a visible boundary between two sections of content and enables the user to change the relative size of the sections by changing the position of the separator. A variable separator widget can be moved continuously within a range, whereas a fixed separator widget supports only two discrete positions. Typically, a fixed separator widget is used to toggle one of the sections between expanded and collapsed states.

If the separator is focusable, authors MUST set the value of aria-valuenow to a number reflecting the current position of the separator and update that value when it changes. Authors SHOULD also provide the value of aria-valuemin if it is not 0 and the value of aria-valuemax if it is not 100. If missing or not a number, the implicit values of these attributes are as follows:

• The implicit value of aria-valuemin is 0.
• The implicit value of aria-valuemax is 100.
• In applications where there is more than one focusable separator, authors SHOULD provide an accessible name for each one.

Elements with the role separator have an implicit aria-orientation value of horizontal.

For us, it means the

• drag handle must communicate an orientation (for sidebar, always horizontal; for addon panel, depends if panel is on the bottom or on the right)
• we must communicate min/max values (min always 0, max depends on space available in viewport)
• we must use aria-valuenow to communicate the current size as exposed in the layout submodule of the manager API
• we must provide aria labels so users know if they're resizing the sidebar or addon panel

Once the Drag component is improved, we must

• add stories to cover all relevant props
• change the addon panel and sidebar callee code to pass the new props

Reproduction link

yarn && yarn task compile -s compile && yarn storybook:ui

Reproduction steps

No response

System

N/A

Additional context

No response</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [A11y]: Resize handles for addon panel and sidebar are not accessible #33979

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

Summary by CodeRabbit

• New Features

  • Resizable sidebar and panel now support keyboard and mouse resizing (arrow keys, Shift for larger steps, Home/End).
  • Show Sidebar action focuses the sidebar and can trigger a landmark animation for keyboard users.

• Accessibility

  • Resize handles include ARIA attributes, focus indicators, and contextual tooltips.
  • New landmark IDs for sidebar and panel regions to improve screen-reader navigation.

• Bug Fixes / UI

  • Collapsed sidebar/panel content is hidden from assistive tech while preserving DOM/layout state.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit b7c8a37

Command	Status	Duration	Result
nx run-many -t compile -c production --parallel=1	✅ Succeeded	5m 36s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-03-13 15:35:11 UTC

[coderabbitai]

Note

Reviews paused

It 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 reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Layout refactor: resizing logic moved into useDragging and dedicated SidebarContainer/PanelContainer components; Drag became an accessible, keyboard-aware separator; new size limits/constants and focusable UI landmarks were added; menu/shortcuts updated to restore focus to the sidebar region.

Changes

Cohort / File(s)	Summary
Layout core code/core/src/manager/components/layout/Layout.tsx	Threaded sidebarMaxWidth and panelMaxSize from useDragging into Layout; replaced inline Drag with SidebarContainer/PanelContainer; simplified showPanel to customisedShowPanel.
Resizing hook code/core/src/manager/components/layout/useDragging.ts	Adds keyboard-resize (keys, step/shift multiplier), computes/clamps sidebarMaxWidth and panelMaxSize, and returns those refs/values for ARIA and callers.
Drag component code/core/src/manager/components/layout/Drag.tsx	Converted to forwardRef component with DragProps; adds role="separator", ARIA attributes, keyboard support, tooltip on focus, and orientation/overlap-driven styling.
Sidebar container code/core/src/manager/components/layout/SidebarContainer.tsx	New SidebarContainer component exporting props navSize, sidebarMaxWidth, sidebarResizerRef; preserves DOM when collapsed and adds accessible drag handle.
Panel container code/core/src/manager/components/layout/PanelContainer.tsx	Adds panelMaxSize prop and resolvedPosition handling; drag handle receives aria-valuenow/aria-valuemax sourced from panelMaxSize; content visibility gated internally.
Accessibility & focus landmarks code/core/src/manager-api/modules/layout.ts, code/core/src/manager/components/sidebar/Sidebar.tsx, code/core/src/manager/components/panel/Panel.tsx, code/core/src/manager/components/preview/tools/menu.tsx, code/core/src/manager-api/modules/shortcuts.ts	Adds focusableUIElements entries (sidebarRegion, showSidebar); Sidebar/Panel landmarks updated; menu exposes showSidebar to focus sidebar (with optional landmark animation); shortcuts attempt focus restoration to showSidebar.
Constants & misc code/core/src/manager/constants.ts, manifest_file, package.json	Adds MINIMUM_CONTENT_WIDTH_PX, MINIMUM_HORIZONTAL_PANEL_WIDTH_PX, and TOOLBAR_HEIGHT_PX; package/manifest metadata updates.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant DragHandle
  participant LayoutState as useDragging
  participant Sidebar as SidebarContainer
  participant Panel as PanelContainer

  User->>DragHandle: mouse drag or keyboard resize (arrow/Home/End)
  DragHandle->>LayoutState: emit resize delta / keyboard intent
  LayoutState->>LayoutState: compute clamp, sidebarMaxWidth, panelMaxSize
  LayoutState->>Sidebar: update navSize / sidebarMaxWidth
  LayoutState->>Panel: update panel size / panelMaxSize
  Sidebar-->>User: updated width + aria updates
  Panel-->>User: updated size/visibility + aria updates

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• Core: Viewport UX fixes #33557: Overlaps on Drag/resize integration and Layout sizing changes.
• UI: Handle kb nav edge cases when preview and panel are hidden #33588: Modifies Drag, PanelContainer, and layout resizing/accessibility — strong overlap.
• Core: Redesign and refactor Viewports tool #33290: Alters useDragging behavior/returns; related to hook changes here.

📝 Coding Plan

• Generate coding plan for human review comments

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

Migrating from UI to YAML configuration.

Use the @coderabbitai configuration command in a PR comment to get a dump of all your UI settings in YAML format. You can then edit this YAML file and upload it to the root of your repository to configure CodeRabbit programmatically.

[Sidnioulz]

@copilot rework this branch based on next. Some of the code for Drag was moved to its own file. Rework the code to remove conflicts and address PR feedback.

[Copilot]

@copilot rework this branch based on next. Some of the code for Drag was moved to its own file. Rework the code to remove conflicts and address PR feedback.

Reworked in commit d1409a8. The branch now matches the next structure:

• Drag.tsx – extracted as a React component with built-in ARIA attrs and focus-only tooltip
• PanelContainer.tsx – from next, with ARIA additions and hidden/aria-hidden for collapsed state
• MainAreaContainer.tsx – from next
• Layout.tsx – simplified to use extracted components, imports match next structure
• useDragging.ts – keyboard handlers preserved (unified applyResizeKeyboard, Shift 5x, Home/End)

[Sidnioulz]

@copilot I've refactored to clean up a little. I am happy with the code but whilst doing QA I discovered an unhandled issue, so I'm adding a requirement to the PR.

I want you to look at how keyboard focus is handled for the addon panel in code/core/src/manager/components/layout/PanelContainer.tsx. shouldHidePanelContent is used to prevent focus into the panel when it is effectively hidden.

I want the same logic applied to the sidebar. Create a SidebarContainer file with the sidebar, drag handle and SidebarContainer. Make sure to hide the sidebar in the same way when its size is 0px to prevent incidents.

Then, I want you to apply the same focus logic as in the addon panel. When the sidebar is closed and focus was inside the sidebar (happens on a global kb shortcut), move nav to the "Show sidebar" button in the toolbar and fallback to document.body. When the "Show sidebar" button is pressed with kb, move focus to the sidebar region with the same animation and logic as for the addon panel.

[coderabbitai]

Actionable comments posted: 3

🤖 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/Drag.tsx`:
- Around line 104-111: The focus style for the separator (in the styled callback
using theme and $orientation, specifically the '&:focus-visible' rule) relies on
boxShadow which is suppressed in Windows High Contrast; add a forced-colors
fallback by nesting a `@media` (forced-colors: active) rule inside the same styled
object that removes the boxShadow fallback and instead sets a visible outline
(e.g., a solid/system color outline) so keyboard focus remains visible in
forced-colors mode while keeping the existing boxShadow behavior for normal
modes.

In `@code/core/src/manager/components/layout/PanelContainer.tsx`:
- Around line 43-53: Normalize the fallback for position once and use that
normalized value when computing overlapping, aria-valuenow, and aria-valuemax:
create a local const (e.g., normalizedPosition = position ?? 'bottom') at the
top of the PanelContainer render logic and replace direct uses of position in
the overlapping, aria-valuenow and aria-valuemax expressions with
normalizedPosition, keeping references to bottomPanelHeight and rightPanelWidth
for the bottom/right branches.

In `@code/core/src/manager/components/layout/useDragging.ts`:
- Around line 32-82: applyResizeKeyboard currently only clamps sizes to [0,
viewport], allowing keyboard-driven sizes to land between 0 and the component
minimums; update it to apply the same snap/open-collapse thresholds used in
onDragEnd so keyboard behavior matches mouse dragging. In applyResizeKeyboard,
after computing the clamped new size for sizeKey (navSize or rightPanelWidth or
bottomPanelHeight), apply the same snap logic used in onDragEnd: compare against
SIDEBAR_MIN_WIDTH_PX and RIGHT_PANEL_MIN_WIDTH_PX (and the bottom panel min if
applicable) and the same threshold used for collapsing/expanding (use the same
comparisons used in onDragEnd) so values below the threshold snap to 0
(collapsed) or to the min width/height; return the snapped size for the relevant
keys (navSize, rightPanelWidth, bottomPanelHeight) instead of the raw clamped
value.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: dc9cceb7-fab9-4624-9649-4bbd1961cffa

📥 Commits

Reviewing files that changed from the base of the PR and between 9716901 and 8048680.

📒 Files selected for processing (4)

• code/core/src/manager/components/layout/Drag.tsx
• code/core/src/manager/components/layout/Layout.tsx
• code/core/src/manager/components/layout/PanelContainer.tsx
• code/core/src/manager/components/layout/useDragging.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• code/core/src/manager/components/layout/Layout.tsx

[storybook-app-bot]

Package Benchmarks

^{Commit: b7c8a37, ran on 13 March 2026 at 15:39:17 UTC}

The following packages have significant changes to their size or dependencies:

storybook

	Before	After	Difference
Dependency count	49	49	0
Self size	20.22 MB	20.42 MB	🚨 +206 KB 🚨
Dependency size	16.54 MB	16.54 MB	0 B
Bundle Size Analyzer	Link	Link

@storybook/vue3-vite

	Before	After	Difference
Dependency count	108	108	0
Self size	36 KB	36 KB	🚨 +24 B 🚨
Dependency size	43.74 MB	43.70 MB	🎉 -37 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	183	183	0
Self size	780 KB	780 KB	0 B
Dependency size	67.40 MB	67.61 MB	🚨 +205 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	176	176	0
Self size	32 KB	32 KB	0 B
Dependency size	65.93 MB	66.14 MB	🚨 +206 KB 🚨
Bundle Size Analyzer	Link	Link

create-storybook

	Before	After	Difference
Dependency count	50	50	0
Self size	1.04 MB	1.04 MB	🎉 -457 B 🎉
Dependency size	36.76 MB	36.96 MB	🚨 +206 KB 🚨
Bundle Size Analyzer	node	node

[Copilot]

@copilot I've refactored to clean up a little. I am happy with the code but whilst doing QA I discovered an unhandled issue, so I'm adding a requirement to the PR.

I want you to look at how keyboard ...

Implemented in commit 6cd1968:

SidebarContainer.tsx — new component mirroring PanelContainer:

• hidden and aria-hidden on sidebar content when navSize === 0 to prevent keyboard/AT access
• Drag handle always rendered outside the hidden slot so users can reopen the sidebar
• ID storybook-sidebar-region for focus management

Focus management on close (shortcuts.ts toggleNav):

• When sidebar is closed via keyboard shortcut and focus was inside, focus moves to the "Show sidebar" button (fallback to document.body)

Focus management on open (menu.tsx):

• "Show sidebar" button now has ID storybook-show-sidebar
• On keyboard activation (Enter/Space), opens sidebar, polls for region focus, and animates the landmark — same pattern as the addon panel's addons.tsx

focusableUIElements — added sidebarRegion and showSidebar keys.

[Sidnioulz]

I feel like there are missing tests/stories for this new functionality. Isn't that doable with keyboard interactions?

Good call, it's an oversight. I've added individual prop tests for the Drag component, and interaction tests for the overall kb interactions we use in Layout.

[Sidnioulz]

@Sidnioulz Should the sidebar respect the same limit as it has when resizing by dragging the handles? being able to resize down to like 20px will probably generate some buggy UI which is why we added the limit that goes onto collapsed state?

Fixed! The keyboard resizing will now also collapse when reaching minimum dimensions. I've also set a minimum dimension of 40px for the bottom panel, as it's really the minimum we need to see to use it.

Also, there's a visual bug when switching the addon panel position

I could not reproduce any such bug. Could you please tell me more?

[JReinhold]

The keyboard resizing will now also collapse when reaching minimum dimensions

Works great and works with the fullscreen button states still. Great job!