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

Flags <button aria-hidden="true">, <a href aria-hidden>, etc. — focusable
elements that are hidden from assistive tech create a keyboard trap:
users reach them via Tab but can't perceive them.

Per WAI-ARIA 1.2 (aria-hidden): "Authors SHOULD NOT use aria-hidden='true'
on any element that has focus or may receive focus."

Detection:
- aria-hidden is truthy (value "true", valueless boolean attr, {{true}},
  or "{{true}}" — matches the treatment introduced in
  template-no-empty-headings B4 fix)
- element is focusable:
  - inherently focusable tag (button/input/select/textarea/a[href]/
    details/summary/iframe/embed), EXCEPT input[type=hidden]
  - or has a tabindex attribute (including tabindex="-1" — the element
    is still programmatically focusable)

Skips components (non-DOM tags — rendering may vary).

Shape modelled on eslint-plugin-jsx-a11y/no-aria-hidden-on-focusable
and eslint-plugin-vuejs-accessibility/no-aria-hidden-on-focusable.

Author: johanrd

docs/rules/template-no-aria-hidden-on-focusable.md

@@ -0,0 +1,44 @@
+# ember/template-no-aria-hidden-on-focusable
+
+<!-- end auto-generated rule header -->
+
+Disallow `aria-hidden="true"` on focusable elements.
+
+An element with `aria-hidden="true"` is removed from the accessibility tree but remains keyboard-focusable. This creates a keyboard trap — users reach the element via Tab but can't perceive it.
+
+Per [WAI-ARIA 1.2 — aria-hidden](https://www.w3.org/TR/wai-aria-1.2/#aria-hidden):
+
+> Authors SHOULD NOT use `aria-hidden="true"` on any element that has focus or may receive focus, either directly via interaction with the user or indirectly via programmatic means such as JavaScript-based event handling.
+
+## Examples
+
+This rule **forbids** the following:
+
+```gjs
+<template>
+  <button aria-hidden="true">Trapped</button>
+  <a href="/x" aria-hidden="true">Link</a>
+  <div tabindex="0" aria-hidden="true">Focusable but hidden</div>
+</template>
+```
+
+This rule **allows** the following:
+
+```gjs
+<template>
+  {{! Non-focusable decorative content }}
+  <div aria-hidden="true"><svg class="decoration" /></div>
+
+  {{! Explicit opt-out }}
+  <button aria-hidden="false">Click me</button>
+
+  {{! input type="hidden" is not focusable }}
+  <input type="hidden" aria-hidden="true" />
+</template>
+```
+
+## References
+
+- [WAI-ARIA 1.2 — aria-hidden](https://www.w3.org/TR/wai-aria-1.2/#aria-hidden)
+- [WebAIM — Hiding content from assistive tech](https://webaim.org/techniques/css/invisiblecontent/)
+- [`no-aria-hidden-on-focusable` — eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-aria-hidden-on-focusable.md)

lib/rules/template-no-aria-hidden-on-focusable.js

@@ -0,0 +1,112 @@
+// Native interactive elements that are focusable by default.
+const INHERENTLY_FOCUSABLE_TAGS = new Set([
+  'button',
+  'details',
+  'embed',
+  'iframe',
+  'input',
+  'select',
+  'summary',
+  'textarea',
+]);
+
+function findAttr(node, name) {
+  return node.attributes?.find((a) => a.name === name);
+}
+
+function getTextAttrValue(attr) {
+  if (attr?.value?.type === 'GlimmerTextNode') {
+    return attr.value.chars;
+  }
+  return undefined;
+}
+
+function isAriaHiddenTruthy(node) {
+  const attr = findAttr(node, 'aria-hidden');
+  if (!attr) {
+    return false;
+  }
+  const value = attr.value;
+  // Valueless or empty-string → truthy boolean attr. Matches jsx-a11y/vue-a11y.
+  if (!value || (value.type === 'GlimmerTextNode' && value.chars === '')) {
+    return true;
+  }
+  if (value.type === 'GlimmerTextNode') {
+    return value.chars === 'true';
+  }
+  if (value.type === 'GlimmerMustacheStatement' && value.path) {
+    if (value.path.type === 'GlimmerBooleanLiteral') {
+      return value.path.value === true;
+    }
+    if (value.path.type === 'GlimmerStringLiteral') {
+      return value.path.value === 'true';
+    }
+  }
+  return false;
+}
+
+function isFocusable(node) {
+  const tag = node.tag?.toLowerCase();
+  if (!tag) {
+    return false;
+  }
+
+  // Opt-out via tabindex="-1" makes the element programmatically focusable
+  // (still reachable via .focus()) but removes it from the tab order.
+  // `aria-hidden` on such an element is still problematic — if it can receive
+  // focus, assistive tech should be able to see it. Match jsx-a11y: flag any
+  // tabindex that's not "undefined" (i.e. any tabindex attribute at all).
+  const tabindex = findAttr(node, 'tabindex');
+  if (tabindex) {
+    return true;
+  }
+
+  if (INHERENTLY_FOCUSABLE_TAGS.has(tag)) {
+    // <input type="hidden"> is not focusable.
+    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;
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow aria-hidden="true" on focusable elements',
+      category: 'Accessibility',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-aria-hidden-on-focusable.md',
+      templateMode: 'both',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      noAriaHiddenOnFocusable:
+        'aria-hidden="true" must not be set on focusable elements — it creates a keyboard trap (element reachable via Tab but hidden from assistive tech).',
+    },
+  },
+
+  create(context) {
+    return {
+      GlimmerElementNode(node) {
+        if (!isAriaHiddenTruthy(node)) {
+          return;
+        }
+        if (isFocusable(node)) {
+          context.report({ node, messageId: 'noAriaHiddenOnFocusable' });
+        }
+      },
+    };
+  },
+};

tests/lib/rules/template-no-aria-hidden-on-focusable.js

@@ -0,0 +1,119 @@
+'use strict';
+
+const rule = require('../../../lib/rules/template-no-aria-hidden-on-focusable');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('template-no-aria-hidden-on-focusable', rule, {
+  valid: [
+    // aria-hidden on non-focusable elements — fine.
+    '<template><div aria-hidden="true"></div></template>',
+    '<template><span aria-hidden="true">decorative</span></template>',
+    '<template><img src="/x.png" alt="" aria-hidden="true" /></template>',
+
+    // Focusable elements without aria-hidden — fine.
+    '<template><button>Click me</button></template>',
+    '<template><a href="/x">Link</a></template>',
+    '<template><input type="text" /></template>',
+
+    // aria-hidden="false" — explicit opt-out. Not flagged.
+    '<template><button aria-hidden="false">Click me</button></template>',
+
+    // <input type="hidden"> isn't focusable, so aria-hidden on it is fine.
+    '<template><input type="hidden" aria-hidden="true" /></template>',
+
+    // <a> without href isn't focusable by default.
+    '<template><a aria-hidden="true">Not a link</a></template>',
+
+    // Components — we don't know if they render a focusable element.
+    '<template><CustomBtn aria-hidden="true" /></template>',
+  ],
+  invalid: [
+    // Native interactive elements.
+    {
+      code: '<template><button aria-hidden="true">Trapped</button></template>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+    {
+      code: '<template><a href="/x" aria-hidden="true">Link</a></template>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+    {
+      code: '<template><input type="text" aria-hidden="true" /></template>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+    {
+      code: '<template><select aria-hidden="true"><option /></select></template>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+    {
+      code: '<template><textarea aria-hidden="true"></textarea></template>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+
+    // Non-interactive element made focusable via tabindex.
+    {
+      code: '<template><div tabindex="0" aria-hidden="true"></div></template>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+    {
+      // tabindex="-1" still makes it programmatically focusable — still flag.
+      code: '<template><div tabindex="-1" aria-hidden="true"></div></template>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+
+    // Boolean / valueless / mustache-boolean aria-hidden — all truthy.
+    {
+      code: '<template><button aria-hidden></button></template>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+    {
+      code: '<template><button aria-hidden=""></button></template>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+    {
+      code: '<template><button aria-hidden={{true}}></button></template>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+  ],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+hbsRuleTester.run('template-no-aria-hidden-on-focusable', rule, {
+  valid: [
+    '<div aria-hidden="true"></div>',
+    '<button>Click me</button>',
+    '<input type="hidden" aria-hidden="true" />',
+    '<CustomBtn aria-hidden="true" />',
+  ],
+  invalid: [
+    {
+      code: '<button aria-hidden="true">Trapped</button>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+    {
+      code: '<div tabindex="0" aria-hidden="true"></div>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+  ],
+});