fix: use classifyAttribute for type=hidden + controls (rows i2, i3, m6/d3)

Author: johanrd

lib/rules/template-no-interactive-element-to-noninteractive-role.js

@@ -4,6 +4,7 @@ const { roles, elementRoles } = require('aria-query');
 const { AXObjects, elementAXObjects } = require('axobject-query');
 const { INTERACTIVE_ROLES } = require('../utils/interactive-roles');
 const { isNativeElement } = require('../utils/is-native-element');
+const { classifyAttribute } = require('../utils/glimmer-attr-presence');
 
 // Interactive-element derivation. Mirrors jsx-a11y's layered approach:
 //   1. Primary signal — aria-query's `elementRoles`: an element is inherently
@@ -178,11 +179,14 @@ function isInteractiveElement(node) {
     // Special case: <input type="hidden"> is never user-facing. aria-query's
     // textbox entry would not match (it requires type=text/email/url/…), so
     // normally we'd be fine — but keep the explicit guard for clarity.
+    //
+    // Use classifyAttribute so the guard catches every form that renders
+    // `type="hidden"` at runtime: GlimmerTextNode (i1), bare-mustache string
+    // literal `type={{"hidden"}}` (i2 analog), and concat-with-literal
+    // `type="{{'hidden'}}"` (i3 analog). Previous TextNode-only check was a
+    // false-positive source on the latter two forms.
     if (tag === 'input') {
-      const type = getTextAttrValue(findAttr(node, 'type'));
-      // HTML type values are ASCII case-insensitive and may carry incidental
-      // whitespace; normalize before comparison (matches the same guard in
-      // sibling rules like template-interactive-supports-focus).
+      const { value: type } = classifyAttribute(findAttr(node, 'type'));
       if (typeof type === 'string' && type.trim().toLowerCase() === 'hidden') {
         return false;
       }
@@ -196,8 +200,15 @@ function isInteractiveElement(node) {
   }
 
   // Controls-gated fallback for <audio>/<video>: only interactive when the
-  // `controls` attribute is present (matches user-facing-widget reality).
-  if (CONTROLS_GATED_TAGS.has(tag) && hasAttr(node, 'controls')) {
+  // `controls` attribute is rendered at runtime. Bare `controls={{false}}` /
+  // `{{null}}` / `{{undefined}}` cause Glimmer to omit the attribute (per
+  // cross-attribute observation in docs/glimmer-attribute-behavior.md), so
+  // AST-presence is wrong. classifyAttribute returns 'present' only when
+  // the attribute will actually render.
+  if (
+    CONTROLS_GATED_TAGS.has(tag) &&
+    classifyAttribute(findAttr(node, 'controls')).presence === 'present'
+  ) {
     return true;
   }
 

tests/lib/rules/template-no-interactive-element-to-noninteractive-role.js

@@ -44,6 +44,11 @@ ruleTester.run('template-no-interactive-element-to-noninteractive-role', rule, {
     '<template><input type="hidden" role="presentation" /></template>',
     '<template><input type="HIDDEN" role="presentation" /></template>',
     '<template><input type=" hidden " role="presentation" /></template>',
+    // Mustache forms that resolve to `type="hidden"` at runtime (i2 / i3
+    // analogs). Were previously false-positive flagged because the guard
+    // only matched GlimmerTextNode.
+    '<template><input type={{"hidden"}} role="presentation" /></template>',
+    '<template><input type="{{\'hidden\'}}" role="presentation" /></template>',
 
     // <a> without href is not interactive.
     '<template><a role="heading">Not a link</a></template>',
@@ -60,6 +65,13 @@ ruleTester.run('template-no-interactive-element-to-noninteractive-role', rule, {
     '<template><audio role="presentation" src="/x.mp3" /></template>',
     '<template><video role="img" src="/x.mp4" /></template>',
     '<template><audio role="img" src="/x.mp3" /></template>',
+    // Bare-mustache falsy on `controls` (cross-attribute observation: HTML
+    // boolean attrs follow rows m6/m9/m10) — Glimmer omits the attribute
+    // at runtime, so the media has no user-operable UI and the
+    // role="presentation" is allowed. Was a false positive before.
+    '<template><video controls={{false}} role="presentation" src="/x.mp4" /></template>',
+    '<template><video controls={{null}} role="presentation" src="/x.mp4" /></template>',
+    '<template><audio controls={{undefined}} role="presentation" src="/x.mp3" /></template>',
   ],
   invalid: [
     {