refactor: adopt isComponentInvocation + isNativeInteractive utils

Replace the rule's inline INHERENTLY_FOCUSABLE_TAGS set and ad-hoc tag
checks with the two shared utils:

- lib/utils/is-component-invocation.js (from PR #31)
- lib/utils/native-interactive-elements.js (from PR #37)

Both files (and their tests) are copied bit-identically from their source
branches so parity is preserved while those PRs remain open.

Behavior deltas introduced by the util swap
-------------------------------------------
The prior inline set was {button, details, embed, iframe, input, select,
summary, textarea}. The shared util covers the same set plus several
additional native-interactive tags that were previously false negatives:

- option, datalist, object, canvas — now recognized as native-interactive
- area[href]                       — now recognized (symmetric with a[href])
- audio[controls], video[controls] — now recognized (per HTML-AAM / browser
  reality; keyboard-operable transport controls)

Net effect: `role="presentation"` / `role="none"` on any of the above is
now flagged where it wasn't before. All of these are spec-correct FN fixes
(WAI-ARIA 1.2 §4.6 conflict resolution applies the same way once the
element is acknowledged as focusable).

Tests added for representative new cases:
- <video controls role="presentation"> — flags (gts + hbs)
- <audio controls role="none">         — flags (gts)
- <area href="/x" role="presentation"> — flags (gts)
- <video role="presentation"> (no controls) — valid (still not focusable)

No deltas for <label>: it was not in the prior INHERENTLY_FOCUSABLE_TAGS
set and it is not in the shared util either, so behavior is unchanged.

Component-invocation handling is now an explicit early-return via
isComponentInvocation(node), which also excludes named-arg (<@slot>),
this-path (<this.widget>), and dot-path (<foo.bar>) invocations that were
previously only excluded incidentally by the tag-lowercase lookup.

Author: johanrd

lib/rules/template-no-role-presentation-on-focusable.js

@@ -13,22 +13,17 @@
 // recurses into descendants. Vue's recursion is uncommented in their source and
 // appears to be a copy-paste from their aria-hidden rule.
 
-const INHERENTLY_FOCUSABLE_TAGS = new Set([
-  'button',
-  'details',
-  'embed',
-  'iframe',
-  'input',
-  'select',
-  'summary',
-  'textarea',
-]);
+'use strict';
+
+const { isComponentInvocation } = require('../utils/is-component-invocation');
+const { isNativeInteractive } = require('../utils/native-interactive-elements');
 
 function findAttr(node, name) {
   return node.attributes?.find((a) => a.name === name);
 }
 
-function getTextAttrValue(attr) {
+function getTextAttrValue(node, name) {
+  const attr = findAttr(node, name);
   if (attr?.value?.type === 'GlimmerTextNode') {
     return attr.value.chars;
   }
@@ -48,27 +43,13 @@ function hasPresentationRole(node) {
 }
 
 function isFocusable(node) {
-  const tag = node.tag?.toLowerCase();
-  if (!tag) {
-    return false;
-  }
-
+  // tabindex makes any element focusable (including tabindex="-1" — still
+  // programmatically focusable; see audit notes for the divergence from
+  // vue-a11y's treatment of tabindex="-1").
   if (findAttr(node, 'tabindex')) {
     return true;
   }
-  if (INHERENTLY_FOCUSABLE_TAGS.has(tag)) {
-    if (tag === 'input') {
-      const type = getTextAttrValue(findAttr(node, 'type'));
-      if (type === 'hidden') {
-        return false;
-      }
-    }
-    return true;
-  }
-  if (tag === 'a' && findAttr(node, 'href')) {
-    return true;
-  }
-  return false;
+  return isNativeInteractive(node, getTextAttrValue);
 }
 
 /** @type {import('eslint').Rule.RuleModule} */
@@ -92,6 +73,9 @@ module.exports = {
   create(context) {
     return {
       GlimmerElementNode(node) {
+        if (isComponentInvocation(node)) {
+          return;
+        }
         if (!hasPresentationRole(node)) {
           return;
         }

lib/utils/is-component-invocation.js

@@ -0,0 +1,24 @@
+'use strict';
+
+/**
+ * Returns true if the Glimmer element node is a component invocation
+ * rather than a native HTML element. Excludes:
+ * - PascalCase tags (<Button>, <MyWidget>)
+ * - Named-arg invocations (<@heading>, <@tag.foo>)
+ * - This-path invocations (<this.myComponent>, <this.comp.sub>)
+ * - Dot-path invocations (<foo.bar>)
+ * - Named-block syntax (<foo::bar>)
+ */
+module.exports.isComponentInvocation = function isComponentInvocation(node) {
+  const tag = node?.tag;
+  if (typeof tag !== 'string') {
+    return false;
+  }
+  return (
+    /^[A-Z]/.test(tag) ||
+    tag.startsWith('@') ||
+    tag.startsWith('this.') ||
+    tag.includes('.') ||
+    tag.includes('::')
+  );
+};

lib/utils/native-interactive-elements.js

@@ -0,0 +1,89 @@
+'use strict';
+
+/**
+ * Native-interactive HTML element classification, shared across rules that need to
+ * ask "does this HTML tag natively expose interactive UI to keyboard / AT users?".
+ *
+ * The set is hand-curated rather than derived from a single authority because
+ * aria-query, axobject-query, HTML-AAM, WAI-ARIA, and browser reality disagree on
+ * several rows. Decision rationale is documented per-tag:
+ *
+ * | Element                                         | Behavior             | Rationale |
+ * |-------------------------------------------------|----------------------|-----------|
+ * | button, select, textarea, iframe, embed,        | Interactive          | aria-query/axobject-query widget + universally-accepted |
+ * | summary, details                                |                      |           |
+ * | input (except type=hidden)                      | Interactive          | Same as above, minus hidden |
+ * | option, datalist                                | Interactive          | aria-query roles option/listbox; axobject widget; HTML-AAM |
+ * | a[href], area[href]                             | Interactive (cond.)  | HTML-AAM: anchor interactivity requires href |
+ * | audio[controls], video[controls]                | Interactive          | Browsers only render focusable UI with `controls` |
+ * | audio, video (no controls)                      | NOT interactive      | No keyboard semantics without controls; browsers agree |
+ * | object                                          | Interactive          | axobject-query EmbeddedObjectRole |
+ * | canvas                                          | Interactive          | axobject-query CanvasRole widget; bias toward no-FP |
+ * | input[type=hidden]                              | NOT interactive      | HTML spec: no UI, no focus, no AT exposure |
+ * | menuitem                                        | NOT interactive      | Deprecated; no longer rendered in Chrome/Edge/Safari/FF |
+ * | label                                           | NOT interactive      | axobject-query LabelRole is structure, not widget |
+ */
+
+// Unconditionally-interactive HTML tags (no attribute dependencies).
+const UNCONDITIONAL_INTERACTIVE_TAGS = new Set([
+  'button',
+  'select',
+  'textarea',
+  'iframe',
+  'embed',
+  'summary',
+  'details',
+  'option',
+  'datalist',
+  'object',
+  'canvas',
+]);
+
+/**
+ * Determine whether a Glimmer element node represents a natively-interactive
+ * HTML element.
+ *
+ * @param {object} node                 Glimmer `ElementNode` (has a string `tag`).
+ * @param {Function} getTextAttrValue   Helper (node, attrName) -> string | undefined
+ *                                      that returns the text value of a static
+ *                                      attribute, or undefined for dynamic / missing.
+ * @returns {boolean}                   True if the element is natively interactive.
+ */
+function isNativeInteractive(node, getTextAttrValue) {
+  const rawTag = node && node.tag;
+  if (typeof rawTag !== 'string' || rawTag.length === 0) {
+    return false;
+  }
+  const tag = rawTag.toLowerCase();
+
+  // Unconditional interactive tags.
+  if (UNCONDITIONAL_INTERACTIVE_TAGS.has(tag)) {
+    return true;
+  }
+
+  // <input> is interactive unless type="hidden" (HTML spec: no UI/focus/AT exposure).
+  if (tag === 'input') {
+    const type = getTextAttrValue(node, 'type');
+    return type !== 'hidden';
+  }
+
+  // <a> and <area> are interactive only when an href is present (HTML-AAM).
+  if (tag === 'a' || tag === 'area') {
+    return hasAttribute(node, 'href');
+  }
+
+  // <audio>/<video> are only interactive when `controls` is present.
+  if (tag === 'audio' || tag === 'video') {
+    return hasAttribute(node, 'controls');
+  }
+
+  return false;
+}
+
+function hasAttribute(node, name) {
+  return Boolean(node.attributes && node.attributes.some((a) => a.name === name));
+}
+
+module.exports = {
+  isNativeInteractive,
+};

tests/lib/rules/template-no-role-presentation-on-focusable.js

@@ -26,8 +26,15 @@ ruleTester.run('template-no-role-presentation-on-focusable', rule, {
     // <a> without href isn't focusable.
     '<template><a role="presentation">Not a link</a></template>',
 
-    // Components — rule skips.
+    // <audio>/<video> without `controls` aren't focusable — no keyboard UI.
+    '<template><video role="presentation"></video></template>',
+    '<template><audio role="presentation"></audio></template>',
+
+    // Components — rule skips (isComponentInvocation).
     '<template><CustomBtn role="presentation" /></template>',
+    '<template><@slot role="presentation" /></template>',
+    '<template><this.widget role="presentation" /></template>',
+    '<template><foo.bar role="presentation" /></template>',
 
     // No role at all.
     '<template><button></button></template>',
@@ -64,6 +71,26 @@ ruleTester.run('template-no-role-presentation-on-focusable', rule, {
       output: null,
       errors: [{ messageId: 'invalidPresentation' }],
     },
+    // <video controls> / <audio controls> — focusable per HTML-AAM / browser
+    // reality (keyboard-operable transport controls), so role="presentation"
+    // on them is a semantic conflict. Added after migrating to the shared
+    // isNativeInteractive util (previously not flagged).
+    {
+      code: '<template><video controls role="presentation"></video></template>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+    {
+      code: '<template><audio controls role="none"></audio></template>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+    // <area href> — same conditional-interactive rule as <a href>.
+    {
+      code: '<template><area href="/x" role="presentation" /></template>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
   ],
 });
 
@@ -77,6 +104,8 @@ hbsRuleTester.run('template-no-role-presentation-on-focusable', rule, {
     '<div role="presentation"></div>',
     '<input type="hidden" role="presentation" />',
     '<CustomBtn role="presentation" />',
+    // <video> / <audio> without controls aren't focusable.
+    '<video role="presentation"></video>',
   ],
   invalid: [
     {
@@ -89,5 +118,10 @@ hbsRuleTester.run('template-no-role-presentation-on-focusable', rule, {
       output: null,
       errors: [{ messageId: 'invalidPresentation' }],
     },
+    {
+      code: '<video controls role="presentation"></video>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
   ],
 });

tests/lib/utils/is-component-invocation-test.js

@@ -0,0 +1,68 @@
+'use strict';
+
+const { isComponentInvocation } = require('../../../lib/utils/is-component-invocation');
+
+describe('isComponentInvocation', () => {
+  it('returns true for PascalCase tags', () => {
+    expect(isComponentInvocation({ tag: 'Button' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'MyWidget' })).toBe(true);
+    // PascalCase tags that match a native HTML element name — the core bug case
+    expect(isComponentInvocation({ tag: 'Article' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Form' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Main' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Nav' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Ul' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Li' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Aside' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Section' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Table' })).toBe(true);
+  });
+
+  it('returns false for lowercase native HTML tags', () => {
+    expect(isComponentInvocation({ tag: 'div' })).toBe(false);
+    expect(isComponentInvocation({ tag: 'article' })).toBe(false);
+    expect(isComponentInvocation({ tag: 'form' })).toBe(false);
+    expect(isComponentInvocation({ tag: 'h1' })).toBe(false);
+    expect(isComponentInvocation({ tag: 'button' })).toBe(false);
+  });
+
+  it('returns true for named-arg invocations', () => {
+    expect(isComponentInvocation({ tag: '@heading' })).toBe(true);
+    expect(isComponentInvocation({ tag: '@tag.foo' })).toBe(true);
+  });
+
+  it('returns true for this-path invocations', () => {
+    expect(isComponentInvocation({ tag: 'this.myComponent' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'this.comp.sub' })).toBe(true);
+  });
+
+  it('returns true for dot-path invocations', () => {
+    expect(isComponentInvocation({ tag: 'foo.bar' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'ns.widget' })).toBe(true);
+  });
+
+  it('returns true for named-block / namespaced invocations', () => {
+    expect(isComponentInvocation({ tag: 'foo::bar' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Foo::Bar' })).toBe(true);
+  });
+
+  it('returns false for empty-string tag', () => {
+    expect(isComponentInvocation({ tag: '' })).toBe(false);
+  });
+
+  it('returns false for undefined node', () => {
+    expect(isComponentInvocation()).toBe(false);
+    expect(isComponentInvocation(undefined)).toBe(false);
+    expect(isComponentInvocation(null)).toBe(false);
+  });
+
+  it('returns false for node with undefined tag', () => {
+    expect(isComponentInvocation({})).toBe(false);
+    expect(isComponentInvocation({ tag: undefined })).toBe(false);
+  });
+
+  it('returns false for node with non-string tag', () => {
+    expect(isComponentInvocation({ tag: 123 })).toBe(false);
+    expect(isComponentInvocation({ tag: null })).toBe(false);
+  });
+});