fix(template-no-nested-interactive): guard canvas in isInteractiveOnlyFromTabindex; update docs

canvas is unconditionally interactive (added by PR #37 for drawing/game-UI
parity with upstream ember-template-lint). isInteractiveOnlyFromTabindex
was missing a canvas guard, so <canvas tabindex="0"> was incorrectly
treated as tabindex-only and never pushed onto the interactive stack,
meaning nested interactive content inside a canvas+tabindex was silently
allowed.

Also updates docs to list audio[controls], video[controls], and canvas as
interactive, and expands the Special Cases section to document the ARIA
composite-widget hierarchy exception introduced alongside this refactor.

Author: johanrd

docs/rules/template-no-nested-interactive.md

@@ -15,7 +15,9 @@ This rule disallows nesting interactive elements inside other interactive elemen
 Interactive elements include:
 
 - `<a>` (only when it has an `href` attribute)
+- `<audio>` (only when it has a `controls` attribute)
 - `<button>`
+- `<canvas>` (drawing/game-UI convention; not in the HTML spec's interactive-content category)
 - `<details>`
 - `<embed>`
 - `<iframe>`
@@ -24,6 +26,7 @@ Interactive elements include:
 - `<select>`
 - `<summary>`
 - `<textarea>`
+- `<video>` (only when it has a `controls` attribute)
 - Elements with interactive ARIA roles (e.g., `role="button"`, `role="link"`)
 - Elements with `tabindex` (unless `ignoreTabindex` is enabled)
 - Elements with `contenteditable` (except `contenteditable="false"`)
@@ -32,8 +35,9 @@ Interactive elements include:
 Special cases:
 
 - `<label>` may contain **one** interactive child (e.g., `<label><input /></label>` is fine, but `<label><input /><button>x</button></label>` is not)
-- `<summary>` as the first child of `<details>` is allowed
-- Nested `role="menuitem"` elements are allowed (menu/sub-menu pattern)
+- `<summary>` as the first child of `<details>` is allowed; other interactive content after `<summary>` (in the disclosed panel) is also allowed
+- Canonical ARIA composite-widget hierarchies are allowed (e.g., `role="option"` inside `role="listbox"`, `role="tab"` inside `role="tablist"`, `role="row"` inside `role="grid"`, `role="radio"` inside `role="radiogroup"`). Derived from the ARIA `requiredOwnedElements` relationship.
+- Nested `role="menuitem"` / `role="menuitemcheckbox"` / `role="menuitemradio"` elements are allowed (menu/sub-menu pattern)
 
 ## Examples
 

lib/rules/template-no-nested-interactive.js

@@ -187,6 +187,9 @@ module.exports = {
       if (additionalInteractiveTags.has(tag)) {
         return false;
       }
+      if (tag === 'canvas') {
+        return false;
+      }
       if (isHtmlInteractiveContent(node, getTextAttr, { ignoreUsemap })) {
         return false;
       }

tests/lib/rules/template-no-nested-interactive.js

@@ -268,6 +268,12 @@ ruleTester.run('template-no-nested-interactive', rule, {
       output: null,
       errors: [{ messageId: 'nested' }],
     },
+    // <canvas> is interactive (drawing/game-UI convention); nesting fires even with tabindex.
+    {
+      code: '<template><canvas tabindex="0"><button>Click</button></canvas></template>',
+      output: null,
+      errors: [{ messageId: 'nested' }],
+    },
   ],
 });
 
@@ -454,5 +460,11 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
       output: null,
       errors: [{ message: 'Do not nest interactive element <video> inside <button>.' }],
     },
+    // <canvas> is interactive (drawing/game-UI convention); nesting fires even with tabindex.
+    {
+      code: '<canvas tabindex="0"><button>Click</button></canvas>',
+      output: null,
+      errors: [{ message: 'Do not nest interactive element <button> inside <canvas>.' }],
+    },
   ],
 });