fix(template-click-events-have-key-events): drop misleading 'Visible' message word; add aria-hidden mustache-string and concat tests; clarify option/datalist comment

Author: johanrd

lib/rules/template-click-events-have-key-events.js

@@ -1,6 +1,7 @@
 const { dom } = require('aria-query');
 const { isNativeElement } = require('../utils/is-native-element');
 const { isHtmlInteractiveContent } = require('../utils/html-interactive-content');
+const { getStaticAttrValue } = require('../utils/static-attr-value');
 
 const KEYBOARD_EVENT_NAMES = new Set(['keydown', 'keyup', 'keypress']);
 
@@ -21,33 +22,20 @@ function getTextAttrValue(node, attrName) {
   return getAttrTextValue(findAttr(node, attrName));
 }
 
-// True iff the attribute's mustache value is the literal boolean `true` —
-// e.g. `aria-hidden={{true}}`. Any other expression (path reference, helper
-// call, etc.) is left to runtime and not treated as 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;
-}
-
 function isHiddenFromScreenReader(node) {
   const ariaHidden = findAttr(node, 'aria-hidden');
   if (ariaHidden) {
     // WAI-ARIA 1.2: aria-hidden is NOT a boolean HTML attribute. Only the
     // string value "true" hides the element. A valueless attribute or an
     // empty string is invalid and must NOT be treated as hiding the element.
-    if (ariaHidden.value?.type === 'GlimmerTextNode') {
-      const chars = ariaHidden.value.chars;
-      if (chars.trim().toLowerCase() === 'true') {
-        return true;
-      }
-    }
-    // Mustache-literal `{{true}}` — unambiguous static escape hatch. Any
-    // other mustache shape (path reference, helper invocation) is dynamic
-    // and intentionally NOT treated as hidden.
-    if (isMustacheLiteralTrue(ariaHidden)) {
+    //
+    // getStaticAttrValue resolves GlimmerTextNode, GlimmerMustacheStatement
+    // with a literal path (boolean/string), and GlimmerConcatStatement whose
+    // parts are all static — covering aria-hidden="TRUE", aria-hidden={{true}},
+    // aria-hidden={{"true"}}, and aria-hidden="{{true}}". Dynamic expressions
+    // return undefined and are intentionally not treated as hidden.
+    const resolved = getStaticAttrValue(ariaHidden.value);
+    if (resolved !== undefined && resolved.trim().toLowerCase() === 'true') {
       return true;
     }
   }
@@ -109,7 +97,7 @@ module.exports = {
     schema: [],
     messages: {
       needsKeyEvent:
-        'Visible, non-interactive elements with click handlers must have at least one keyboard listener (keydown/keyup/keypress).',
+        'Non-interactive elements with click handlers must have at least one keyboard listener (keydown/keyup/keypress).',
     },
   },
 
@@ -149,12 +137,14 @@ module.exports = {
         // Elements outside HTML §3.2.5.2.7 that are nonetheless ARIA widgets
         // or conventionally interactive surfaces — click-without-key on them
         // isn't what this rule targets. The HTML-content-model util covers
-        // the spec-normative list; these are the ARIA-widget / convention
-        // additions (see `html-interactive-content.js` docstring for why the
-        // two authorities diverge).
+        // the spec-normative list; these are explicit exemptions for elements
+        // that do not qualify as interactive content under the HTML spec but
+        // are carved out here due to their ARIA roles or browser-native
+        // behavior (see `html-interactive-content.js` docstring for context).
         //   - <canvas>: drawing/game surface (axobject-query: CanvasRole).
-        //   - <option>: ARIA role="option" (widget).
-        //   - <datalist>: ARIA role="listbox" (widget).
+        //   - <option>: ARIA role="option" (widget), but not keyboard-activatable
+        //     as a standalone element — exempted as a special case.
+        //   - <datalist>: ARIA role="listbox" (widget), same rationale as <option>.
         const lowerTag = node.tag.toLowerCase();
         if (lowerTag === 'canvas' || lowerTag === 'option' || lowerTag === 'datalist') {
           return;

tests/lib/rules/template-click-events-have-key-events.js

@@ -23,13 +23,21 @@ ruleTester.run('template-click-events-have-key-events', rule, {
     '<template><select {{on "click" this.onClick}}></select></template>',
     '<template><textarea {{on "click" this.onClick}}></textarea></template>',
     '<template><summary {{on "click" this.noop}}>More</summary></template>',
+
+    // <option>/<datalist> are widget descendants — keyboard activation lives on
+    // their host (<select>/<input list>), not on the descendant itself, so the
+    // rule explicitly skips them rather than treating them as "keyboard built in".
     '<template><option {{on "click" this.h}}>Foo</option></template>',
     '<template><datalist {{on "click" this.h}}></datalist></template>',
 
     // Hidden from AT.
     '<template><div aria-hidden="true" {{on "click" this.noop}}></div></template>',
     // Mustache-literal boolean `true` — explicit static opt-out.
     '<template><div aria-hidden={{true}} {{on "click" this.noop}}></div></template>',
+    // Mustache string-literal "TRUE" (case-insensitive) — also static opt-out.
+    '<template><div aria-hidden={{"TRUE"}} {{on "click" this.noop}}></div></template>',
+    // GlimmerConcatStatement form (quoted-mustache with single boolean-literal part).
+    '<template><div aria-hidden="{{true}}" {{on "click" this.noop}}></div></template>',
     '<template><div hidden {{on "click" this.noop}}></div></template>',
 
     // Presentation role — content has no semantics for AT.