fix: use classifyAttribute for tabindex (rows t6, t7)

Author: johanrd

lib/rules/template-interactive-supports-focus.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const { dom, roles } = require('aria-query');
+const { classifyAttribute } = require('../utils/glimmer-attr-presence');
 
 // Interactive ARIA roles — non-abstract roles that descend from `widget`, plus
 // `toolbar` (per jsx-a11y's convention: toolbar behaves as a widget even
@@ -226,7 +227,13 @@ module.exports = {
         // targets still exists.
         // HTML attribute names are case-insensitive, so accept `tabindex` or
         // any other casing (e.g. `tabIndex`, the React-style camelCase).
-        const hasTabindex = node.attributes?.some((a) => a.name?.toLowerCase() === 'tabindex');
+        // Use classifyAttribute so bare `{{false}}` / `{{null}}` /
+        // `{{undefined}}` (rows t6, t7) — which Glimmer omits at runtime —
+        // are NOT treated as satisfying the focus requirement. Dynamic
+        // values (`tabindex={{this.x}}` → 'unknown') keep the previous
+        // benefit-of-the-doubt: the runtime value could be a valid number.
+        const tabindexAttr = node.attributes?.find((a) => a.name?.toLowerCase() === 'tabindex');
+        const hasTabindex = classifyAttribute(tabindexAttr).presence !== 'absent';
         if (hasTabindex && !isSuppressedFromFocus(node, tag, getTextAttrValue)) {
           return;
         }

tests/lib/rules/template-interactive-supports-focus.js

@@ -52,7 +52,8 @@ ruleTester.run('template-interactive-supports-focus', rule, {
     '<template><div role="treeitem" tabindex="0"></div></template>',
     // tabindex="-1" is also sufficient — the role still has a focus target.
     '<template><div role="button" tabindex="-1"></div></template>',
-    // Dynamic tabindex satisfies the check (the attribute is present).
+    // Dynamic tabindex satisfies the check (runtime value unknown — give
+    // benefit of the doubt; the runtime value may be a valid number).
     '<template><div role="button" tabindex={{this.ti}}></div></template>',
 
     // === Interactive role on a non-focusable host but contenteditable is truthy. ===
@@ -130,6 +131,20 @@ ruleTester.run('template-interactive-supports-focus', rule, {
       output: null,
       errors: [{ messageId: 'focusable', data: { tag: 'div', role: 'button' } }],
     },
+    // Bare-mustache falsy on tabindex (rows t6, t7) — Glimmer omits the
+    // attribute at runtime, so tabindex is NOT actually present and does not
+    // satisfy the focus requirement. AST-presence check would have missed
+    // these (false negatives — rule silently let invalid templates through).
+    {
+      code: '<template><div role="button" tabindex={{false}}></div></template>',
+      output: null,
+      errors: [{ messageId: 'focusable', data: { tag: 'div', role: 'button' } }],
+    },
+    {
+      code: '<template><div role="button" tabindex={{null}}></div></template>',
+      output: null,
+      errors: [{ messageId: 'focusable', data: { tag: 'div', role: 'button' } }],
+    },
     // Role-fallback: UAs walk past unknown leading tokens to the first
     // recognised role (`button` here). Rule should require focusability.
     // LLM guardrail: models sometimes emit speculative unknown-first lists.