fix(template-no-invalid-interactive): lean toward fewer positives on valueless aria-hidden

The valueless / empty-string aria-hidden case is genuinely contested in
the ecosystem — four positions exist (jsx-a11y / vue-a11y / axe-core /
WAI-ARIA spec), see PR body. Rather than pick one interpretation and
accept its false positives, this rule leans fewer-false-positives: any
aria-hidden form that could plausibly mean "hide this" opts the element
out of the interactive-handler check.

Escape hatch includes:
- valueless `<div aria-hidden onclick>`
- empty `<div aria-hidden="" onclick>`
- `aria-hidden="true"` / "TRUE" / "True" (ASCII case-insensitive)
- `aria-hidden={{true}}` / `{{"true"}}` (case-insensitive)

Not an escape hatch (still flags):
- `aria-hidden="false"` / `{{false}}` / `{{"false"}}` — explicit opt-in
  to the check.

Reverses the previous spec-first direction on the valueless/empty case.
Rationale: flagging a handler on an author-decorated element creates
friction more often than it catches real bugs. The explicit
`aria-hidden="true"` cases, which ARE clearly hidden per spec, remain
escape hatches.

Drops unused `isMustacheLiteralTrue` helper (inlined into the escape-
hatch function).

Author: johanrd

lib/rules/template-no-invalid-interactive.js

@@ -16,32 +16,19 @@ function getTextAttr(node, name) {
   return undefined;
 }
 
-// True iff the attribute's mustache value is the literal boolean `true` —
-// e.g. `aria-hidden={{true}}`. We only treat the unambiguous boolean-literal
-// path; any other expression (helper call, path reference, etc.) is left to
-// runtime and not considered a static escape hatch.
-function isMustacheLiteralTrue(attr) {
-  if (attr?.value?.type !== 'GlimmerMustacheStatement') {
-    return false;
-  }
-  const path = attr.value.path;
-  return path?.type === 'GlimmerBooleanLiteral' && path.value === true;
-}
-
-// Does this element carry a non-interactive escape hatch that peer a11y rules
-// honor as an opt-out of interactivity checks?
-//   - role="presentation" or role="none": the author has asserted the element
-//     is decorative. Per WAI-ARIA 1.2 §4.6, user agents MUST ignore these
-//     roles on focusable elements and expose the implicit role instead; but
-//     for non-focusable static elements with handlers, the author's intent
-//     to opt out of a11y semantics is what this rule honors. This rule
-//     accepts the first token of a space-separated role list (a superset of
-//     jsx-a11y's `isPresentationRole`, which does exact match).
-//   - aria-hidden="true" (ASCII case-insensitive) or mustache-literal
-//     `{{true}}`. Per WAI-ARIA 1.2 §6.6 + aria-hidden value table, valueless
-//     and empty-string aria-hidden resolve to default `undefined` — NOT true
-//     — so bare `<div aria-hidden>` does NOT qualify. Only an explicit true
-//     opts out.
+// Does this element carry a non-interactive escape hatch that opts it out
+// of the interactive-handler check?
+//   - role="presentation" or role="none": author asserts the element is
+//     decorative. We accept the first token of a space-separated role list
+//     (a superset of jsx-a11y's exact-match `isPresentationRole`).
+//   - aria-hidden in any plausibly-"hide" form — valueless, empty-string,
+//     "true" (case-insensitive), `{{true}}`, `{{"true"}}`.
+//
+// The valueless/empty case is genuinely contested in the ecosystem (see
+// PR body: four positions across jsx-a11y / vue-a11y / axe / spec). We
+// lean toward fewer false positives — flagging a handler on an author-
+// decorated element creates friction more often than it catches real bugs.
+// Explicit `aria-hidden="false"` / `{{false}}` still flags.
 function hasNonInteractiveEscapeHatch(node) {
   const roleAttr = findAttr(node, 'role');
   if (roleAttr?.value?.type === 'GlimmerTextNode') {
@@ -52,13 +39,25 @@ function hasNonInteractiveEscapeHatch(node) {
   }
 
   const ariaHidden = findAttr(node, 'aria-hidden');
-  if (ariaHidden?.value?.type === 'GlimmerTextNode') {
-    if (ariaHidden.value.chars.trim().toLowerCase() === 'true') {
+  if (ariaHidden) {
+    if (!ariaHidden.value) {
       return true;
     }
-  }
-  if (isMustacheLiteralTrue(ariaHidden)) {
-    return true;
+    if (ariaHidden.value.type === 'GlimmerTextNode') {
+      const chars = ariaHidden.value.chars.trim().toLowerCase();
+      if (chars === '' || chars === 'true') {
+        return true;
+      }
+    }
+    if (ariaHidden.value.type === 'GlimmerMustacheStatement') {
+      const path = ariaHidden.value.path;
+      if (path?.type === 'GlimmerBooleanLiteral' && path.value === true) {
+        return true;
+      }
+      if (path?.type === 'GlimmerStringLiteral' && path.value.toLowerCase() === 'true') {
+        return true;
+      }
+    }
   }
 
   return false;

tests/lib/rules/template-no-invalid-interactive.js

@@ -113,19 +113,22 @@ ruleTester.run('template-no-invalid-interactive', rule, {
     '<template><x-foo {{on "click" this.handler}}></x-foo></template>',
 
     // Non-interactive escape hatches:
-    //  - role="presentation"/"none" (per WAI-ARIA 1.2 §4.6 presentation-role
-    //    semantics — decorative element, no exposed semantics);
-    //  - aria-hidden="true" or {{true}} (per WAI-ARIA 1.2 §aria-hidden).
-    //    Valueless/empty aria-hidden resolves to default `undefined` per
-    //    §6.6 and does NOT qualify — flagged below in invalid.
+    //  - role="presentation" / role="none" (author-declared decorative);
+    //  - aria-hidden in any plausibly-"hide" form.
+    // Valueless/empty aria-hidden is contested in the ecosystem (see PR body
+    // for the four positions); we lean fewer-false-positives and treat it as
+    // an escape hatch. Explicit aria-hidden="false" / {{false}} still flags.
     '<template><div role="presentation" onclick={{this.h}}></div></template>',
     '<template><div role="none" onclick={{this.h}}></div></template>',
     '<template><div role="presentation" {{on "click" this.h}}></div></template>',
     '<template><div role="none" {{action "foo"}}></div></template>',
+    '<template><div aria-hidden onclick={{this.h}}></div></template>',
+    '<template><div aria-hidden="" onclick={{this.h}}></div></template>',
     '<template><div aria-hidden="true" onclick={{this.h}}></div></template>',
+    '<template><div aria-hidden="TRUE" onclick={{this.h}}></div></template>',
     '<template><div aria-hidden={{true}} onclick={{this.h}}></div></template>',
+    '<template><div aria-hidden={{"true"}} onclick={{this.h}}></div></template>',
     '<template><div aria-hidden="true" {{on "click" this.h}}></div></template>',
-    '<template><div aria-hidden="TRUE" onclick={{this.h}}></div></template>',
     // Case-insensitive / whitespace tolerance on role values.
     '<template><div role="  Presentation  " onclick={{this.h}}></div></template>',
     '<template><div role="NONE" onclick={{this.h}}></div></template>',
@@ -231,21 +234,13 @@ ruleTester.run('template-no-invalid-interactive', rule, {
       ],
     },
     {
-      // `aria-hidden="false"` does NOT opt out — element is still exposed.
+      // Explicit `aria-hidden="false"` is the unambiguous opt-out — still flags.
       code: '<template><div aria-hidden="false" onclick={{this.h}}></div></template>',
       output: null,
       errors: [{ messageId: 'noInvalidInteractive' }],
     },
     {
-      // Valueless aria-hidden resolves to default `undefined` per WAI-ARIA
-      // 1.2 §6.6 — not an opt-out.
-      code: '<template><div aria-hidden onclick={{this.h}}></div></template>',
-      output: null,
-      errors: [{ messageId: 'noInvalidInteractive' }],
-    },
-    {
-      // Empty-string aria-hidden — same default-undefined resolution.
-      code: '<template><div aria-hidden="" onclick={{this.h}}></div></template>',
+      code: '<template><div aria-hidden={{false}} onclick={{this.h}}></div></template>',
       output: null,
       errors: [{ messageId: 'noInvalidInteractive' }],
     },