Interactive elements must not be nested

Checks DOM structure for interactive descendants inside interactive ancestors (links, buttons, form controls, elements with interactive roles).

• Focus and click targets become ambiguous
• Screen readers may announce conflicting roles
• Keyboard interaction can trigger unexpected actions

Ensure each interactive control is separate and not nested within another control.

Bad Example:

<a href="/product">
  <button>Add to cart</button>
</a>

Good Example:

<a href="/product">View product</a>
<button type="button">Add to cart</button>

• Wrapping entire card links around nested action buttons
• Clickable parent containers plus clickable child controls
• Mixing custom role-based controls with native controls

• Tab through controls and verify distinct focus stops
• Test click/Enter/Space behavior for each control independently
• Run automated checks for nested interactive violations