feat: add template-no-role-presentation-on-focusable

Flags role="presentation" / role="none" on focusable elements
(button/a[href]/input/select/textarea/summary/details/iframe/embed, or
any element with a tabindex attribute).

Stripping semantics from a focusable element is an accessibility
anti-pattern: screen-reader users hear nothing where keyboard users
can still focus and potentially activate the element.

Per WAI-ARIA 1.2 (presentation role): authors should not apply
role="presentation" to a focusable element.

Companion to template-no-aria-hidden-on-focusable (M6); same focusable
detection, different anti-pattern. Only eslint-plugin-vuejs-
accessibility has a direct equivalent rule among our peer plugins.

Author: johanrd

docs/rules/template-no-role-presentation-on-focusable.md

@@ -0,0 +1,43 @@
+# ember/template-no-role-presentation-on-focusable
+
+<!-- end auto-generated rule header -->
+
+Disallow `role="presentation"` / `role="none"` on focusable elements.
+
+`role="presentation"` and `role="none"` strip an element's semantics from the accessibility tree. When applied to a focusable element, the result is a widget that keyboard users can still tab to, but one that screen readers announce as plain text with no indication of its role or function.
+
+Per [WAI-ARIA 1.2 — presentation role](https://www.w3.org/TR/wai-aria-1.2/#presentation): authors should not apply `role="presentation"` to a focusable element, since doing so has the same effect as the [element being inaccessible to assistive technology](https://www.w3.org/WAI/ARIA/apg/).
+
+## Examples
+
+This rule **forbids** the following:
+
+```gjs
+<template>
+  <button role="presentation">Click</button>
+  <a href="/x" role="none">Link</a>
+  <input type="text" role="presentation" />
+  <div tabindex="0" role="presentation">Focusable</div>
+</template>
+```
+
+This rule **allows** the following:
+
+```gjs
+<template>
+  {{! Presentation on non-focusable elements }}
+  <div role="presentation"></div>
+  <span role="none" class="spacer"></span>
+
+  {{! Presentation + aria-hidden — fully removed from AT }}
+  <div role="presentation" aria-hidden="true"></div>
+
+  {{! input type="hidden" isn't focusable }}
+  <input type="hidden" role="presentation" />
+</template>
+```
+
+## References
+
+- [WAI-ARIA 1.2 — presentation role](https://www.w3.org/TR/wai-aria-1.2/#presentation)
+- [`no-role-presentation-on-focusable` — eslint-plugin-vuejs-accessibility](https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/rules/no-role-presentation-on-focusable.md)

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

@@ -0,0 +1,89 @@
+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 hasPresentationRole(node) {
+  const attr = findAttr(node, 'role');
+  if (!attr || attr.value?.type !== 'GlimmerTextNode') {
+    return false;
+  }
+  return attr.value.chars
+    .trim()
+    .toLowerCase()
+    .split(/\s+/u)
+    .some((t) => t === 'presentation' || t === 'none');
+}
+
+function isFocusable(node) {
+  const tag = node.tag?.toLowerCase();
+  if (!tag) {
+    return false;
+  }
+
+  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;
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow role="presentation" / role="none" on focusable elements',
+      category: 'Accessibility',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-role-presentation-on-focusable.md',
+      templateMode: 'both',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      invalidPresentation:
+        'role="presentation"/"none" must not be used on focusable elements — stripping semantics from a focusable element leaves it announced as text while keyboard users can still focus it.',
+    },
+  },
+
+  create(context) {
+    return {
+      GlimmerElementNode(node) {
+        if (!hasPresentationRole(node)) {
+          return;
+        }
+        if (isFocusable(node)) {
+          context.report({ node, messageId: 'invalidPresentation' });
+        }
+      },
+    };
+  },
+};

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

@@ -0,0 +1,93 @@
+'use strict';
+
+const rule = require('../../../lib/rules/template-no-role-presentation-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-role-presentation-on-focusable', rule, {
+  valid: [
+    // Presentation role on non-focusable elements — fine.
+    '<template><div role="presentation"></div></template>',
+    '<template><span role="none" class="spacer"></span></template>',
+    '<template><div role="presentation" aria-hidden="true"></div></template>',
+
+    // Focusable elements without presentation role — fine.
+    '<template><button>Click me</button></template>',
+    '<template><a href="/x">Link</a></template>',
+    '<template><input type="text" /></template>',
+
+    // <input type="hidden"> isn't focusable.
+    '<template><input type="hidden" role="presentation" /></template>',
+
+    // <a> without href isn't focusable.
+    '<template><a role="presentation">Not a link</a></template>',
+
+    // Components — rule skips.
+    '<template><CustomBtn role="presentation" /></template>',
+
+    // No role at all.
+    '<template><button></button></template>',
+  ],
+  invalid: [
+    {
+      code: '<template><button role="presentation">Click</button></template>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+    {
+      code: '<template><button role="none">Click</button></template>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+    {
+      code: '<template><a href="/x" role="presentation">Link</a></template>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+    {
+      code: '<template><input type="text" role="presentation" /></template>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+    // Non-interactive element made focusable via tabindex.
+    {
+      code: '<template><div tabindex="0" role="presentation"></div></template>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+    {
+      code: '<template><div tabindex="-1" role="none"></div></template>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+  ],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+hbsRuleTester.run('template-no-role-presentation-on-focusable', rule, {
+  valid: [
+    '<div role="presentation"></div>',
+    '<input type="hidden" role="presentation" />',
+    '<CustomBtn role="presentation" />',
+  ],
+  invalid: [
+    {
+      code: '<button role="presentation">Click</button>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+    {
+      code: '<div tabindex="0" role="none"></div>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+  ],
+});