Skip to content

refactor: extract isNativeElement util (fix component-vs-HTML-tag misclassification)#2724

Draft
johanrd wants to merge 3 commits intoember-cli:masterfrom
johanrd:fix/is-component-invocation-util
Draft

refactor: extract isNativeElement util (fix component-vs-HTML-tag misclassification)#2724
johanrd wants to merge 3 commits intoember-cli:masterfrom
johanrd:fix/is-component-invocation-util

Conversation

@johanrd
Copy link
Copy Markdown
Contributor

@johanrd johanrd commented Apr 21, 2026

This PR is part of a broader a11y parity audit against jsx-a11y / vue-a11y / angular-eslint-template / lit-a11y.

Extracts a shared isNativeElement(node, sourceCode) util in lib/utils/is-native-element.js using html-tags + svg-tags + mathml-tag-names packages + scope analysis. Follows the lists-+-scope pattern @NullVoxPopuli established in #2689.

Problem

Two rules had a PascalCase-component misclassification: <Article role="button"> and <Article tabindex={{0}}> were flagged because the rules did node.tag.toLowerCase() and then looked up in a native-tag set.

Two other rules in master (template-no-arguments-for-html-elements, template-no-block-params-for-html-elements) already used the correct lists-+-scope approach but duplicated the same 6-line block inline. Four identical call sites past the rule-of-three threshold; the plugin's convention is utility-heavy (21 utils, 221 imports across 231 rules).

Changes

  1. lib/utils/is-native-element.js — exports isNativeElement(node, sourceCode) + ELEMENT_TAGS. Returns true iff the tag is in the HTML/SVG/MathML lists AND NOT shadowed by a scope binding. 18 unit tests.
  2. template-no-empty-headings — fixes misclassification when a PascalCase component contains text inside a heading.
  3. template-no-invalid-interactive — fixes <Article role="button"> / <Article tabindex={{0}}> false positive.
  4. template-no-arguments-for-html-elements — replaces inline copy with util call.
  5. template-no-block-params-for-html-elements — replaces inline copy with util call.

Accepted false negatives (consistent with #2689)

Hyphenated custom-element tags like <my-element> aren't in any allowlist, so rules skip them. Their a11y contract is author-defined.

Scope-based detection can't help here: a hyphen isn't valid in JS identifiers, so an import like import './register-my-element' or import { MyElement } from 'my-element' doesn't correlate to the template tag my-element. Only PascalCase bindings (import MyElement from '...'; <MyElement />) work through scope. New rule-level tests pin the custom-element behavior in all 4 migrated rules.

Why lists + scope, not heuristics

A previous draft used a lexical heuristic (^[A-Z] / @ / this. / dot / ::). Rewritten after the definitive discussion in #2689 — a lowercase tag can legitimately be a component in strict mode when bound in scope, which heuristics can't detect. See that PR's review thread for the full reasoning.

Related

  • #2689 — established the lists-+-scope pattern.
  • ember-eslint-parser#189 — populates HBS block-param scope so the same util works for both gts and hbs.

Several other a11y rules on separate feature branches will adopt this util in follow-up PRs after they land.

Prior art

Each framework-specific a11y plugin handles the component-vs-native distinction in its parser layer, so no peer has a direct analog of this util. Verified per peer:

Plugin Rule / util Verified behavior
jsx-a11y no equivalent rule JSX syntax itself: PascalCase tag → component (uppercase first letter is language-level). No ambiguity because lowercase tag names can't be components in JSX. No equivalent util exists because no equivalent problem exists.
vuejs-accessibility no equivalent rule Vue's own component-registration system (components: { MyWidget } in options or <script setup> imports). Rules use Vue's AST node types (VElement vs VText) and Vue's resolver — not a separate heuristic.
@angular-eslint/template no equivalent rule Angular's selector system (attribute, element-name, or class selectors registered via @Component). Rules use Angular's template AST that has already resolved bindings at parse time.
lit-a11y no equivalent rule Custom-element registration via customElements.define(...) — inherently hyphenated lowercase tags. Rules work at the Lit-template level.

The closest analog in the plugin itself is #2689, which established the lists-+-scope pattern this util follows.

@johanrd johanrd force-pushed the fix/is-component-invocation-util branch 2 times, most recently from ba7426e to 65be394 Compare April 21, 2026 18:51
@johanrd johanrd changed the title refactor: extract isComponentInvocation util (fix native-HTML-tag misclassification) refactor: extract isNativeElement util (fix component-vs-HTML-tag misclassification) Apr 21, 2026
@johanrd johanrd force-pushed the fix/is-component-invocation-util branch from 65be394 to df03481 Compare April 21, 2026 18:59
…classification)

Adds `lib/utils/is-native-element.js` — a shared util for the recurring
"is this a native HTML/SVG/MathML element or a component?" question. Uses
the authoritative `html-tags` + `svg-tags` + `mathml-tag-names` packages
plus scope analysis, mirroring the pattern established by
@NullVoxPopuli in ember-cli#2689 (template-no-block-params-for-html-elements).

## Why not heuristics

An earlier draft of this PR used a lexical heuristic (PascalCase / `@`
/ `this.` / dot / `::`). That approach was rejected in the ember-cli#2689
discussion — a lowercase tag CAN be a component in GJS/GTS when its
name is bound in scope (`const div = MyComponent; <template><div /></template>`),
so heuristics produce both false positives (web components
misclassified as native) and false negatives (scope-shadowed tags
misclassified as native). Lists + scope handles both correctly.

## What the util does

`isNativeElement(node, sourceCode)` returns true iff:
- The tag name is in the HTML/SVG/MathML authoritative lists, AND
- The tag name is NOT a scope-bound identifier.

Returns false for components (PascalCase, dotted, @-prefixed, etc. —
none of those tag-name shapes appear in the lists), custom elements
(`<my-element>` — accepted false negative; web component namespace is
open-ended), and scope-bound identifiers.

## Rules migrated

Four rules now share the util:

- `template-no-empty-headings` — fixes the `<Article><span>…</span></Article>`
  misclassification (PascalCase component containing text, previously
  treated as an empty heading via `.toLowerCase()` lookup).
- `template-no-invalid-interactive` — fixes `<Article role="button">` /
  `<Article tabindex={{0}}>` false positives.
- `template-no-arguments-for-html-elements` — previously carried inline
  copy of the lists+scope pattern (established in ember-cli#2689); now uses the
  shared util.
- `template-no-block-params-for-html-elements` — same. This is the
  rule that introduced the pattern, now deduplicated.

Net: 2 inline copies of the canonical pattern dropped; 2 buggy rules
fixed; +173 -57 lines.
@johanrd johanrd force-pushed the fix/is-component-invocation-util branch from df03481 to e350937 Compare April 21, 2026 19:00
johanrd added a commit to johanrd/eslint-plugin-ember that referenced this pull request Apr 21, 2026
…+ scope)

Replace the inline PascalCase-regex isComponentInvocation heuristic with
the lists + scope pattern established by @NullVoxPopuli in ember-cli#2689 and
canonicalised by ember-cli#2724. The new lib/utils/is-native-element.js mirrors
ember-cli#2724's util byte-for-byte so the two PRs can land in either order
without conflict — whichever lands first introduces the file; the other
rebases to a no-op on it.

Heuristic approaches (PascalCase regex, `tag.includes('.')`, etc.) were
explicitly rejected in ember-cli#2689 because lowercase tags CAN be components in
GJS/GTS when the name is shadowed by a scope binding
(`const div = MyComponent; <div />`). Scope analysis catches this;
regex heuristics don't.

Call site now uses `!isNativeElement(node, sourceCode)` directly to
match the canonical usage pattern in ember-cli#2724's migrated rules.
johanrd added a commit to johanrd/eslint-plugin-ember that referenced this pull request Apr 21, 2026
…+ scope)

Remove the inline PascalCase-regex isComponentInvocation heuristic in
favor of the lists + scope pattern from ember-cli#2689 / ember-cli#2724. The new
lib/utils/is-native-element.js mirrors ember-cli#2724's util byte-for-byte so
the two PRs can land in either order without conflict.

evaluateChild / evaluateChildren now thread sourceCode through the
recursion so the scope check has access to the enclosing template's
bindings.

Heuristic approaches were explicitly rejected in ember-cli#2689 because lowercase
tags CAN be components when shadowed by scope bindings. Treating custom
elements as opaque (the same as components) is a behavior improvement
— matches ember-cli#2724's convention.
johanrd added 2 commits April 22, 2026 12:49
'Native' is overloaded in the web platform context. The util name
remains isNativeElement (common convention in React/Vue/Angular
ecosystems for 'platform-provided, not a component'), but the JSDoc
now explicitly names three alternative meanings of 'native' that
this util does NOT answer:

  - 'native accessibility' / 'widget-ness' — interactive-roles.js
    (aria-query widget taxonomy)
  - 'native interactive content' — html-interactive-content.js
    (HTML §3.2.5.2.7 content-model question)
  - 'natively focusable' — HTML §6.6.3 sequential focus navigation

This util answers only: is this tag a first-class built-in element
of HTML/SVG/MathML, rather than a component invocation or a
scope-shadowed local binding? Callers compose it with the more
specific utils when they need a narrower question.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant