Resizable — Accessibility

Keyboard

All arrow-key interactions respect minSize and maxSize constraints, so users cannot accidentally resize a panel past its bounds.

ARIA

• Each ResizableHandle renders with role="separator", indicating a divider between two regions.
• aria-orientation is set to "horizontal" or "vertical" matching the direction prop on ResizablePanelGroup.
• aria-valuenow reflects the current size of the panel before the handle as a percentage (0--100). aria-valuemin and aria-valuemax map to the panel's minSize and maxSize.
• data-panel-group-direction on the group container provides programmatic access to the layout direction.

Focus management

• Handles receive a visible focus ring (2px primary outline) when focused via keyboard.
• When withHandle is used, the grip icon also receives an inner highlight to reinforce focus.
• Focus order follows DOM order (left-to-right or top-to-bottom), matching the visual layout.

Reduced motion

• When prefers-reduced-motion is active, the smooth panel-resize transition is disabled and sizes snap immediately.
• Collapse/expand animations are also suppressed.

Minimum size constraints

• Always set minSize on panels to prevent content from being crushed to zero. This ensures keyboard users cannot inadvertently hide content.
• Screen readers announce the current panel percentage via aria-valuenow, so users always know how much space each panel occupies.

Native (React Native)

• Renders as a static flex layout -- no drag interaction.
• Panels use flex-1 for equal distribution.

Best practices

• Set minSize to prevent panels from being collapsed to zero.
• Provide meaningful content labels inside panels for screen reader users.
• Consider persisting panel sizes with autoSaveId so returning users keep their layout preference.
• When using multiple handles, ensure each panel has enough minimum space to remain readable.