Interactable

Ensure disabled states are properly communicated.

The disabled prop removes elements from tab order and prevents interaction.

Provide context about why an element is disabled.

Ensure clear focus indicators for keyboard navigation.

Focus indicators should be clearly visible across different backgrounds.

Communicate active/selected state to screen readers.

Indicate which item is currently selected.

Handle nested interactivity accessibly.

Stop propagation to prevent conflicts.

Ensure adequate touch targets for mobile and accessibility.

Interactive elements should meet minimum size requirements.

Provide adequate spacing to prevent mis-taps.

Ensure sufficient contrast for interactive elements.

Interactive elements should maintain contrast across all states.

Test interactive elements with screen readers to verify proper announcements.

Expected announcement: "View user profile for John Doe, button"

Expected announcement: "Toggle notifications, button, pressed" (when enabled) or "Toggle notifications, button, not pressed" (when disabled)