From 89a6f1db7ca2ad2c792e6d9fb8ac57c5fbbc905d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Mon, 27 Apr 2026 21:26:30 +0200
Subject: [PATCH 1/2] feat: add
 template-no-noninteractive-element-to-interactive-role

---
 README.md                                     |  69 +++----
 ...interactive-element-to-interactive-role.md |  49 +++++
 ...interactive-element-to-interactive-role.js | 188 ++++++++++++++++++
 lib/utils/interactive-roles.js                |  32 +--
 ...interactive-element-to-interactive-role.js | 184 +++++++++++++++++
 5 files changed, 462 insertions(+), 60 deletions(-)
 create mode 100644 docs/rules/template-no-noninteractive-element-to-interactive-role.md
 create mode 100644 lib/rules/template-no-noninteractive-element-to-interactive-role.js
 create mode 100644 tests/lib/rules/template-no-noninteractive-element-to-interactive-role.js

diff --git a/README.md b/README.md
index 406ed89301..9001e0437d 100644
--- a/README.md
+++ b/README.md
@@ -256,40 +256,41 @@ To disable a rule for an entire `.gjs`/`.gts` file, use a regular ESLint file-le
 
 ### Accessibility
 
-| Name                                                                                                             | Description                                                                      | 💼 | 🔧 | 💡 |
-| :--------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------- | :- | :- | :- |
-| [template-link-href-attributes](docs/rules/template-link-href-attributes.md)                                     | require href attribute on link elements                                          | 📋 |    |    |
-| [template-no-abstract-roles](docs/rules/template-no-abstract-roles.md)                                           | disallow abstract ARIA roles                                                     | 📋 |    |    |
-| [template-no-accesskey-attribute](docs/rules/template-no-accesskey-attribute.md)                                 | disallow accesskey attribute                                                     | 📋 | 🔧 |    |
-| [template-no-aria-hidden-body](docs/rules/template-no-aria-hidden-body.md)                                       | disallow aria-hidden on body element                                             | 📋 | 🔧 |    |
-| [template-no-aria-unsupported-elements](docs/rules/template-no-aria-unsupported-elements.md)                     | disallow ARIA roles, states, and properties on elements that do not support them | 📋 |    |    |
-| [template-no-autofocus-attribute](docs/rules/template-no-autofocus-attribute.md)                                 | disallow autofocus attribute                                                     | 📋 | 🔧 |    |
-| [template-no-duplicate-landmark-elements](docs/rules/template-no-duplicate-landmark-elements.md)                 | disallow duplicate landmark elements without unique labels                       | 📋 |    |    |
-| [template-no-empty-headings](docs/rules/template-no-empty-headings.md)                                           | disallow empty heading elements                                                  | 📋 |    |    |
-| [template-no-heading-inside-button](docs/rules/template-no-heading-inside-button.md)                             | disallow heading elements inside button elements                                 | 📋 |    |    |
-| [template-no-invalid-aria-attributes](docs/rules/template-no-invalid-aria-attributes.md)                         | disallow invalid aria-* attributes                                               | 📋 |    |    |
-| [template-no-invalid-interactive](docs/rules/template-no-invalid-interactive.md)                                 | disallow non-interactive elements with interactive handlers                      | 📋 |    |    |
-| [template-no-invalid-link-text](docs/rules/template-no-invalid-link-text.md)                                     | disallow invalid or uninformative link text content                              | 📋 |    |    |
-| [template-no-invalid-link-title](docs/rules/template-no-invalid-link-title.md)                                   | disallow invalid title attributes on link elements                               | 📋 |    |    |
-| [template-no-invalid-role](docs/rules/template-no-invalid-role.md)                                               | disallow invalid ARIA roles                                                      | 📋 |    |    |
-| [template-no-nested-interactive](docs/rules/template-no-nested-interactive.md)                                   | disallow nested interactive elements                                             | 📋 |    |    |
-| [template-no-nested-landmark](docs/rules/template-no-nested-landmark.md)                                         | disallow nested landmark elements                                                | 📋 |    |    |
-| [template-no-pointer-down-event-binding](docs/rules/template-no-pointer-down-event-binding.md)                   | disallow pointer down event bindings                                             | 📋 |    |    |
-| [template-no-positive-tabindex](docs/rules/template-no-positive-tabindex.md)                                     | disallow positive tabindex values                                                | 📋 |    |    |
-| [template-no-redundant-role](docs/rules/template-no-redundant-role.md)                                           | disallow redundant role attributes                                               | 📋 | 🔧 |    |
-| [template-no-unsupported-role-attributes](docs/rules/template-no-unsupported-role-attributes.md)                 | disallow ARIA attributes that are not supported by the element role              | 📋 | 🔧 |    |
-| [template-no-whitespace-within-word](docs/rules/template-no-whitespace-within-word.md)                           | disallow excess whitespace within words (e.g. "W e l c o m e")                   | 📋 |    |    |
-| [template-require-aria-activedescendant-tabindex](docs/rules/template-require-aria-activedescendant-tabindex.md) | require non-interactive elements with aria-activedescendant to have tabindex     | 📋 | 🔧 |    |
-| [template-require-context-role](docs/rules/template-require-context-role.md)                                     | require ARIA roles to be used in appropriate context                             | 📋 |    |    |
-| [template-require-iframe-title](docs/rules/template-require-iframe-title.md)                                     | require iframe elements to have a title attribute                                | 📋 |    |    |
-| [template-require-input-label](docs/rules/template-require-input-label.md)                                       | require label for form input elements                                            | 📋 |    |    |
-| [template-require-lang-attribute](docs/rules/template-require-lang-attribute.md)                                 | require lang attribute on html element                                           | 📋 |    |    |
-| [template-require-mandatory-role-attributes](docs/rules/template-require-mandatory-role-attributes.md)           | require mandatory ARIA attributes for ARIA roles                                 | 📋 |    |    |
-| [template-require-media-caption](docs/rules/template-require-media-caption.md)                                   | require captions for audio and video elements                                    | 📋 |    |    |
-| [template-require-presentational-children](docs/rules/template-require-presentational-children.md)               | require presentational elements to only contain presentational children          | 📋 |    |    |
-| [template-require-valid-alt-text](docs/rules/template-require-valid-alt-text.md)                                 | require valid alt text for images and other elements                             | 📋 |    |    |
-| [template-require-valid-form-groups](docs/rules/template-require-valid-form-groups.md)                           | require grouped form controls to have fieldset/legend or WAI-ARIA group labeling |    |    |    |
-| [template-table-groups](docs/rules/template-table-groups.md)                                                     | require table elements to use table grouping elements                            | 📋 |    |    |
+| Name                                                                                                                           | Description                                                                      | 💼 | 🔧 | 💡 |
+| :----------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------- | :- | :- | :- |
+| [template-link-href-attributes](docs/rules/template-link-href-attributes.md)                                                   | require href attribute on link elements                                          | 📋 |    |    |
+| [template-no-abstract-roles](docs/rules/template-no-abstract-roles.md)                                                         | disallow abstract ARIA roles                                                     | 📋 |    |    |
+| [template-no-accesskey-attribute](docs/rules/template-no-accesskey-attribute.md)                                               | disallow accesskey attribute                                                     | 📋 | 🔧 |    |
+| [template-no-aria-hidden-body](docs/rules/template-no-aria-hidden-body.md)                                                     | disallow aria-hidden on body element                                             | 📋 | 🔧 |    |
+| [template-no-aria-unsupported-elements](docs/rules/template-no-aria-unsupported-elements.md)                                   | disallow ARIA roles, states, and properties on elements that do not support them | 📋 |    |    |
+| [template-no-autofocus-attribute](docs/rules/template-no-autofocus-attribute.md)                                               | disallow autofocus attribute                                                     | 📋 | 🔧 |    |
+| [template-no-duplicate-landmark-elements](docs/rules/template-no-duplicate-landmark-elements.md)                               | disallow duplicate landmark elements without unique labels                       | 📋 |    |    |
+| [template-no-empty-headings](docs/rules/template-no-empty-headings.md)                                                         | disallow empty heading elements                                                  | 📋 |    |    |
+| [template-no-heading-inside-button](docs/rules/template-no-heading-inside-button.md)                                           | disallow heading elements inside button elements                                 | 📋 |    |    |
+| [template-no-invalid-aria-attributes](docs/rules/template-no-invalid-aria-attributes.md)                                       | disallow invalid aria-* attributes                                               | 📋 |    |    |
+| [template-no-invalid-interactive](docs/rules/template-no-invalid-interactive.md)                                               | disallow non-interactive elements with interactive handlers                      | 📋 |    |    |
+| [template-no-invalid-link-text](docs/rules/template-no-invalid-link-text.md)                                                   | disallow invalid or uninformative link text content                              | 📋 |    |    |
+| [template-no-invalid-link-title](docs/rules/template-no-invalid-link-title.md)                                                 | disallow invalid title attributes on link elements                               | 📋 |    |    |
+| [template-no-invalid-role](docs/rules/template-no-invalid-role.md)                                                             | disallow invalid ARIA roles                                                      | 📋 |    |    |
+| [template-no-nested-interactive](docs/rules/template-no-nested-interactive.md)                                                 | disallow nested interactive elements                                             | 📋 |    |    |
+| [template-no-nested-landmark](docs/rules/template-no-nested-landmark.md)                                                       | disallow nested landmark elements                                                | 📋 |    |    |
+| [template-no-noninteractive-element-to-interactive-role](docs/rules/template-no-noninteractive-element-to-interactive-role.md) | disallow non-interactive elements from being assigned interactive ARIA roles     |    |    |    |
+| [template-no-pointer-down-event-binding](docs/rules/template-no-pointer-down-event-binding.md)                                 | disallow pointer down event bindings                                             | 📋 |    |    |
+| [template-no-positive-tabindex](docs/rules/template-no-positive-tabindex.md)                                                   | disallow positive tabindex values                                                | 📋 |    |    |
+| [template-no-redundant-role](docs/rules/template-no-redundant-role.md)                                                         | disallow redundant role attributes                                               | 📋 | 🔧 |    |
+| [template-no-unsupported-role-attributes](docs/rules/template-no-unsupported-role-attributes.md)                               | disallow ARIA attributes that are not supported by the element role              | 📋 | 🔧 |    |
+| [template-no-whitespace-within-word](docs/rules/template-no-whitespace-within-word.md)                                         | disallow excess whitespace within words (e.g. "W e l c o m e")                   | 📋 |    |    |
+| [template-require-aria-activedescendant-tabindex](docs/rules/template-require-aria-activedescendant-tabindex.md)               | require non-interactive elements with aria-activedescendant to have tabindex     | 📋 | 🔧 |    |
+| [template-require-context-role](docs/rules/template-require-context-role.md)                                                   | require ARIA roles to be used in appropriate context                             | 📋 |    |    |
+| [template-require-iframe-title](docs/rules/template-require-iframe-title.md)                                                   | require iframe elements to have a title attribute                                | 📋 |    |    |
+| [template-require-input-label](docs/rules/template-require-input-label.md)                                                     | require label for form input elements                                            | 📋 |    |    |
+| [template-require-lang-attribute](docs/rules/template-require-lang-attribute.md)                                               | require lang attribute on html element                                           | 📋 |    |    |
+| [template-require-mandatory-role-attributes](docs/rules/template-require-mandatory-role-attributes.md)                         | require mandatory ARIA attributes for ARIA roles                                 | 📋 |    |    |
+| [template-require-media-caption](docs/rules/template-require-media-caption.md)                                                 | require captions for audio and video elements                                    | 📋 |    |    |
+| [template-require-presentational-children](docs/rules/template-require-presentational-children.md)                             | require presentational elements to only contain presentational children          | 📋 |    |    |
+| [template-require-valid-alt-text](docs/rules/template-require-valid-alt-text.md)                                               | require valid alt text for images and other elements                             | 📋 |    |    |
+| [template-require-valid-form-groups](docs/rules/template-require-valid-form-groups.md)                                         | require grouped form controls to have fieldset/legend or WAI-ARIA group labeling |    |    |    |
+| [template-table-groups](docs/rules/template-table-groups.md)                                                                   | require table elements to use table grouping elements                            | 📋 |    |    |
 
 ### Best Practices
 
diff --git a/docs/rules/template-no-noninteractive-element-to-interactive-role.md b/docs/rules/template-no-noninteractive-element-to-interactive-role.md
new file mode 100644
index 0000000000..b65f0f2a18
--- /dev/null
+++ b/docs/rules/template-no-noninteractive-element-to-interactive-role.md
@@ -0,0 +1,49 @@
+# ember/template-no-noninteractive-element-to-interactive-role
+
+<!-- end auto-generated rule header -->
+
+Disallow non-interactive HTML elements from being assigned interactive ARIA roles.
+
+Assigning an interactive role (`button`, `checkbox`, `menuitem`, ...) to an element with inherent non-interactive semantics (headings, landmarks, text structure, lists, tables, forms) creates a widget with no supporting behavior — focus, keyboard activation, and state handling must all be added manually, and the mismatch is easy to get wrong.
+
+## Scope
+
+The set of non-interactive elements is sourced from [`axobject-query`](https://github.com/A11yance/axobject-query) — the same AX-tree-derived data used by [`eslint-plugin-jsx-a11y`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y), [`@angular-eslint/eslint-plugin-template`](https://github.com/angular-eslint/angular-eslint), and others. It includes headings (`<h1>`–`<h6>`), landmarks (`<article>`, `<aside>`, `<nav>`, `<main>`, etc.), text structure (`<p>`, `<figure>`, `<blockquote>`, etc.), lists (`<ul>`, `<ol>`, `<li>`, `<dl>`, `<dt>`, `<dd>`), tables (`<table>`, `<tbody>`, `<tr>`, etc.), forms (`<form>`, `<fieldset>`, `<legend>`), `<img>`, and similar.
+
+`<div>` and `<span>` are not covered — ARIA 1.2 assigns them the `generic` role with no inherent semantics to mismatch. `<div role="button">` is covered by the related [`template-require-aria-activedescendant-tabindex`](./template-require-aria-activedescendant-tabindex.md) and [`template-no-noninteractive-tabindex`](./template-no-noninteractive-tabindex.md) rules.
+
+## Examples
+
+This rule **forbids** the following:
+
+```gjs
+<template>
+  <h1 role="button">Click</h1>
+  <article role="button">Story</article>
+  <li role="tab">Tab</li>
+  <img role="link" src="/x.png" alt="link" />
+  <form role="checkbox"></form>
+  <p role="button">Click me</p>
+</template>
+```
+
+This rule **allows** the following:
+
+```gjs
+<template>
+  <h1 role="heading" aria-level="1">Title</h1>
+  <article role="article">Story</article>
+  <ul role="list"></ul>
+
+  {{! <div>/<span> are "generic" — not covered by this rule }}
+  <div role="button" tabindex="0"></div>
+  <span role="checkbox" aria-checked="false" tabindex="0"></span>
+</template>
+```
+
+## References
+
+- [WAI-ARIA 1.2 — Role taxonomy](https://www.w3.org/TR/wai-aria-1.2/#roles_categorization)
+- [HTML-AAM — Element role mappings](https://www.w3.org/TR/html-aam-1.0/)
+- [`axobject-query`](https://github.com/A11yance/axobject-query) — the shared data package used by every major a11y ESLint plugin
+- [`no-noninteractive-element-to-interactive-role` — eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-noninteractive-element-to-interactive-role.md)
diff --git a/lib/rules/template-no-noninteractive-element-to-interactive-role.js b/lib/rules/template-no-noninteractive-element-to-interactive-role.js
new file mode 100644
index 0000000000..4ea403bfbd
--- /dev/null
+++ b/lib/rules/template-no-noninteractive-element-to-interactive-role.js
@@ -0,0 +1,188 @@
+const { elementRoles, roles } = require('aria-query');
+const { AXObjects, elementAXObjects } = require('axobject-query');
+const { INTERACTIVE_ROLES } = require('../utils/interactive-roles');
+const { isNativeElement } = require('../utils/is-native-element');
+
+// Elements with inherent non-interactive accessibility-tree semantics. We
+// union two derivations to match jsx-a11y's `isNonInteractiveElement`
+// (src/util/isNonInteractiveElement.js), which consults both aria-query's
+// elementRoles and axobject-query's elementAXObjects:
+//
+//   1. aria-query elementRoles: tags that map to at least one non-interactive
+//      role (neither a widget descendant nor `generic`) and never to an
+//      interactive role. Covers HTML-AAM mappings that axobject-query doesn't
+//      (e.g. `section` → `region`, `fieldset` → `group`, `code`/`em`/`strong`
+//      → `code`/`emphasis`/`strong`, `tbody`/`tfoot`/`thead` → `rowgroup`).
+//
+//   2. axobject-query elementAXObjects: tags whose AXObjects are exclusively
+//      `window`/`structure` (no `widget` participants). Covers tags without
+//      an aria-query elementRoles mapping (`abbr`, `br`, `figcaption`,
+//      `iframe`, `label`, `legend`, `marquee`, `ruby`, `tr`, etc.).
+//
+// `header` is excluded: its mapping depends on nesting context (`banner` only
+// as direct child of body), which this rule cannot statically verify. This
+// matches jsx-a11y's explicit `if (tagName === 'header') return false` carve-
+// out in isNonInteractiveElement.js.
+const NON_INTERACTIVE_TAGS = buildNonInteractiveTagSet();
+
+function buildNonInteractiveTagSet() {
+  const tags = new Set();
+
+  // Derivation 1 — aria-query elementRoles.
+  const nonInteractiveAriaRoles = new Set();
+  for (const [role, def] of roles) {
+    if (def.abstract) {
+      continue;
+    }
+    // `generic` carries no semantics (WAI-ARIA 1.2 §5.3.3), so elements whose
+    // only role is `generic` (div/span/header/body/pre/q/samp/b/i/u/...) must
+    // not be classified as non-interactive — giving them any role is fine.
+    if (role === 'generic') {
+      continue;
+    }
+    const descendsFromWidget = (def.superClass || []).some((chain) => chain.includes('widget'));
+    if (!descendsFromWidget) {
+      nonInteractiveAriaRoles.add(role);
+    }
+  }
+  const tagsWithOnlyNonInteractiveRole = new Set();
+  const tagsWithAnyInteractiveRole = new Set();
+  for (const [schema, rolesSet] of elementRoles) {
+    const roleList = [...rolesSet];
+    if (roleList.length > 0 && roleList.every((r) => nonInteractiveAriaRoles.has(r))) {
+      tagsWithOnlyNonInteractiveRole.add(schema.name);
+    }
+    if (roleList.some((r) => INTERACTIVE_ROLES.has(r))) {
+      tagsWithAnyInteractiveRole.add(schema.name);
+    }
+  }
+  for (const tag of tagsWithOnlyNonInteractiveRole) {
+    if (!tagsWithAnyInteractiveRole.has(tag)) {
+      tags.add(tag);
+    }
+  }
+
+  // Derivation 2 — axobject-query elementAXObjects (unconstrained only).
+  const nonInteractiveAXObjects = new Set(
+    [...AXObjects.keys()].filter((name) =>
+      ['window', 'structure'].includes(AXObjects.get(name).type)
+    )
+  );
+  for (const [schema, axObjectsArr] of elementAXObjects) {
+    if (schema.attributes && schema.attributes.length > 0) {
+      continue;
+    }
+    if ([...axObjectsArr].every((o) => nonInteractiveAXObjects.has(o))) {
+      tags.add(schema.name);
+    }
+  }
+
+  // Exclude `header` — its role depends on ancestry (banner when direct child
+  // of body, generic otherwise). Matches jsx-a11y's carve-out.
+  tags.delete('header');
+
+  return tags;
+}
+
+// Element+role pairings that are valid by spec even though the element's
+// default ARIA role is non-interactive. Two authorities agree on this list:
+//
+//   1. ARIA in HTML §5 "Allowed descendants of ARIA roles" / the conformance
+//      table at https://www.w3.org/TR/html-aria/#docconformance — defines
+//      which non-default roles each HTML element may carry.
+//
+//   2. jsx-a11y :recommended `allowedInvalidRoles` config
+//      (eslint-plugin-jsx-a11y/src/index.js) — editorial distillation of the
+//      same spec table into the roles most commonly used in real apps.
+//
+// Row-by-row rationale (both authorities concur unless noted):
+//   ul/ol + menu/menubar/tablist/tree/treegrid/listbox/radiogroup:
+//     List repurposed as an ARIA composite widget container. WAI-ARIA APG
+//     navigation-menu, tree, tabs, and listbox patterns all use <ul>/<ol>.
+//   li + menuitem/menuitemcheckbox/menuitemradio/option/row/tab/treeitem:
+//     List item serving as a child of the composite widget above.
+//   table + grid:
+//     Data table promoted to an interactive ARIA grid (ARIA 1.2 §5.4).
+//   td + gridcell:
+//     Table cell inside an ARIA grid (aria-query also models this).
+//   fieldset + radiogroup:
+//     Fieldset semantically wrapping a radio group (jsx-a11y :recommended).
+const ALLOWED_ROLE_OVERRIDE = new Map([
+  ['ul', new Set(['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'])],
+  ['ol', new Set(['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'])],
+  [
+    'li',
+    new Set(['menuitem', 'menuitemcheckbox', 'menuitemradio', 'option', 'row', 'tab', 'treeitem']),
+  ],
+  ['table', new Set(['grid'])],
+  ['td', new Set(['gridcell'])],
+  ['fieldset', new Set(['radiogroup'])],
+]);
+
+function findAttr(node, name) {
+  return node.attributes?.find((a) => a.name === name);
+}
+
+function getRoleTokens(node) {
+  const attr = findAttr(node, 'role');
+  if (!attr || attr.value?.type !== 'GlimmerTextNode') {
+    return undefined;
+  }
+  const chars = attr.value.chars.trim();
+  if (!chars) {
+    return undefined;
+  }
+  return chars.toLowerCase().split(/\s+/u);
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow non-interactive elements from being assigned interactive ARIA roles',
+      category: 'Accessibility',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-noninteractive-element-to-interactive-role.md',
+      templateMode: 'both',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      mismatch:
+        'Non-interactive element <{{tag}}> should not have an interactive role "{{role}}". The native element contributes no interactive behavior to back the role.',
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode;
+    return {
+      GlimmerElementNode(node) {
+        if (!isNativeElement(node, sourceCode)) {
+          return;
+        }
+
+        const tag = node.tag?.toLowerCase();
+        if (!tag || !NON_INTERACTIVE_TAGS.has(tag)) {
+          return;
+        }
+
+        const tokens = getRoleTokens(node);
+        if (!tokens) {
+          return;
+        }
+
+        // Use the first recognised role (ARIA 1.2 §5.4 role-fallback).
+        for (const token of tokens) {
+          const def = roles.get(token);
+          if (!def || def.abstract) {
+            continue;
+          }
+          if (INTERACTIVE_ROLES.has(token) && !ALLOWED_ROLE_OVERRIDE.get(tag)?.has(token)) {
+            context.report({ node, messageId: 'mismatch', data: { tag: node.tag, role: token } });
+          }
+          return;
+        }
+      },
+    };
+  },
+};
diff --git a/lib/utils/interactive-roles.js b/lib/utils/interactive-roles.js
index 3814164154..e9930156d8 100644
--- a/lib/utils/interactive-roles.js
+++ b/lib/utils/interactive-roles.js
@@ -3,29 +3,19 @@
 const { roles } = require('aria-query');
 
 // Interactive ARIA roles — concrete roles whose taxonomy descends from `widget`
-// in aria-query. This is the same derivation jsx-a11y uses (the canonical
-// peer-plugin behavior here):
+// in aria-query. This is the same derivation jsx-a11y and lit-a11y use (they
+// define the canonical peer-plugin behavior here):
 //   https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/src/util/isInteractiveRole.js
-//
-// Authority: aria-query widget taxonomy, one manual addition, one manual
-// exclusion. Both documented below.
+//   https://github.com/open-wc/open-wc/blob/main/packages/eslint-plugin-lit-a11y/lib/utils/isInteractiveElement.js
 //
 // `toolbar` is added explicitly — it does not descend from `widget` per
-// aria-query's taxonomy (its superClass is structure-based), but supports
-// `aria-activedescendant` and is widget-like in practice per WAI-ARIA APG's
-// toolbar pattern. jsx-a11y adds it for the same reason.
+// aria-query's taxonomy, but supports `aria-activedescendant` and is widget-
+// like in practice. jsx-a11y and lit-a11y add it for the same reason.
 //
 // `tooltip` is intentionally NOT added. Per WAI-ARIA 1.2 §5.3.3 — Document
 // Structure Roles (https://www.w3.org/TR/wai-aria-1.2/#tooltip), tooltip is
 // a document-structure role, not a widget; the spec says "document structures
-// are not usually interactive." jsx-a11y agrees.
-//
-// `progressbar` IS included (it descends from widget → range per aria-query).
-// lit-a11y explicitly excludes it on the grounds that `progressbar.value` is
-// always readonly, so the role isn't operable by the user. This is a real
-// design disagreement; we side with aria-query's taxonomy (and jsx-a11y) to
-// keep the authority single-sourced. Authors wanting lit-a11y behavior can
-// layer a rule-level exclusion if needed.
+// are not usually interactive." jsx-a11y and lit-a11y agree.
 module.exports.INTERACTIVE_ROLES = buildInteractiveRoleSet();
 
 // Composite-widget child map — for each composite-widget parent role, the
@@ -55,7 +45,6 @@ function buildInteractiveRoleSet() {
 }
 
 function buildCompositeWidgetChildren() {
-  // Collect each role's own `requiredOwnedElements` first.
   const own = new Map();
   for (const [role, def] of roles) {
     if (def.abstract) {
@@ -74,10 +63,6 @@ function buildCompositeWidgetChildren() {
     own.set(role, kids);
   }
 
-  // A role also legitimately owns whatever its ancestor roles in `superClass`
-  // own. This lets e.g. `treegrid` (superClass chains include `grid` and
-  // `tree`) inherit `row` from `grid` and `treeitem` from `tree`, matching
-  // the APG treegrid pattern.
   const direct = new Map();
   for (const [role, def] of roles) {
     if (def.abstract) {
@@ -99,7 +84,6 @@ function buildCompositeWidgetChildren() {
     }
   }
 
-  // Transitive closure: parent -> all roles reachable through owned-element chains.
   const closed = new Map();
   function expand(role, visited) {
     if (closed.has(role)) {
@@ -114,10 +98,6 @@ function buildCompositeWidgetChildren() {
     for (const child of kids) {
       out.add(child);
       if (!visited.has(child)) {
-        // Pass a fresh branch-specific visited set so sibling branches do not
-        // contaminate each other's traversal. A shared Set across branches
-        // makes memoized results order-dependent, because whether `child` is
-        // recursed into depends on which sibling ran first.
         for (const grandchild of expand(child, new Set([...visited, child]))) {
           out.add(grandchild);
         }
diff --git a/tests/lib/rules/template-no-noninteractive-element-to-interactive-role.js b/tests/lib/rules/template-no-noninteractive-element-to-interactive-role.js
new file mode 100644
index 0000000000..6eceb29af2
--- /dev/null
+++ b/tests/lib/rules/template-no-noninteractive-element-to-interactive-role.js
@@ -0,0 +1,184 @@
+'use strict';
+
+const rule = require('../../../lib/rules/template-no-noninteractive-element-to-interactive-role');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('template-no-noninteractive-element-to-interactive-role', rule, {
+  valid: [
+    // Non-interactive element with non-interactive role — fine.
+    '<template><h1 role="heading" aria-level="1">Title</h1></template>',
+    '<template><article role="article">Story</article></template>',
+    '<template><ul role="list"></ul></template>',
+
+    // <div>/<span> are "generic" in ARIA 1.2 — axobject-query doesn't list
+    // them as non-interactive, so the rule doesn't flag them.
+    '<template><div role="button" tabindex="0"></div></template>',
+    '<template><span role="checkbox" aria-checked="false" tabindex="0"></span></template>',
+
+    // Interactive element with interactive role — not in scope.
+    '<template><button role="menuitem">Item</button></template>',
+
+    // No role → nothing to check.
+    '<template><h1>Title</h1></template>',
+
+    // Dynamic role → skipped.
+    '<template><h1 role={{this.role}}>Title</h1></template>',
+
+    // Components — rule skips.
+    '<template><CustomHeading role="button" /></template>',
+
+    // Unknown role — rule skips.
+    '<template><h1 role="fakerole">Title</h1></template>',
+
+    // role="presentation"/"none" on non-interactive element — not flagged by
+    // this rule (separate concerns; see template-no-redundant-role etc.).
+    '<template><ul role="presentation"></ul></template>',
+
+    // ul/ol repurposed as ARIA composite widgets — WAI-ARIA APG patterns.
+    '<template><ul role="menu"></ul></template>',
+    '<template><ul role="menubar"></ul></template>',
+    '<template><ul role="tablist"></ul></template>',
+    '<template><ul role="tree"></ul></template>',
+    '<template><ol role="menu"></ol></template>',
+
+    // li serving as a widget child role.
+    '<template><li role="menuitem"></li></template>',
+    '<template><li role="tab"></li></template>',
+    '<template><li role="treeitem"></li></template>',
+
+    // table/td promoted to ARIA grid / gridcell.
+    '<template><table role="grid"></table></template>',
+    '<template><td role="gridcell"></td></template>',
+
+    // fieldset wrapping a radiogroup.
+    '<template><fieldset role="radiogroup"></fieldset></template>',
+
+    // PascalCase component whose lowercased name matches a non-interactive
+    // HTML tag — correctly skipped by isNativeElement / isComponentInvocation.
+    '<template><Article role="button" /></template>',
+    '<template><Form role="checkbox" /></template>',
+    '<template><Table role="grid" /></template>',
+  ],
+  invalid: [
+    {
+      code: '<template><h1 role="button">Click</h1></template>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+    {
+      code: '<template><article role="button">Story</article></template>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+    {
+      // li role="button" is NOT in the allowed-override set (only widget-child
+      // roles like tab/menuitem/treeitem/row are). Button on a list item is wrong.
+      code: '<template><li role="button">Click</li></template>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+    {
+      code: '<template><img role="link" src="/x.png" alt="link" /></template>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+    {
+      code: '<template><form role="checkbox"></form></template>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+    {
+      // <p> has role="paragraph" per HTML-AAM — flagging role="button" is
+      // correct. The <p> has no interactive behavior to back the role.
+      code: '<template><p role="button">Click me</p></template>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+    // Role-fallback list — picks the first recognised token.
+    {
+      code: '<template><h1 role="button heading">Click</h1></template>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+
+    // HTML-AAM-defined non-interactive tags captured via aria-query's
+    // elementRoles (augmenting the axobject-query derivation). See rule
+    // source for the two-layer derivation rationale.
+    {
+      code: '<template><section role="button" aria-label="Aardvark"></section></template>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+    {
+      code: '<template><fieldset role="checkbox"></fieldset></template>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+    {
+      code: '<template><aside role="tab">Aside</aside></template>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+    {
+      code: '<template><hr role="button" /></template>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+    {
+      code: '<template><strong role="menuitem">Bold</strong></template>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+    {
+      code: '<template><tbody role="button"></tbody></template>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+    // DIVERGENCE from jsx-a11y: <tr> is treated as conditionally interactive
+    // by jsx-a11y (valid when parent context is ambiguous), so <tr role="button">
+    // passes jsx-a11y. Our rule lists <tr> as non-interactive and flags.
+    {
+      code: '<template><tr role="button"></tr></template>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+    // DIVERGENCE from jsx-a11y: we lowercase role tokens before lookup, so
+    // uppercase role values are caught. jsx-a11y compares case-sensitively
+    // and treats "BUTTON" as an unknown role (no flag).
+    {
+      code: '<template><h1 role="BUTTON"></h1></template>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+  ],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+hbsRuleTester.run('template-no-noninteractive-element-to-interactive-role', rule, {
+  valid: [
+    '<div role="button" tabindex="0"></div>',
+    '<h1 role="heading">Title</h1>',
+    '<CustomHeading role="button" />',
+  ],
+  invalid: [
+    {
+      code: '<h1 role="button">Click</h1>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+    {
+      code: '<article role="tab">Story</article>',
+      output: null,
+      errors: [{ messageId: 'mismatch' }],
+    },
+  ],
+});

From 7c4fd4937eaa15bd05b2a33ec0519694fc3cfded Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Tue, 28 Apr 2026 09:55:19 +0200
Subject: [PATCH 2/2] 
 test(template-no-noninteractive-element-to-interactive-role): add header
 role=button carve-out test

---
 ...emplate-no-noninteractive-element-to-interactive-role.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/tests/lib/rules/template-no-noninteractive-element-to-interactive-role.js b/tests/lib/rules/template-no-noninteractive-element-to-interactive-role.js
index 6eceb29af2..7778ca626e 100644
--- a/tests/lib/rules/template-no-noninteractive-element-to-interactive-role.js
+++ b/tests/lib/rules/template-no-noninteractive-element-to-interactive-role.js
@@ -29,6 +29,12 @@ ruleTester.run('template-no-noninteractive-element-to-interactive-role', rule, {
     // Dynamic role → skipped.
     '<template><h1 role={{this.role}}>Title</h1></template>',
 
+    // <header> is deliberately excluded — its role depends on ancestry
+    // (`banner` when a direct child of <body>, `generic` otherwise), so the
+    // rule can't statically tell whether it's non-interactive. Matches
+    // jsx-a11y's `if (tagName === 'header') return false` carve-out.
+    '<template><header role="button">Click</header></template>',
+
     // Components — rule skips.
     '<template><CustomHeading role="button" /></template>',