feat: add template-no-aria-hidden-on-focusable

[johanrd]

Note

This is part of a series where Claude has audited eslint-plugin-ember against jsx-a11y, vuejs-accessibility, angular-eslint, lit-a11y and html-validate, ember-template-lint, and the HTML and WCAG specs.

A focusable element with aria-hidden="true" creates a keyboard trap — reachable via Tab, hidden from assistive technology. This is the anti-pattern flagged by axe's aria-hidden-focus rule and by jsx-a11y's no-aria-hidden-on-focusable. The WAI-ARIA 1.2 spec says authors MAY "with caution" use aria-hidden; the specific "keyboard-reachable + AT-hidden = trap" framing is community/axe guidance reinforced by all major peer plugins.

Four ecosystem positions on valueless aria-hidden

The question "what does <el aria-hidden> (bare), aria-hidden="" (empty), or aria-hidden={{false}} mean?" has no single authoritative answer:

#	Source	Interpretation	Evidence
1	jsx-a11y	Valueless → hidden	Side effect of jsx-ast-utils coercing valueless JSX attrs to boolean true. Quirk: string aria-hidden="true" is NOT recognized because "true" !== true. Not a deliberate ARIA interpretation.
2	vue-a11y	Anything not literal "false" → hidden	isHiddenFromScreenReader.ts: non-spec shortcut.
3	axe-core / W3C ACT Rules	Valueless/empty → INCOMPLETE	axe-core PR #3635; ACT Rule 6a7281 scopes out empty values as inapplicable.
4	WAI-ARIA 1.2 spec	Valueless/empty → default undefined → not hidden	§aria-hidden value table: aria-hidden is NOT an HTML boolean attribute; missing/empty resolves to the default (not hidden).

Design choice

This rule leans toward fewer false positives: only flag when aria-hidden is unambiguously "true". When the signal is ambiguous (valueless, empty), we don't report a keyboard trap.

Flag (explicit hide + focusable = trap):

• aria-hidden="true" / "TRUE" / "True" (ASCII case-insensitive)
• aria-hidden={{true}}, {{"true"}} / case-variants

Don't flag:

• <button aria-hidden> (valueless — ambiguous)
• <button aria-hidden=""> (empty — ambiguous)
• <button aria-hidden={{false}}> / "false" — explicit opt-out

Flags

<button aria-hidden="true">Trapped</button>
<a href="/x" aria-hidden="true">Link</a>
<input type="text" aria-hidden="true" />
<div tabindex="0" aria-hidden="true"></div>
<button aria-hidden={{true}}></button>
<button aria-hidden="TRUE"></button>
<div aria-hidden="true"><button>Close</button></div>   {{! descendant focusable under aria-hidden ancestor }}

Allows

<button aria-hidden="false">Click me</button>
<button aria-hidden>Click me</button>       {{! valueless — ambiguous, don't flag }}
<button aria-hidden="">Click me</button>    {{! empty — same }}
<CustomBtn aria-hidden="true" />            {{! opaque component }}
<div aria-hidden="true"><span>Just text</span></div>   {{! no focusable descendant }}

Prior art

Plugin	Rule	Behavior on <button aria-hidden>
jsx-a11y	no-aria-hidden-on-focusable	Flags (JSX coerces valueless → boolean true).
vuejs-accessibility	no-aria-hidden-on-focusable	Does NOT flag (rule's if (hasAriaHidden) short-circuits on null).
lit-a11y	—	No equivalent rule.
@angular-eslint/template	—	No equivalent rule.

[NullVoxPopuli]

I think I'm seeing a theme of related utility functions that we may want to extract some place where a11y rules can share them