fix(template-no-noninteractive-tabindex): unwrap mustache literals via shared helper (Copilot review)

Extract a new `getStaticAttrValue` util that resolves literal-valued
mustaches (`{{"foo"}}`, `{{true}}`, `{{-1}}`) and single-part concat
statements (`"{{true}}"`) to their static string value. `getStaticTabindexValue`
now delegates to the helper and parses the resolved string with `Number()`
— `tabindex="{{-1}}"` and `tabindex={{"-1"}}` resolve to `-1` the same as
`tabindex="-1"` and `tabindex={{-1}}`, so the canonical "focusable but not
in tab order" exemption applies to all equivalent forms.

Byte-identical carrier of lib/utils/static-attr-value.js across all PRs
that land it.

Author: johanrd

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

@@ -2,6 +2,7 @@ const { dom, roles } = require('aria-query');
 const { isNativeElement } = require('../utils/is-native-element');
 const { isHtmlInteractiveContent } = require('../utils/html-interactive-content');
 const { INTERACTIVE_ROLES } = require('../utils/interactive-roles');
+const { getStaticAttrValue } = require('../utils/static-attr-value');
 
 function findAttr(node, name) {
   // HTML attribute names are case-insensitive. Normalize both sides so
@@ -12,24 +13,16 @@ function findAttr(node, name) {
 }
 
 function getStaticTabindexValue(attr) {
-  const value = attr?.value;
-  if (!value) {
+  // Resolve the attribute's static string via the shared helper — covers
+  // plain text (`tabindex="-1"`), mustache literals (`tabindex={{-1}}` /
+  // `tabindex={{"-1"}}`), and single-part quoted-mustache concat
+  // (`tabindex="{{-1}}"`). Dynamic paths yield `undefined`.
+  const resolved = getStaticAttrValue(attr?.value);
+  if (resolved === undefined || resolved === '') {
     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;
+  const parsed = Number(resolved);
+  return Number.isFinite(parsed) ? parsed : undefined;
 }
 
 function getTextAttrValue(node, name) {

lib/utils/static-attr-value.js

@@ -0,0 +1,64 @@
+'use strict';
+
+/**
+ * Return the statically-known string value of a Glimmer attribute value node,
+ * or `undefined` when the value is dynamic (cannot be resolved at lint time).
+ *
+ * Unwraps:
+ *   - GlimmerTextNode → chars
+ *   - GlimmerMustacheStatement with a literal path (boolean/string/number) → stringified value
+ *   - GlimmerConcatStatement whose parts are all statically resolvable → joined string
+ *
+ * A missing/undefined value (valueless attribute, e.g. `<input disabled>`)
+ * returns the empty string. Pass `attr.value` — not the attribute itself.
+ */
+function getStaticAttrValue(value) {
+  if (value === null || value === undefined) {
+    return '';
+  }
+  if (value.type === 'GlimmerTextNode') {
+    return value.chars;
+  }
+  if (value.type === 'GlimmerMustacheStatement') {
+    return extractLiteral(value.path);
+  }
+  if (value.type === 'GlimmerConcatStatement') {
+    const parts = value.parts || [];
+    let out = '';
+    for (const part of parts) {
+      if (part.type === 'GlimmerTextNode') {
+        out += part.chars;
+        continue;
+      }
+      if (part.type === 'GlimmerMustacheStatement') {
+        const literal = extractLiteral(part.path);
+        if (literal === undefined) {
+          return undefined;
+        }
+        out += literal;
+        continue;
+      }
+      return undefined;
+    }
+    return out;
+  }
+  return undefined;
+}
+
+function extractLiteral(path) {
+  if (!path) {
+    return undefined;
+  }
+  if (path.type === 'GlimmerBooleanLiteral') {
+    return path.value ? 'true' : 'false';
+  }
+  if (path.type === 'GlimmerStringLiteral') {
+    return path.value;
+  }
+  if (path.type === 'GlimmerNumberLiteral') {
+    return String(path.value);
+  }
+  return undefined;
+}
+
+module.exports = { getStaticAttrValue };

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

@@ -81,6 +81,10 @@ ruleTester.run('template-no-noninteractive-tabindex', rule, {
     '<template><span tabindex="-1">text</span></template>',
     '<template><section tabindex="-1">scroll target</section></template>',
     '<template><div tabindex={{-1}}></div></template>',
+    // Quoted-mustache (GlimmerConcatStatement) form resolves to the same
+    // static `-1` via the shared `getStaticAttrValue` helper.
+    '<template><div tabindex="{{-1}}"></div></template>',
+    '<template><div tabindex={{"-1"}}></div></template>',
 
     // WAI-ARIA 1.2 §4.1 role fallback: unrecognized first token is skipped,
     // the next recognized token applies. `button` is interactive → allowed.

tests/lib/utils/static-attr-value-test.js

@@ -0,0 +1,129 @@
+'use strict';
+
+const { getStaticAttrValue } = require('../../../lib/utils/static-attr-value');
+
+describe('getStaticAttrValue', () => {
+  it('returns empty string for null/undefined (valueless attribute)', () => {
+    expect(getStaticAttrValue(null)).toBe('');
+    expect(getStaticAttrValue(undefined)).toBe('');
+  });
+
+  it('returns chars for GlimmerTextNode', () => {
+    expect(getStaticAttrValue({ type: 'GlimmerTextNode', chars: 'hello' })).toBe('hello');
+    expect(getStaticAttrValue({ type: 'GlimmerTextNode', chars: '' })).toBe('');
+  });
+
+  it('unwraps GlimmerMustacheStatement with BooleanLiteral', () => {
+    expect(
+      getStaticAttrValue({
+        type: 'GlimmerMustacheStatement',
+        path: { type: 'GlimmerBooleanLiteral', value: true },
+      })
+    ).toBe('true');
+    expect(
+      getStaticAttrValue({
+        type: 'GlimmerMustacheStatement',
+        path: { type: 'GlimmerBooleanLiteral', value: false },
+      })
+    ).toBe('false');
+  });
+
+  it('unwraps GlimmerMustacheStatement with StringLiteral', () => {
+    expect(
+      getStaticAttrValue({
+        type: 'GlimmerMustacheStatement',
+        path: { type: 'GlimmerStringLiteral', value: 'foo' },
+      })
+    ).toBe('foo');
+    expect(
+      getStaticAttrValue({
+        type: 'GlimmerMustacheStatement',
+        path: { type: 'GlimmerStringLiteral', value: '' },
+      })
+    ).toBe('');
+  });
+
+  it('unwraps GlimmerMustacheStatement with NumberLiteral', () => {
+    expect(
+      getStaticAttrValue({
+        type: 'GlimmerMustacheStatement',
+        path: { type: 'GlimmerNumberLiteral', value: -1 },
+      })
+    ).toBe('-1');
+    expect(
+      getStaticAttrValue({
+        type: 'GlimmerMustacheStatement',
+        path: { type: 'GlimmerNumberLiteral', value: 0 },
+      })
+    ).toBe('0');
+  });
+
+  it('returns undefined for GlimmerMustacheStatement with a dynamic PathExpression', () => {
+    expect(
+      getStaticAttrValue({
+        type: 'GlimmerMustacheStatement',
+        path: { type: 'GlimmerPathExpression', original: 'this.foo' },
+      })
+    ).toBeUndefined();
+  });
+
+  it('joins GlimmerConcatStatement with only static parts', () => {
+    expect(
+      getStaticAttrValue({
+        type: 'GlimmerConcatStatement',
+        parts: [
+          { type: 'GlimmerTextNode', chars: 'prefix-' },
+          {
+            type: 'GlimmerMustacheStatement',
+            path: { type: 'GlimmerStringLiteral', value: 'mid' },
+          },
+          { type: 'GlimmerTextNode', chars: '-suffix' },
+        ],
+      })
+    ).toBe('prefix-mid-suffix');
+  });
+
+  it('joins concat with boolean and number literal parts', () => {
+    expect(
+      getStaticAttrValue({
+        type: 'GlimmerConcatStatement',
+        parts: [
+          {
+            type: 'GlimmerMustacheStatement',
+            path: { type: 'GlimmerBooleanLiteral', value: true },
+          },
+        ],
+      })
+    ).toBe('true');
+    expect(
+      getStaticAttrValue({
+        type: 'GlimmerConcatStatement',
+        parts: [
+          {
+            type: 'GlimmerMustacheStatement',
+            path: { type: 'GlimmerNumberLiteral', value: -1 },
+          },
+        ],
+      })
+    ).toBe('-1');
+  });
+
+  it('returns undefined for GlimmerConcatStatement with a dynamic part', () => {
+    expect(
+      getStaticAttrValue({
+        type: 'GlimmerConcatStatement',
+        parts: [
+          { type: 'GlimmerTextNode', chars: 'x-' },
+          {
+            type: 'GlimmerMustacheStatement',
+            path: { type: 'GlimmerPathExpression', original: 'this.foo' },
+          },
+        ],
+      })
+    ).toBeUndefined();
+  });
+
+  it('returns undefined for an unknown node type', () => {
+    expect(getStaticAttrValue({ type: 'GlimmerSubExpression' })).toBeUndefined();
+  });
+});