interactive-inside-interactive

This fails the run. Where it is wrong about your code, // ramonda-check-ignore <reason> on the line says so, and the reason is printed on every run.

Reported when an interactive element is nested inside another of the same kind: a link in a link, a button in a button, a form in a form.

Meeting the second, the parser closes the first. The inner element becomes a SIBLING of the outer one, so the tree the browser builds is not the tree in your source — and the failure is behavioural rather than visual: a click lands on whichever ended up on top, and a nested form submits fields the outer one believed were its own.

Put them side by side, or make the inner one something that is not interactive — a <span> styled to look like a button is not a button, and that is the point.

An element reached through a component is not reported: what that component renders is decided inside it.

Next

• All rules — the other checks this one runs beside.
• Checking your app — how to run it, and what it proves.