fix(template-no-invalid-interactive): align escape-hatch with ARIA spec + correct peer-plugin claims

Two corrections to the previous revision:

1. Valueless / empty-string `aria-hidden` is no longer treated as a
   non-interactive escape hatch. Per WAI-ARIA 1.2 §6.6 + aria-hidden
   value table, a missing or empty-string value resolves to the default
   `undefined` — NOT `true`. Only an explicit `aria-hidden="true"`
   (ASCII case-insensitive) or mustache-literal `{{true}}` opts out.
   This matches ember-cli#2717 / #19's spec-first resolution.

2. Code comment corrections. jsx-a11y's util is named
   `isPresentationRole`, not `hasPresentationRole`. The comment also
   claimed jsx-a11y's `isPresentationRole` does "first token of a
   space-separated role list" — it does not (jsx-a11y does plain
   `presentationRoles.has(rawValue)`, no trim/lowercase/split). Our
   first-token behavior is a deliberate superset, not parity.

Moved `<div aria-hidden onclick>` and `<div aria-hidden="" onclick>` from
the valid section to invalid. Added `<div aria-hidden="TRUE">` as
additional valid coverage for the case-insensitive path.

Author: johanrd

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

@@ -33,13 +33,19 @@ function isMustacheLiteralTrue(attr) {
 }
 
 // Does this element carry a non-interactive escape hatch that peer a11y rules
-// (jsx-a11y, vuejs-accessibility) honor as an opt-out of interactivity checks?
-//   - role="presentation" / role="none" (case-insensitive, trimmed; first token
-//     of a space-separated role list, matching jsx-a11y's `hasPresentationRole`
-//     / ARIA's role fallback semantics).
-//   - aria-hidden as a boolean attribute (bare), as the literal string "true",
-//     or as the mustache-literal `{{true}}`. aria-hidden="false" does NOT
-//     qualify.
+// 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.
 function hasNonInteractiveEscapeHatch(node) {
   const roleAttr = findAttr(node, 'role');
   if (roleAttr?.value?.type === 'GlimmerTextNode') {
@@ -50,18 +56,14 @@ function hasNonInteractiveEscapeHatch(node) {
   }
 
   const ariaHidden = findAttr(node, 'aria-hidden');
-  if (ariaHidden) {
-    // Bare `aria-hidden` (no value) is stored with an empty-chars GlimmerTextNode.
-    if (ariaHidden.value?.type === 'GlimmerTextNode') {
-      const chars = ariaHidden.value.chars;
-      if (chars === '' || chars.trim().toLowerCase() === 'true') {
-        return true;
-      }
-    }
-    if (isMustacheLiteralTrue(ariaHidden)) {
+  if (ariaHidden?.value?.type === 'GlimmerTextNode') {
+    if (ariaHidden.value.chars.trim().toLowerCase() === 'true') {
       return true;
     }
   }
+  if (isMustacheLiteralTrue(ariaHidden)) {
+    return true;
+  }
 
   return false;
 }

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

@@ -118,18 +118,20 @@ ruleTester.run('template-no-invalid-interactive', rule, {
     '<template><my-element onclick={{this.handler}}></my-element></template>',
     '<template><x-foo {{on "click" this.handler}}></x-foo></template>',
 
-    // Non-interactive escape hatches — `role="presentation"` / `role="none"`
-    // / `aria-hidden` opt the element out of interactive-role semantics.
-    // Matches jsx-a11y (`hasPresentationRole`, aria-hidden handling in
-    // `isInteractiveElement`) and vuejs-accessibility.
+    // 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.
     '<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="true" 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" {{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>',
@@ -240,6 +242,19 @@ ruleTester.run('template-no-invalid-interactive', rule, {
       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>',
+      output: null,
+      errors: [{ messageId: 'noInvalidInteractive' }],
+    },
     {
       // `role="note"` is neither presentation/none nor an interactive role.
       code: '<template><div role="note" onclick={{this.h}}></div></template>',