Space adds no role and no keyboard behavior. What it adds is an element around every child, which can break markup that has meaning, like a list.
What Space is in the accessibility tree
Nothing. Space renders a plain <div> with no role, no ARIA attributes and no keyboard handling, so assistive tech reads straight through to the children.
Props like role, aria-label and id land on that div.
Pass a name and a role together, or neither. Most screen readers ignore aria-label on a div with no role. For a real toolbar, add role="group" or role="toolbar". A toolbar role promises arrow key navigation, which Space does not provide.
Names, states and keyboard behavior belong to the children. Space does not change them.
The element around every child
Space puts each child in an item element of its own. That is how the separator and per-item styling work, and it can break markup that has meaning.
It breaks a list. List items passed through Space end up as ul > div > li, which is invalid, so the browser no longer announces “list, 5 items”. Keep the li elements as direct children of the ul and put a gap-* class on the list instead.
The same goes for dl with dt and dd, table rows and cells, and a select with its options. Use Space for controls, not structured content.
It breaks child selectors. A > *, :first-child or + rule on the Space root matches the items, not your components. Use classNames.item instead.
A null or false child gets no item, so a conditional child never leaves two separators side by side.
Compact joins controls visually only
Space.Compact makes adjacent controls look like one. To assistive tech they are still separate controls with separate names, and nothing says they belong together.
Add the grouping yourself when it matters. Pass role="group" and an aria-label to Space.Compact, as for a country code select joined to a phone number input.
Every control inside still needs its own accessible name. A placeholder is not a label.
Compact adds one container div and no element per child.
The joint is drawn with borders only, so check the seam's contrast in both modes. A split button whose halves do different things has to look like two targets.
Reading order is DOM order
Tab order and screen reader order follow the DOM, and Space never reorders children.
Wrapped rows are visual only. The items stay one flat sequence, and where the rows break changes with the width. If a grouping is real, put it in the markup.
In RTL a horizontal Space flips visually and keeps the DOM order. Do not reorder the children to compensate.
Order the children by meaning. A primary action placed last in the DOM so it sits on the right is also the last one the keyboard reaches.
A gap is not a separator
A screen reader does not pause for the gap, so the items are read one after another. If the separation carries meaning, put it in the markup.
Where spoken items would run together, use a structure that says so, like a list, a Breadcrumb or Descriptions.
A separator is read out. A / or a · is spoken once per gap. When it is decoration, wrap it in an element with aria-hidden.
A separator only renders between items, so nothing is announced before the first item or after the last.
Do not add a separator to make up for a gap that is too small. Widen the gap.
Space draws nothing, so the colors to check belong to the children and to any separator you pass. What Space sets is the distance between targets, which is zero inside Space.Compact.