ember/template-no-invalid-interactive

💼 This rule is enabled in the 📋 template-lint-migration config.

Disallow non-interactive elements with interactive handlers

Rule Details

This rule prevents adding interactive event handlers (like onclick, onkeydown, etc.) to non-interactive HTML elements without proper ARIA roles.

Examples of incorrect code for this rule:

<template>
  <div onclick={{this.handleClick}}>Click me</div>
</template>

<template>
  <span onkeydown={{this.handleKey}}>Press key</span>
</template>

Examples of correct code for this rule:

<template>
  <button onclick={{this.handleClick}}>Click me</button>
</template>

<template>
  <div role="button" onclick={{this.handleClick}}>Click me</div>
</template>

<template>
  <button {{on "click" this.handleClick}}>Click me</button>
</template>

Name	Type	Default	Description
`additionalInteractiveTags`	`string[]`	`[]`	Extra tag names to treat as interactive.
`ignoredTags`	`string[]`	`[]`	Tag names to skip checking.
`ignoreTabindex`	`boolean`	`false`	If `true`, `tabindex` does not make an element interactive.
`ignoreUsemap`	`boolean`	`false`	If `true`, `usemap` does not make an element interactive.