feat: allow tabindex="-1" on non-interactive elements

tabindex="-1" 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 with aria-activedescendant.

Matches jsx-a11y's same exemption and aligns with
template-require-aria-activedescendant-tabindex, which already accepts
both 0 and -1.

Author: johanrd

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

@@ -8,14 +8,15 @@ Adding `tabindex="0"` to a `<div>`, `<section>`, etc. puts it in the keyboard ta
 
 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.
 
+`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).
+
 ## 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>
@@ -35,6 +36,10 @@ This rule **allows** the following:
   <div role="button" tabindex="0"></div>
   <div role="checkbox" tabindex="0" aria-checked="false"></div>
 
+  {{! tabindex="-1" — focusable but not in tab order }}
+  <div tabindex="-1"></div>
+  <section tabindex="-1">scroll target</section>
+
   {{! Dynamic role — conservatively skipped }}
   <div role={{this.role}} tabindex="0"></div>
 </template>

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

@@ -47,6 +47,27 @@ function findAttr(node, name) {
   return node.attributes?.find((a) => a.name === name);
 }
 
+function getStaticTabindexValue(attr) {
+  const value = attr?.value;
+  if (!value) {
+    return undefined;
+  }
+  if (value.type === 'GlimmerTextNode') {
+    const parsed = Number.parseInt(value.chars, 10);
+    return Number.isFinite(parsed) ? parsed : undefined;
+  }
+  if (value.type === 'GlimmerMustacheStatement' && value.path) {
+    if (value.path.type === 'GlimmerNumberLiteral') {
+      return value.path.value;
+    }
+    if (value.path.type === 'GlimmerStringLiteral') {
+      const parsed = Number.parseInt(value.path.value, 10);
+      return Number.isFinite(parsed) ? parsed : undefined;
+    }
+  }
+  return undefined;
+}
+
 function getTextAttrValue(attr) {
   if (attr?.value?.type === 'GlimmerTextNode') {
     return attr.value.chars;
@@ -131,6 +152,14 @@ module.exports = {
           return;
         }
 
+        // `tabindex="-1"` is the canonical "focusable but not in tab order"
+        // pattern (scroll-to-focus targets, focus restoration, composite-widget
+        // children). Matches jsx-a11y's same exemption and is consistent with
+        // `template-require-aria-activedescendant-tabindex`.
+        if (getStaticTabindexValue(tabindex) === -1) {
+          return;
+        }
+
         context.report({
           node: tabindex,
           messageId: 'noNonInteractiveTabindex',

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

@@ -32,18 +32,22 @@ ruleTester.run('template-no-noninteractive-tabindex', rule, {
 
     // Dynamic role — rule conservatively skips.
     '<template><div role={{this.role}} tabindex="0"></div></template>',
+
+    // tabindex="-1" is the canonical "focusable but not in tab order" pattern
+    // (scroll-to-focus targets, focus restoration, composite-widget children).
+    // Matches jsx-a11y's exemption and is consistent with
+    // template-require-aria-activedescendant-tabindex.
+    '<template><div tabindex="-1"></div></template>',
+    '<template><span tabindex="-1">text</span></template>',
+    '<template><section tabindex="-1">scroll target</section></template>',
+    '<template><div tabindex={{-1}}></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,