fix: clarify comments, document canvas exemption, handle tabindex={{N}} concat form

- Update is-native-element-test.js header comment to accurately describe
  what the file tests (list-lookup path; scope-shadowing via RuleTester)
- Clarify dom.has(tag) guard comment: skips SVG/MathML and other non-HTML
  tags not present in aria-query's DOM map, not just custom elements
- Document the <canvas> exemption in the rule docs with rationale
- Handle GlimmerConcatStatement with single mustache part in
  getStaticTabindexValue so tabindex="{{-1}}" is treated same as tabindex={{-1}}

Author: johanrd

docs/rules/template-no-noninteractive-tabindex.md

@@ -10,6 +10,8 @@ If the element is meant to be interactive, give it an explicit ARIA role (`butto
 
 `tabindex="-1"` is exempt — it marks an element as programmatically focusable but skipped by the Tab key, the canonical pattern for scroll-to-focus targets, focus restoration, and composite-widget children. See [`template-require-aria-activedescendant-tabindex`](./template-require-aria-activedescendant-tabindex.md).
 
+`<canvas>` is always exempt. The HTML spec does not classify `<canvas>` as interactive content, but it is routinely used as an interactive drawing or game surface, and `tabindex` is required to make it keyboard-accessible. Flagging `<canvas tabindex="0">` would produce unhelpful noise for these legitimate use-cases.
+
 ## Examples
 
 This rule **forbids** the following:
@@ -45,6 +47,9 @@ This rule **allows** the following:
 
   {{! role="tabpanel" — default allowlist (see Options) }}
   <div role="tabpanel" tabindex="0" aria-labelledby="tab-1">Panel</div>
+
+  {{! <canvas> — exempted because canvas needs tabindex to be keyboard-accessible }}
+  <canvas tabindex="0"></canvas>
 </template>
 ```
 

lib/rules/template-no-noninteractive-tabindex.js

@@ -55,6 +55,14 @@ function getStaticTabindexValue(attr) {
       return Number.isFinite(parsed) ? parsed : undefined;
     }
   }
+  // tabindex="{{-1}}" → GlimmerConcatStatement with a single mustache part.
+  if (
+    value.type === 'GlimmerConcatStatement' &&
+    value.parts?.length === 1 &&
+    value.parts[0].type === 'GlimmerMustacheStatement'
+  ) {
+    return getStaticTabindexValue({ value: value.parts[0] });
+  }
   return undefined;
 }
 
@@ -147,7 +155,9 @@ module.exports = {
           return;
         }
 
-        // Skip custom elements (not in aria-query's dom map).
+        // Only check elements present in aria-query's DOM map. This skips SVG
+        // and MathML tags (not in aria-query's HTML-focused map) as well as any
+        // other non-HTML tags that passed isNativeElement.
         if (!dom.has(tag)) {
           return;
         }

tests/lib/utils/is-native-element-test.js

@@ -2,10 +2,9 @@
 
 const { isNativeElement, ELEMENT_TAGS } = require('../../../lib/utils/is-native-element');
 
-// Tests exercise the list-lookup path only. Scope-based shadowing is covered
-// by the rule-level test suites (see tests/lib/rules/template-no-block-params-
-// for-html-elements.js and siblings) because it requires a real ESLint
-// SourceCode / scope manager that's only built up by the rule tester.
+// Tests cover the list-lookup path (no sourceCode argument). Scope-based
+// shadowing (passing a real ESLint SourceCode) is exercised by rule-level
+// test suites that go through the full RuleTester pipeline.
 
 describe('isNativeElement — list-only behavior (no sourceCode)', () => {
   it('returns true for lowercase HTML tag names', () => {