How to build an accessible Stack in React
Stack is a layout-only container (role="none"). Each child must carry its own accessible semantics. Stacked cards that are interactive should each have a focusable element and a descriptive label.
When to use a Stack
- Card pile UI where depth and layering should be visible
- Overlapping avatar groups
- Notification stack visualisations
When not to use it
- Gap-based vertical/horizontal layout — that is a DIFFERENT component, `Flex` (`layout/flex`). This `Stack` only overlaps children with an offset.
- Independent positioned elements — use CSS position directly
Accessibility
Role none, verified at WCAG 2.2-AA.
Common mistakes
Avoid: import { Stack } from '@cascivo/react' to space items vertically
Prefer: For flex layout use Flex (import { Flex } from "@cascivo/react"); use this Stack only for a visual card-pile
The npm `Stack` overlaps its children by an offset — it does not do gap-based layout. Reach for `Flex` when you want gap-based flex layout.
Example
<Stack offset={6}><Card>First</Card><Card>Second</Card><Card>Third</Card></Stack>