feat: add template-no-noninteractive-tabindex

Flags tabindex on non-interactive elements. tabindex="0" on a <div>
puts it in the tab order without any keyboard semantics — users reach
it but have no way to operate it.

Not flagged (interactive):
- native interactive tags (button, a[href], input, select, textarea,
  summary, details, iframe, embed)
- non-interactive tags with an interactive ARIA role (role="button",
  role="checkbox", role="tab", etc.)

Dynamic role values (mustache) are conservatively skipped — we can't
statically determine whether they resolve to an interactive role.

Interactive-role taxonomy derived from aria-query (widget/command/
composite/input/range ancestors) plus toolbar (per jsx-a11y).

Shape modelled on eslint-plugin-jsx-a11y/no-noninteractive-tabindex.
Not added to template-lint-migration — opt-in.

Author: johanrd

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

@@ -0,0 +1,47 @@
+# ember/template-no-noninteractive-tabindex
+
+<!-- end auto-generated rule header -->
+
+Disallow `tabindex` on non-interactive elements.
+
+Adding `tabindex="0"` to a `<div>`, `<section>`, etc. puts it in the keyboard tab order without supplying any keyboard semantics — users reach the element but have no way to operate it, and screen readers announce the tag with no hint of interactivity.
+
+If the element is meant to be interactive, give it an explicit ARIA role (`button`, `checkbox`, …) **and** wire up the appropriate keyboard event handlers. If it isn't meant to be interactive, remove the tabindex.
+
+## Examples
+
+This rule **forbids** the following:
+
+```gjs
+<template>
+  <div tabindex="0"></div>
+  <span tabindex="-1">text</span>
+  <article tabindex="0">Story</article>
+  <div role="article" tabindex="0"></div>
+  <a tabindex="0">Not a link (missing href)</a>
+</template>
+```
+
+This rule **allows** the following:
+
+```gjs
+<template>
+  {{! Interactive native elements }}
+  <button tabindex="0">Click</button>
+  <a href="/x" tabindex="0">Link</a>
+  <input tabindex="-1" />
+
+  {{! Non-interactive element with an interactive ARIA role }}
+  <div role="button" tabindex="0"></div>
+  <div role="checkbox" tabindex="0" aria-checked="false"></div>
+
+  {{! Dynamic role — conservatively skipped }}
+  <div role={{this.role}} tabindex="0"></div>
+</template>
+```
+
+## References
+
+- [WAI-ARIA Authoring Practices — Keyboard Interaction](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/)
+- [MDN — tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex)
+- [`no-noninteractive-tabindex` — eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-noninteractive-tabindex.md)

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

@@ -0,0 +1,142 @@
+const { dom, roles } = require('aria-query');
+
+// Native elements with default interactive semantics — tabindex here is fine.
+const INHERENTLY_INTERACTIVE_TAGS = new Set([
+  'button',
+  'details',
+  'embed',
+  'iframe',
+  'input',
+  'select',
+  'summary',
+  'textarea',
+]);
+
+// Interactive ARIA roles (widget/command/composite/input/range subtypes) —
+// tabindex is required for widget keyboard access, so allow it when present.
+const INTERACTIVE_ROLES = buildInteractiveRoleSet();
+
+function buildInteractiveRoleSet() {
+  const result = new Set();
+  for (const [role, def] of roles) {
+    if (def.abstract) {
+      continue;
+    }
+    const ancestors = new Set();
+    for (const chain of def.superClass || []) {
+      for (const cls of chain) {
+        ancestors.add(cls);
+      }
+    }
+    if (
+      ancestors.has('widget') ||
+      ancestors.has('command') ||
+      ancestors.has('composite') ||
+      ancestors.has('input') ||
+      ancestors.has('range')
+    ) {
+      result.add(role);
+    }
+  }
+  // toolbar is practically widget-like — see jsx-a11y's note.
+  result.add('toolbar');
+  return result;
+}
+
+function findAttr(node, name) {
+  return node.attributes?.find((a) => a.name === name);
+}
+
+function getTextAttrValue(attr) {
+  if (attr?.value?.type === 'GlimmerTextNode') {
+    return attr.value.chars;
+  }
+  return undefined;
+}
+
+function isInteractiveElement(node) {
+  const tag = node.tag?.toLowerCase();
+  if (INHERENTLY_INTERACTIVE_TAGS.has(tag)) {
+    if (tag === 'input') {
+      const type = getTextAttrValue(findAttr(node, 'type'));
+      if (type === 'hidden') {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (tag === 'a' && findAttr(node, 'href')) {
+    return true;
+  }
+  return false;
+}
+
+// Returns "interactive", "non-interactive", or "unknown" (dynamic value).
+function roleStatus(node) {
+  const attr = findAttr(node, 'role');
+  if (!attr) {
+    return 'non-interactive';
+  }
+  if (attr.value?.type !== 'GlimmerTextNode') {
+    // Dynamic role — can't statically tell. Be conservative: skip flagging.
+    return 'unknown';
+  }
+  const tokens = attr.value.chars.trim().toLowerCase().split(/\s+/u);
+  return tokens.some((t) => INTERACTIVE_ROLES.has(t)) ? 'interactive' : 'non-interactive';
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'disallow tabindex on non-interactive elements (elements without interactive native semantics or interactive ARIA role)',
+      category: 'Accessibility',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-noninteractive-tabindex.md',
+      templateMode: 'both',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      noNonInteractiveTabindex:
+        'tabindex on non-interactive element <{{tag}}> — tabindex should only be used on interactive elements or non-interactive elements with an explicit interactive role.',
+    },
+  },
+
+  create(context) {
+    return {
+      GlimmerElementNode(node) {
+        const tabindex = findAttr(node, 'tabindex');
+        if (!tabindex) {
+          return;
+        }
+
+        const tag = node.tag?.toLowerCase();
+        if (!tag) {
+          return;
+        }
+
+        // Skip components and custom elements (not in aria-query's dom map).
+        if (!dom.has(tag)) {
+          return;
+        }
+
+        if (isInteractiveElement(node)) {
+          return;
+        }
+
+        const status = roleStatus(node);
+        if (status === 'interactive' || status === 'unknown') {
+          return;
+        }
+
+        context.report({
+          node: tabindex,
+          messageId: 'noNonInteractiveTabindex',
+          data: { tag: node.tag },
+        });
+      },
+    };
+  },
+};

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

@@ -0,0 +1,96 @@
+'use strict';
+
+const rule = require('../../../lib/rules/template-no-noninteractive-tabindex');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('template-no-noninteractive-tabindex', rule, {
+  valid: [
+    // No tabindex → rule doesn't fire.
+    '<template><div></div></template>',
+    '<template><article></article></template>',
+
+    // Interactive native elements.
+    '<template><button tabindex="0">Click</button></template>',
+    '<template><a href="/x" tabindex="0">Link</a></template>',
+    '<template><input tabindex="-1" /></template>',
+    '<template><select tabindex="0"></select></template>',
+
+    // Non-interactive element made interactive via role.
+    '<template><div role="button" tabindex="0"></div></template>',
+    '<template><div role="checkbox" tabindex="0" aria-checked="false"></div></template>',
+    '<template><div role="tab" tabindex="0"></div></template>',
+    '<template><div role="menuitem" tabindex="-1"></div></template>',
+
+    // Components and custom elements — rule skips.
+    '<template><CustomWidget tabindex="0" /></template>',
+    '<template><my-widget tabindex="0"></my-widget></template>',
+
+    // Dynamic role — rule conservatively skips.
+    '<template><div role={{this.role}} tabindex="0"></div></template>',
+  ],
+  invalid: [
+    {
+      code: '<template><div tabindex="0"></div></template>',
+      output: null,
+      errors: [{ messageId: 'noNonInteractiveTabindex' }],
+    },
+    {
+      code: '<template><span tabindex="-1">text</span></template>',
+      output: null,
+      errors: [{ messageId: 'noNonInteractiveTabindex' }],
+    },
+    {
+      code: '<template><article tabindex="0">Story</article></template>',
+      output: null,
+      errors: [{ messageId: 'noNonInteractiveTabindex' }],
+    },
+    // Non-interactive role doesn't save it.
+    {
+      code: '<template><div role="article" tabindex="0"></div></template>',
+      output: null,
+      errors: [{ messageId: 'noNonInteractiveTabindex' }],
+    },
+    {
+      code: '<template><div role="heading" tabindex="0"></div></template>',
+      output: null,
+      errors: [{ messageId: 'noNonInteractiveTabindex' }],
+    },
+    // <a> without href isn't interactive.
+    {
+      code: '<template><a tabindex="0">Not a link</a></template>',
+      output: null,
+      errors: [{ messageId: 'noNonInteractiveTabindex' }],
+    },
+  ],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+hbsRuleTester.run('template-no-noninteractive-tabindex', rule, {
+  valid: [
+    '<div></div>',
+    '<button tabindex="0">Click</button>',
+    '<div role="button" tabindex="0"></div>',
+    '<CustomWidget tabindex="0" />',
+  ],
+  invalid: [
+    {
+      code: '<div tabindex="0"></div>',
+      output: null,
+      errors: [{ messageId: 'noNonInteractiveTabindex' }],
+    },
+    {
+      code: '<article tabindex="0"></article>',
+      output: null,
+      errors: [{ messageId: 'noNonInteractiveTabindex' }],
+    },
+  ],
+});