EmptyState accessibility

WCAG 2.1 AA requirements

Semantics

• The title renders as an <h3>. Ensure it fits the heading hierarchy of the consuming page. If not, override with className or wrap in a section with an appropriate aria-label.
• The description is a <p> element — screen readers will announce it naturally after the heading.

Icon slot

• Icons in the icon slot are decorative. They should have aria-hidden="true" (Lucide icons do this by default).
• Never rely on the icon alone to convey meaning. The title must communicate the state.

Action slot

• Action buttons must have descriptive labels ("Create project", not "Click here").
• Ensure the action button is keyboard-focusable and has a visible focus ring.

Colour

• The muted description text meets 4.5:1 contrast in both light and dark themes.
• Do not override colours without verifying contrast.

Audit checklist

• Title communicates the empty state clearly without the icon
• Icon has aria-hidden="true"
• Action button has a descriptive label
• Heading level fits the page hierarchy
• 4.5:1 contrast on description text