Splitter

Panels the reader can resize by dragging the bar between them, with per panel minimums, maximums and a collapse control.

Accessibility

The drag bar has a separator role and its values, but it cannot take focus. What you add is a keyboard route, names for the panes, and a target big enough to hit.

What Splitter renders

The drag bar is a div with role="separator" and its value attributes. The kit's emphasis and grip change how it looks, not these attributes.
  • aria-valuenow, aria-valuemin and aria-valuemax are percentages of the container, whatever unit you passed to size, min and max.
  • A bar locked by resizable={false} on either side reports aria-disabled.
  • aria-orientation describes the bar, so a vertical Splitter has a bar with aria-orientation="horizontal". That is correct, even if it reads backwards in the inspector.
  • Each collapse button is a div with role="button" and a tab stop, rendered only when a panel beside it sets collapsible.

Keyboard: the bar itself is not reachable

The drag bar cannot take focus and has no key handling, so there is no arrow key resize. Keyboard users cannot move the split.
  • The collapse buttons are the only keyboard controls. They take Tab, and Enter or Space collapses or restores the panel.
  • That makes collapsible the accessible way to resize. With every panel collapsible, keyboard users can give the width to the pane they need.
  • showCollapsibleIcon={false} hides the button and takes it out of the tab order, which removes that route.
  • With the default "auto", the button is invisible until the bar is hovered or holds focus, so tabbing to it shows it, with a focus outline. Do not style either away.
  • Where the split matters, also offer it where a keyboard can reach, like a view menu, presets or a shortcut that sets the sizes.

Naming the bar, the buttons and the panes

Splitter renders no text of its own, and you cannot set two of the three names.
  • The bar has no accessible name. A screen reader announces its role and value, not which regions it divides, so the panes have to say that.
  • The collapse buttons are named “Toggle start panel” and “Toggle end panel”, in English, and no prop or locale changes them.
  • The panels are plain divs. Name them with a heading inside each one, or make each a landmark with aria-label.
  • An aria-label on the Splitter names the container, not the bar.

Target size

The bar you see and the area you can hit are both small, and that is this component's main accessibility problem.
  • The drag area is splitTriggerSize wide along the whole split, and the drawn line is narrower still.
  • The collapse button's short side is under the 24px minimum target size.
  • Both come from the theme. Raise splitTriggerSize in your token file for touch users. The drag area grows without the line getting heavier, since they are separate tokens.
  • A thin target is hard to hit with a tremor, a trackpad or a thumb. Make the collapse buttons and any presets the main path, and the drag the fine adjustment.

Contrast

The rail separates two panels, so check its contrast against both panels, not the page. emphasis sets it.
  • emphasis="subtle" draws nothing until hover, which keyboard and touch users never see. Use it only where the content on each side already makes the boundary clear.
  • emphasis="default" is an always visible hairline at the theme's lineWidth, and strong is a wider bar.
  • The grip uses an opaque color, colorGrip, so the rail does not show through it.
  • Two panels with the same background and emphasis="subtle" have no visible boundary. Give them different backgrounds if you want that look.
  • With your own theme, check that colorSplit is still visible against the panels. The Tokens tab lists what Splitter reads.

Motion

Splitter animates in two places, and both respect a reduced motion setting.
  • Collapsing animates only with collapsible.motion, which is off by default, and it stops when the reader asks for reduced motion.
  • The rail and grip transitions use motion-safe:, so they do not run for readers who ask for less motion.
  • Do not slow the drag itself down. If the panels are heavy, use lazy instead of a transition that makes the bar lag the pointer.
  • To turn off every transition, set token: { motion: false } in both the light and dark configs of a ThemeScope, not a nested ConfigProvider.