How to build an accessible Indicator in React
The overlay is marked aria-hidden because it is a visual affordance — the underlying control (button, avatar) carries its own accessible label. Screen-reader users should receive the count or status through the control's accessible name or a live region, not from the overlay div.
When to use a Indicator
- Notification counts on icon buttons
- Status dots on avatars
When not to use it
- Inline badges within text — use Badge directly
- Status messages below a field — use a form hint or Alert
Accessibility
Role none, verified at WCAG 2.2-AA.
Example
<Indicator overlay={<Badge>3</Badge>}><Button variant="ghost"><Icon name="bell" /></Button></Indicator>