Inline

Role and semantics

By default Inline is a plain <div> with no role. When the children are a list, use render={<ul />}; for a navigation group, use render={<nav aria-label="..." />}. Inline does not add that meaning by itself.

Keyboard

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

Focus

None. Inline 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

Inline itself says nothing to a screen reader; the text of its children is read in DOM order. Wrapping does not change reading order. Rendered as a <ul>, the screen reader announces the list and the number of items.

Example	Read as
<Inline><Button>Primary button</Button><Button>Secondary button</Button></Inline>	“Primary button, button”, “Secondary button, button”
<Inline render={<ul />}><li>First item</li><li>Second item</li></Inline>	“List, 2 items”, “First item”, “Second item” (varies by screen reader)

Contrast

Inline carries no colour; contrast depends on the children’s own components and the surface they sit on.

WCAG 2.2

Criterion	How Inline meets it	What product teams do
1.3.1 Info and relationships	List and navigation meaning comes only from the element passed with render.	Give every Inline that is a list a <ul>, and a navigation group a <nav> and a name.
1.3.2 Meaningful sequence	Inline lays children out in DOM order; wrapping and justify do not change reading order.	Write the items in the order they should be read.
1.4.10 Reflow	With wrapping on (the default), children drop to the next row; no horizontal scrolling is needed at 320 CSS pixels.	Do not give children a fixed width; if you use wrap={false}, test a narrow screen.
2.4.3 Focus order	Inline takes no focus and does not change focus order; the order is the DOM order of the children.	Do not add tabIndex to an Inline.