Stack

Role and semantics

By default Stack is a plain <div> with no role. When the children are a list, use render={<ul />} for a real list; Stack does not add that meaning by itself.

Keyboard

Key	Behaviour
Tab	Stack takes no focus; Tab moves through the children in their own order. Stack has no keys of its own.

Focus

None. Stack is not in the tab order and draws no focus ring. Focus order is DOM order; there is no prop that changes the visual order.

Screen reader output

Stack itself says nothing to a screen reader; the text of its children is read in DOM order. The separator rule is a border and is not read. Rendered as a <ul>, the screen reader announces the list and the number of items.

Example	Read as
<Stack><Text>First item</Text><Text>Second item</Text></Stack>	“First item”, “Second item”
<Stack render={<ul />}><li>First item</li><li>Second item</li></Stack>	“List, 2 items”, “First item”, “Second item” (varies by screen reader)

Contrast

Stack carries no colour. Only the separator rule is drawn with color-border-subtle, and it is decorative: the relation between items rests on DOM order and text, not on the rule. The contrast of children belongs to their own components.

WCAG 2.2

Criterion	How Stack meets it	What product teams do
1.3.1 Info and relationships	List meaning comes only from render={<ul />}; the rule and the gap carry no meaning.	Give every Stack that is a list a <ul> or <ol> and write the children as <li>.
1.3.2 Meaningful sequence	Stack does not reorder children and has no reverse direction; visual order is DOM order.	Write the items in the order they should be read.
1.4.10 Reflow	Stack is a single-column flow; it needs no horizontal scrolling on narrow screens.	Do not give children a fixed width.
2.4.3 Focus order	Stack takes no focus and does not change focus order; the order is the DOM order of the children.	Do not add tabIndex to a Stack.