Split view — accessibility
Keyboard
- The split adds no controls and no shortcuts; Tab moves through the content of the first pane in the DOM, then the second.
- DOM order follows what the eye reads first: with the aside on the left the aside comes first; with
asidePosition="right"the main pane comes first and the aside (discussion) after it. On the phone the panes stack in the same order, so tab order and visual order never disagree. - With
filleach pane is its own scroll container. Chromium makes a scroll container without focusable content keyboard-focusable; in other browsers a pane with no focusable content can be scrolled only by pointer. - There is no keyboard way to resize the divider because the split is not resizable.
ARIA
.sv,.sv-asideand.sv-mainare plain<div>s with no role: the split is layout, not a landmark. The landmark and its name belong to the content — the page's<main>, a rail's own heading, a list's label.- Do not add
role="separator"to the divider; it is a border, not an interactive splitter. - Loading content inside a pane carries
aria-busyitself (e.g.SkeletonList); the split does not announce anything.
Focus
- No focus rule and no
outline: noneinsplit-view.css; controls inside the panes use the foundation ring fromds.css(outline: 2px solid var(--accent); outline-offset: 1px). .sv-fill > .sv-asideclips horizontal overflow (overflow-x: hidden): a focus ring on a control flush with the pane edge can be cut..sv-padkeeps controls--sp-5from the edge, which is why bare panes must use it.- The split never moves focus. Selecting a record in the aside does not move focus to the main pane unless the screen does so itself.
Contrast
Computed from packages/ui/src/tokens/tokens.css:
- The split has no text or fill of its own; panes sit on the page surface, so their text contrast is that of the content.
- The divider is a
--borderhairline — decorative, and it is not the only cue: the panes are told apart by their content and headings.
Known limits
- The divider line is below 3:1 against the surface; it is decorative and the split does not rely on it.
- In non-Chromium browsers a pane with no focusable content cannot be scrolled from the keyboard.
- Nothing names the two panes as regions; a screen-reader user relies on the headings inside them.
Source: docs/app-shell/split-view.a11y.md · GitLab