fix: exclude canvas, and audio/video without controls, from interactive tags

Tighten the interactive-element derivation to mirror jsx-a11y's layered
approach: aria-query's elementRoles (with attribute constraints) is the
primary signal, axobject-query is only a fallback for tags with no
interactive elementRoles entry.

Deviations for common real-world false positives:
- canvas is excluded from the AX fallback — its AXObject is widget-typed
  but aria-query assigns it no inherent ARIA role, and authors
  legitimately use role="img" / role="presentation" on it.
- audio / video are only treated as interactive when the controls
  attribute is present, matching user-facing-widget reality.

Adds tests for: canvas with role=img/presentation/none (valid); audio
and video without controls + non-interactive role (valid); audio and
video with controls + role=presentation (invalid). Existing tr/td/th/
button/input/a[href] tests unchanged.

Author: johanrd

docs/rules/template-no-interactive-element-to-noninteractive-role.md

@@ -4,7 +4,14 @@
 
 Disallow native interactive elements from being assigned non-interactive ARIA roles.
 
-Assigning a non-interactive role to a native interactive element (e.g. `<button role="heading">`) strips the element's built-in keyboard, focus, and activation semantics — leaving users with a broken widget. The [first rule of ARIA use](https://www.w3.org/TR/html-aria/#rule1) says don't use ARIA if native semantics already cover the job; this rule enforces the related corollary.
+Assigning a non-interactive role to a native interactive element (e.g. `<button role="heading">`) strips the element's built-in keyboard, focus, and activation semantics — leaving users with a broken widget. The [first rule of ARIA use](https://www.w3.org/TR/using-aria/#rule1) says don't use ARIA if native semantics already cover the job; this rule enforces the related corollary.
+
+The interactive-element set is derived in layers, mirroring [jsx-a11y's `isInteractiveElement`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/src/util/isInteractiveElement.js): aria-query's `elementRoles` (with its attribute constraints, e.g. `<a href>`, `<input type="…">`, `<select multiple>`) is the primary signal; axobject-query's AX-tree mapping is consulted only as a fallback for tags that have no interactive `elementRoles` entry.
+
+Two deviations for real-world false-positive patterns:
+
+- `<canvas>` is **not** treated as inherently interactive. Its AXObject is widget-typed but aria-query assigns it no inherent role; authors legitimately set `role="img"` or `role="presentation"` on canvases.
+- `<audio>` and `<video>` are only interactive when the `controls` attribute is present. Without it they render no user-operable UI (e.g. background / decorative media).
 
 ## Examples
 
@@ -32,5 +39,5 @@ This rule **allows** the following:
 ## References
 
 - [WAI-ARIA 1.2 — Role taxonomy](https://www.w3.org/TR/wai-aria-1.2/#roles_categorization)
-- [HTML-AAM — Rule 1 of ARIA](https://www.w3.org/TR/html-aria/#rule1)
+- [Using ARIA — Rule 1](https://www.w3.org/TR/using-aria/#rule1)
 - [`no-interactive-element-to-noninteractive-role` — eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-interactive-element-to-noninteractive-role.md)

lib/rules/template-no-interactive-element-to-noninteractive-role.js

@@ -1,48 +1,154 @@
-const { roles } = require('aria-query');
+const { roles, elementRoles } = require('aria-query');
 const { AXObjects, elementAXObjects } = require('axobject-query');
 const { INTERACTIVE_ROLES } = require('../utils/interactive-roles');
 
-// Native elements with inherent interactive semantics per axobject-query —
-// elements whose AXObjects include a widget type. This is the same data source
-// jsx-a11y, @angular-eslint/template, and lit-a11y use. `<a>` is handled
-// separately because it's only interactive when `href` is present.
-const INHERENTLY_INTERACTIVE_TAGS = buildInteractiveTagSet();
-
-function buildInteractiveTagSet() {
-  const interactiveAXObjects = new Set(
-    [...AXObjects.keys()].filter((name) => AXObjects.get(name).type === 'widget')
-  );
-  const tags = new Set();
-  for (const [schema, axObjectsArr] of elementAXObjects) {
-    // Only consider elements with no attribute constraints — unconditionally
-    // interactive by element type (separately handles <a href>).
+// Interactive-element derivation. Mirrors jsx-a11y's layered approach:
+//   1. Primary signal — aria-query's `elementRoles`: an element is inherently
+//      interactive if one of its mapped roles is in INTERACTIVE_ROLES AND the
+//      schema's attribute constraints match the node. (Handles <button>, <a
+//      href>, <input type=…>, <select multiple>, <td>, <th scope=…>, <tr>,
+//      <textarea>, <datalist>, <option>.)
+//   2. AX-tree fallback — axobject-query's `elementAXObjects`: consulted only
+//      for tag names that have NO interactive `elementRoles` entry. These are
+//      elements whose AXObject is a widget but aria-query lists no inherent
+//      ARIA role (e.g. <summary>, <menuitem>, <embed>).
+//
+// Deviations from jsx-a11y, driven by real-world false-positive patterns:
+//   - `<canvas>` is NOT treated as inherently interactive. Its AXObject is
+//     `CanvasRole` (widget), but per aria-query `<canvas>` has no inherent
+//     ARIA role — authors commonly set `role="img"` or `role="presentation"`
+//     as the accessibility surface, and that is legitimate.
+//   - `<audio>` and `<video>` are only treated as interactive when the
+//     `controls` attribute is present. Without `controls` they render no
+//     user-operable UI (background / decorative media is a common real
+//     pattern). axobject-query does not encode this constraint; we add it
+//     here explicitly.
+
+const interactiveRoleSet = INTERACTIVE_ROLES;
+
+const elementRoleEntries = [...elementRoles];
+
+// Schemas (element name + attribute constraints) whose role list contains at
+// least one interactive role.
+const interactiveElementRoleSchemas = elementRoleEntries
+  .filter(([, rolesArr]) => [...rolesArr].some((r) => interactiveRoleSet.has(r)))
+  .map(([schema]) => schema);
+
+const tagsWithInteractiveElementRoleEntry = new Set(
+  interactiveElementRoleSchemas.map((schema) => schema.name)
+);
+
+// AX-fallback tag set — tags whose AXObject list is entirely widget AND which
+// have no interactive `elementRoles` entry. Excludes `canvas` per rationale
+// above.
+const EXCLUDED_AX_FALLBACK_TAGS = new Set(['canvas']);
+
+// Tags where we require explicit attribute constraints before treating as
+// interactive — overrides the unconstrained AX fallback.
+const CONTROLS_GATED_TAGS = new Set(['audio', 'video']);
+
+const interactiveAXObjects = new Set(
+  [...AXObjects.keys()].filter((name) => AXObjects.get(name).type === 'widget')
+);
+
+const AX_FALLBACK_TAGS = (() => {
+  const result = new Set();
+  for (const [schema, axArr] of elementAXObjects) {
     if (schema.attributes && schema.attributes.length > 0) {
       continue;
     }
-    if ([...axObjectsArr].some((o) => interactiveAXObjects.has(o))) {
-      tags.add(schema.name);
+    const name = schema.name;
+    if (tagsWithInteractiveElementRoleEntry.has(name)) {
+      continue;
+    }
+    if (EXCLUDED_AX_FALLBACK_TAGS.has(name)) {
+      continue;
+    }
+    if (CONTROLS_GATED_TAGS.has(name)) {
+      continue; // handled via explicit controls check
+    }
+    if ([...axArr].every((o) => interactiveAXObjects.has(o))) {
+      result.add(name);
     }
   }
-  return tags;
-}
+  return result;
+})();
 
 function findAttr(node, name) {
   return node.attributes?.find((a) => a.name === name);
 }
 
+function hasAttr(node, name) {
+  return Boolean(findAttr(node, name));
+}
+
 function getTextAttrValue(attr) {
   if (attr?.value?.type === 'GlimmerTextNode') {
     return attr.value.chars;
   }
   return undefined;
 }
 
+// Verify a single aria-query attribute-constraint entry matches the node.
+function attrConstraintMatches(baseAttr, node) {
+  const attr = findAttr(node, baseAttr.name);
+  const constraints = baseAttr.constraints || [];
+
+  if (constraints.includes('set')) {
+    return Boolean(attr);
+  }
+  if (constraints.includes('undefined')) {
+    if (!attr) {
+      return true;
+    }
+    // For boolean-present attributes (no value) we treat the presence as "set".
+    // Otherwise check value against any literal value constraint below.
+  }
+
+  if (baseAttr.value !== undefined) {
+    const value = getTextAttrValue(attr);
+    if (value === undefined) {
+      return false;
+    }
+    return value === baseAttr.value;
+  }
+
+  // Attribute named without a value or constraint — match means present.
+  return Boolean(attr);
+}
+
+function attributesMatchSchema(schema, node) {
+  const baseAttrs = schema.attributes || [];
+  if (baseAttrs.length === 0) {
+    return true;
+  }
+  return baseAttrs.every((baseAttr) => attrConstraintMatches(baseAttr, node));
+}
+
 function isInteractiveElement(node) {
   const tag = node.tag?.toLowerCase();
   if (!tag) {
     return false;
   }
-  if (INHERENTLY_INTERACTIVE_TAGS.has(tag)) {
+
+  // Tag not in DOM per aria-query — treat as component (conservatively skip).
+  // aria-query's `dom` map covers HTML element names; unknown tag = not ours.
+  // (We don't import `dom` separately — `elementRoles` / AX maps cover the
+  // element-name surface for the rule's purpose, and unknown tags simply fail
+  // every schema match below.)
+
+  // Primary signal: elementRoles with at least one interactive role + schema
+  // constraints match the node's attributes.
+  for (const schema of interactiveElementRoleSchemas) {
+    if (schema.name !== tag) {
+      continue;
+    }
+    if (!attributesMatchSchema(schema, node)) {
+      continue;
+    }
+    // Special case: <input type="hidden"> is never user-facing. aria-query's
+    // textbox entry would not match (it requires type=text/email/url/…), so
+    // normally we'd be fine — but keep the explicit guard for clarity.
     if (tag === 'input') {
       const type = getTextAttrValue(findAttr(node, 'type'));
       if (type === 'hidden') {
@@ -51,9 +157,18 @@ function isInteractiveElement(node) {
     }
     return true;
   }
-  if (tag === 'a' && findAttr(node, 'href')) {
+
+  // AX-tree fallback for tags with no interactive elementRoles entry.
+  if (AX_FALLBACK_TAGS.has(tag)) {
     return true;
   }
+
+  // Controls-gated fallback for <audio>/<video>: only interactive when the
+  // `controls` attribute is present (matches user-facing-widget reality).
+  if (CONTROLS_GATED_TAGS.has(tag) && hasAttr(node, 'controls')) {
+    return true;
+  }
+
   return false;
 }
 
@@ -99,7 +214,7 @@ module.exports = {
           return;
         }
 
-        // Pick the first token that's a known role (matching ARIA 1.2 §5.4
+        // Pick the first token that's a known role (matching ARIA 1.2 §5.3
         // role-fallback behavior — UAs use the first recognised role).
         for (const token of tokens) {
           if (token === 'presentation' || token === 'none') {

tests/lib/rules/template-no-interactive-element-to-noninteractive-role.js

@@ -38,6 +38,19 @@ ruleTester.run('template-no-interactive-element-to-noninteractive-role', rule, {
 
     // <a> without href is not interactive.
     '<template><a role="heading">Not a link</a></template>',
+
+    // <canvas> is not treated as inherently interactive — authors commonly
+    // use it as an accessibility surface with role="img" or role="presentation".
+    '<template><canvas role="img">Chart</canvas></template>',
+    '<template><canvas role="presentation"></canvas></template>',
+    '<template><canvas role="none"></canvas></template>',
+
+    // <video>/<audio> without `controls` render no user-operable UI — treat
+    // as non-interactive. Decorative background media is a common pattern.
+    '<template><video role="presentation" src="/x.mp4" /></template>',
+    '<template><audio role="presentation" src="/x.mp3" /></template>',
+    '<template><video role="img" src="/x.mp4" /></template>',
+    '<template><audio role="img" src="/x.mp3" /></template>',
   ],
   invalid: [
     {
@@ -78,6 +91,18 @@ ruleTester.run('template-no-interactive-element-to-noninteractive-role', rule, {
       output: null,
       errors: [{ messageId: 'mismatch' }],
     },
+    // <video controls> / <audio controls> exposes user-operable playback UI —
+    // stripping interactive semantics with a non-interactive role is wrong.
+    {
+      code: '<template><video controls role="presentation" src="/x.mp4" /></template>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+    {
+      code: '<template><audio controls role="presentation" src="/x.mp3" /></template>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
   ],
 });
 
@@ -92,6 +117,8 @@ hbsRuleTester.run('template-no-interactive-element-to-noninteractive-role', rule
     '<div role="article">Story</div>',
     '<button>Click</button>',
     '<CustomBtn role="article" />',
+    '<canvas role="img">Chart</canvas>',
+    '<video role="presentation" src="/x.mp4" />',
   ],
   invalid: [
     {
@@ -104,5 +131,10 @@ hbsRuleTester.run('template-no-interactive-element-to-noninteractive-role', rule
       output: null,
       errors: [{ messageId: 'mismatch' }],
     },
+    {
+      code: '<video controls role="presentation" src="/x.mp4" />',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
   ],
 });