From c2393a8cb527d1049301c220522f6b2adc058556 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Mon, 27 Apr 2026 16:51:08 +0200
Subject: [PATCH] test(no-nested-interactive): add composite-widget hierarchy
 valid cases
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Covers the canonical ARIA composite-widget patterns driven by
COMPOSITE_WIDGET_CHILDREN (aria-query requiredOwnedElements — already on
master via lib/utils/interactive-roles.js): listbox>option, tablist>tab,
tree>treeitem, grid>row>gridcell/rowheader/columnheader, treegrid>row,
radiogroup>radio. Added to both the gts and hbs rule-tester runs.
---
 .../rules/template-no-nested-interactive.js   | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/tests/lib/rules/template-no-nested-interactive.js b/tests/lib/rules/template-no-nested-interactive.js
index 920fd789f3..e96d00b322 100644
--- a/tests/lib/rules/template-no-nested-interactive.js
+++ b/tests/lib/rules/template-no-nested-interactive.js
@@ -39,6 +39,18 @@ ruleTester.run('template-no-nested-interactive', rule, {
         Text
       </label>
     </template>`,
+    // Canonical ARIA composite-widget hierarchies — driven by aria-query's
+    // `requiredOwnedElements` (see lib/utils/interactive-roles.js). These are
+    // WAI-ARIA APG patterns and must not be flagged.
+    '<template><div role="listbox"><div role="option">A</div><div role="option">B</div></div></template>',
+    '<template><div role="tablist"><div role="tab">Tab 1</div><div role="tab">Tab 2</div></div></template>',
+    '<template><div role="tree"><div role="treeitem">Node</div></div></template>',
+    '<template><div role="grid"><div role="row"><div role="gridcell">Cell</div></div></div></template>',
+    '<template><div role="grid"><div role="row"><div role="rowheader">Header</div></div></div></template>',
+    '<template><div role="grid"><div role="row"><div role="columnheader">Header</div></div></div></template>',
+    '<template><div role="treegrid"><div role="row"><div role="gridcell">Cell</div></div></div></template>',
+    '<template><div role="radiogroup"><div role="radio">Opt 1</div></div></template>',
+
     // <audio>/<video> without `controls` are NOT interactive (no rendered UI, no focus).
     '<template><button><audio></audio></button></template>',
     '<template><button><video></video></button></template>',
@@ -357,6 +369,16 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
     // <audio>/<video> without `controls` are NOT interactive.
     '<button><audio></audio></button>',
     '<button><video></video></button>',
+
+    // Canonical ARIA composite-widget hierarchies.
+    '<div role="listbox"><div role="option">A</div><div role="option">B</div></div>',
+    '<div role="tablist"><div role="tab">Tab 1</div><div role="tab">Tab 2</div></div>',
+    '<div role="tree"><div role="treeitem">Node</div></div>',
+    '<div role="grid"><div role="row"><div role="gridcell">Cell</div></div></div>',
+    '<div role="grid"><div role="row"><div role="rowheader">Header</div></div></div>',
+    '<div role="grid"><div role="row"><div role="columnheader">Header</div></div></div>',
+    '<div role="treegrid"><div role="row"><div role="gridcell">Cell</div></div></div>',
+    '<div role="radiogroup"><div role="radio">Opt 1</div></div>',
   ],
   invalid: [
     {