Merge pull request #2651 from johanrd/night_fix/template-no-invalid-interactive

Post-merge-review: Fix `template-no-invalid-interactive`: align interactive element detection with upstream

Author: NullVoxPopuli

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

@@ -66,7 +66,6 @@ module.exports = {
     const ignoreUsemap = options.ignoreUsemap || false;
 
     const NATIVE_INTERACTIVE_ELEMENTS = new Set([
-      'a',
       'button',
       'canvas',
       'details',
@@ -75,6 +74,7 @@ module.exports = {
       'input',
       'label',
       'select',
+      'summary',
       'textarea',
     ]);
 
@@ -87,16 +87,20 @@ module.exports = {
       'menuitemradio',
       'option',
       'radio',
+      'scrollbar',
       'searchbox',
       'slider',
       'spinbutton',
       'switch',
       'tab',
       'textbox',
+      'tooltip',
+      'treeitem',
       'combobox',
       'gridcell',
     ]);
 
+    // eslint-disable-next-line complexity
     function isInteractive(node) {
       const tag = node.tag?.toLowerCase();
       if (!tag) {
@@ -106,6 +110,17 @@ module.exports = {
       if (additionalInteractiveTags.has(tag)) {
         return true;
       }
+
+      // <a> is only interactive when it has href
+      if (tag === 'a' && hasAttr(node, 'href')) {
+        return true;
+      }
+
+      // <audio>/<video> with controls attribute is interactive
+      if ((tag === 'audio' || tag === 'video') && hasAttr(node, 'controls')) {
+        return true;
+      }
+
       if (NATIVE_INTERACTIVE_ELEMENTS.has(tag)) {
         // Hidden input is not interactive
         if (tag === 'input') {
@@ -134,8 +149,8 @@ module.exports = {
         return true;
       }
 
-      // Check usemap
-      if (!ignoreUsemap && hasAttr(node, 'usemap')) {
+      // Check usemap (only on img/object)
+      if (!ignoreUsemap && (tag === 'img' || tag === 'object') && hasAttr(node, 'usemap')) {
         return true;
       }
 
@@ -158,8 +173,13 @@ module.exports = {
           return;
         }
 
-        // Skip components (PascalCase)
-        if (/^[A-Z]/.test(node.tag)) {
+        // Skip components (PascalCase, @-prefixed, this.-prefixed, path-based like foo.bar)
+        if (
+          /^[A-Z]/.test(node.tag) ||
+          node.tag.startsWith('@') ||
+          node.tag.startsWith('this.') ||
+          node.tag.includes('.')
+        ) {
           return;
         }
 

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

@@ -13,9 +13,10 @@ ruleTester.run('template-no-invalid-interactive', rule, {
       code: '<template><button onclick={{this.handleClick}}>Click</button></template>',
       output: null,
     },
+    // <a> with href is interactive
     {
       filename: 'test.gjs',
-      code: '<template><a onclick={{this.handleClick}}>Link</a></template>',
+      code: '<template><a href="/about" onclick={{this.handleClick}}>Link</a></template>',
       output: null,
     },
     {
@@ -62,6 +63,26 @@ ruleTester.run('template-no-invalid-interactive', rule, {
     '<template><video {{on "pause" this.onPause}}></video></template>',
     '<template><img {{action "foo" on="load"}}></template>',
     '<template><img {{action "foo" on="error"}}></template>',
+
+    // <summary> is natively interactive
+    '<template><summary onclick={{this.toggle}}>Details</summary></template>',
+
+    // ARIA widget roles: scrollbar, tooltip, treeitem
+    '<template><div role="scrollbar" onclick={{this.scroll}}>Scroll</div></template>',
+    '<template><div role="tooltip" onclick={{this.show}}>Tip</div></template>',
+    '<template><div role="treeitem" onclick={{this.select}}>Node</div></template>',
+
+    // audio/video with controls are interactive
+    '<template><audio controls onclick={{this.play}}></audio></template>',
+    '<template><video controls onclick={{this.play}}></video></template>',
+
+    // usemap only makes img/object interactive
+    '<template><img usemap="#map" onclick={{this.click}}></template>',
+
+    // Component invocations are skipped (not HTML elements)
+    '<template><@someComponent onclick={{this.click}} /></template>',
+    '<template><this.myComponent onclick={{this.click}} /></template>',
+    '<template><ns.SomeWidget onclick={{this.click}} /></template>',
   ],
 
   invalid: [
@@ -140,5 +161,29 @@ ruleTester.run('template-no-invalid-interactive', rule, {
       output: null,
       errors: [{ messageId: 'noInvalidInteractive' }],
     },
+    {
+      // usemap on non-img/object does NOT make the element interactive
+      code: '<template><div usemap="#map" onclick={{this.click}}>Content</div></template>',
+      output: null,
+      errors: [{ messageId: 'noInvalidInteractive' }],
+    },
+    {
+      // audio/video without controls is NOT interactive
+      code: '<template><audio onclick={{this.play}}></audio></template>',
+      output: null,
+      errors: [{ messageId: 'noInvalidInteractive' }],
+    },
+    {
+      // <a> without href is NOT interactive
+      filename: 'test.gjs',
+      code: '<template><a onclick={{this.handleClick}}>Link</a></template>',
+      output: null,
+      errors: [
+        {
+          messageId: 'noInvalidInteractive',
+          data: { tagName: 'a', handler: 'onclick' },
+        },
+      ],
+    },
   ],
 });