How to build an accessible Join in React
Join is a layout-only container (role="none"). Accessibility semantics belong on the individual child controls — buttons carry their own role, inputs their labels.
When to use a Join
- Input + button search groups where the two controls should appear as one unit
- Segmented button rows where buttons share borders
When not to use it
- Independent adjacent buttons that should remain visually separate
- SegmentedControl — it has its own built-in grouping and selection semantics
Accessibility
Role none, verified at WCAG 2.2-AA.
Example
<Join><Input placeholder="Search…" /><Button>Go</Button></Join>