fix: treat <audio/video controls> and <object> as interactive for tabindex check

Author: johanrd

lib/rules/template-no-noninteractive-tabindex.js

@@ -89,6 +89,17 @@ function isInteractiveElement(node) {
   if (tag === 'a' && findAttr(node, 'href')) {
     return true;
   }
+  // <audio>/<video> expose interactive UI only when `controls` is present.
+  // Matches template-no-invalid-interactive.
+  if ((tag === 'audio' || tag === 'video') && findAttr(node, 'controls')) {
+    return true;
+  }
+  // <object> maps to an embedded-widget role (axobject-query treats embedded
+  // content as a widget); authors legitimately put tabindex on it to include
+  // plugin content in the tab order.
+  if (tag === 'object') {
+    return true;
+  }
   return false;
 }
 

tests/lib/rules/template-no-noninteractive-tabindex.js

@@ -20,6 +20,13 @@ ruleTester.run('template-no-noninteractive-tabindex', rule, {
     '<template><input tabindex="-1" /></template>',
     '<template><select tabindex="0"></select></template>',
 
+    // <audio>/<video> with `controls` render an interactive UI.
+    '<template><audio controls tabindex="0"></audio></template>',
+    '<template><video controls tabindex="0"></video></template>',
+
+    // <object> is a widget per axobject-query — allow tabindex.
+    '<template><object tabindex="0"></object></template>',
+
     // Non-interactive element made interactive via role.
     '<template><div role="button" tabindex="0"></div></template>',
     '<template><div role="checkbox" tabindex="0" aria-checked="false"></div></template>',
@@ -70,6 +77,17 @@ ruleTester.run('template-no-noninteractive-tabindex', rule, {
       output: null,
       errors: [{ messageId: 'noNonInteractiveTabindex' }],
     },
+    // <audio>/<video> without `controls` have no interactive UI — still flag.
+    {
+      code: '<template><audio tabindex="0"></audio></template>',
+      output: null,
+      errors: [{ messageId: 'noNonInteractiveTabindex' }],
+    },
+    {
+      code: '<template><video tabindex="0"></video></template>',
+      output: null,
+      errors: [{ messageId: 'noNonInteractiveTabindex' }],
+    },
   ],
 });