💼 This rule is enabled in the following configs: strict-gjs, strict-gts.
Disallows nested interactive elements in templates.
Nested interactive elements (like a button inside a link) are not accessible to keyboard and screen reader users. This creates confusion about which element is actually interactive and can cause unexpected behavior.
This rule disallows nesting interactive elements inside other interactive elements.
Interactive elements include:
<a><button><details><embed><iframe><label><select><textarea><input>(excepttype="hidden")- Elements with interactive ARIA roles
Examples of incorrect code for this rule:
<template>
<button>
<a href="#">Link inside button</a>
</button>
</template><template>
<a href="#">
<button>Button inside link</button>
</a>
</template><template>
<label>
<button>Submit</button>
</label>
</template>Examples of correct code for this rule:
<template>
<div>
<button>Button</button>
<a href="#">Link</a>
</div>
</template><template>
<button>Click me</button>
</template><template>
<label>
<input type="text" />
Label text
</label>
</template>