feat: add template-click-events-have-key-events

.release-plan.json

@@ -1,22 +1,22 @@
 {
   "solution": {
     "eslint-plugin-ember": {
-      "impact": "patch",
-      "oldVersion": "13.1.2",
-      "newVersion": "13.1.3",
+      "impact": "minor",
+      "oldVersion": "13.1.4",
+      "newVersion": "13.2.0",
       "tagName": "latest",
       "constraints": [
         {
-          "impact": "patch",
-          "reason": "Appears in changelog section :bug: Bug Fix"
+          "impact": "minor",
+          "reason": "Appears in changelog section :rocket: Enhancement"
         },
         {
           "impact": "patch",
-          "reason": "Appears in changelog section :house: Internal"
+          "reason": "Appears in changelog section :bug: Bug Fix"
         }
       ],
       "pkgJSONPath": "./package.json"
     }
   },
-  "description": "## Release (2026-04-25)\n\n* eslint-plugin-ember 13.1.3 (patch)\n\n#### :bug: Bug Fix\n* `eslint-plugin-ember`\n  * [#2730](https://github.com/ember-cli/eslint-plugin-ember/pull/2730) BUGFIX: template-require-valid-alt-text — reject empty-string aria-label/labelledby/alt on <input type=image>, <object>, <area> ([@johanrd](https://github.com/johanrd))\n  * [#2729](https://github.com/ember-cli/eslint-plugin-ember/pull/2729) BUGFIX: template-no-invalid-role — support DPUB/Graphics-ARIA and role-fallback lists ([@johanrd](https://github.com/johanrd))\n  * [#2726](https://github.com/ember-cli/eslint-plugin-ember/pull/2726) BUGFIX: template-no-unsupported-role-attributes — honor aria-query attribute constraints ([@johanrd](https://github.com/johanrd))\n  * [#2727](https://github.com/ember-cli/eslint-plugin-ember/pull/2727) BUGFIX: template-no-redundant-role — case-insensitive match + <select>→combobox ([@johanrd](https://github.com/johanrd))\n\n#### :house: Internal\n* `eslint-plugin-ember`\n  * [#2746](https://github.com/ember-cli/eslint-plugin-ember/pull/2746) refactor: extract isNativeElement util (fix component-vs-HTML-tag misclassification) ([@johanrd](https://github.com/johanrd))\n\n#### Committers: 1\n- [@johanrd](https://github.com/johanrd)\n"
+  "description": "## Release (2026-04-28)\n\n* eslint-plugin-ember 13.2.0 (minor)\n\n#### :rocket: Enhancement\n* `eslint-plugin-ember`\n  * [#2763](https://github.com/ember-cli/eslint-plugin-ember/pull/2763) feat: add template-require-input-type ([@johanrd](https://github.com/johanrd))\n\n#### :bug: Bug Fix\n* `eslint-plugin-ember`\n  * [#2766](https://github.com/ember-cli/eslint-plugin-ember/pull/2766) Update parser ([@NullVoxPopuli](https://github.com/NullVoxPopuli))\n\n#### Committers: 2\n- [@NullVoxPopuli](https://github.com/NullVoxPopuli)\n- [@johanrd](https://github.com/johanrd)\n"
 }

CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## Release (2026-04-28)
+
+* eslint-plugin-ember 13.2.0 (minor)
+
+#### :rocket: Enhancement
+* `eslint-plugin-ember`
+  * [#2763](https://github.com/ember-cli/eslint-plugin-ember/pull/2763) feat: add template-require-input-type ([@johanrd](https://github.com/johanrd))
+
+#### :bug: Bug Fix
+* `eslint-plugin-ember`
+  * [#2766](https://github.com/ember-cli/eslint-plugin-ember/pull/2766) Update parser ([@NullVoxPopuli](https://github.com/NullVoxPopuli))
+
+#### Committers: 2
+- [@NullVoxPopuli](https://github.com/NullVoxPopuli)
+- [@johanrd](https://github.com/johanrd)
+
+## Release (2026-04-27)
+
+* eslint-plugin-ember 13.1.4 (patch)
+
+#### :bug: Bug Fix
+* `eslint-plugin-ember`
+  * [#2752](https://github.com/ember-cli/eslint-plugin-ember/pull/2752) Update ember-eslint-parser to 0.11.2 ([@NullVoxPopuli](https://github.com/NullVoxPopuli))
+  * [#2728](https://github.com/ember-cli/eslint-plugin-ember/pull/2728) BUGFIX: template-require-mandatory-role-attributes — lowercase role + split whitespace role lists ([@johanrd](https://github.com/johanrd))
+
+#### :house: Internal
+* `eslint-plugin-ember`
+  * [#2748](https://github.com/ember-cli/eslint-plugin-ember/pull/2748) refactor: extract `html-interactive-content` util (HTML §3.2.5.2.7 authority) ([@johanrd](https://github.com/johanrd))
+
+#### Committers: 2
+- [@NullVoxPopuli](https://github.com/NullVoxPopuli)
+- [@johanrd](https://github.com/johanrd)
+
 ## Release (2026-04-25)
 
 * eslint-plugin-ember 13.1.3 (patch)

docs/rules/template-click-events-have-key-events.md

@@ -0,0 +1,55 @@
+# ember/template-click-events-have-key-events
+
+<!-- end auto-generated rule header -->
+
+Enforce that a clickable non-interactive element has at least one keyboard event listener.
+
+When a `{{on "click" …}}` modifier is attached to a non-interactive DOM element (e.g. `<div>`, `<span>`, `<a>` without `href`), keyboard-only users can't reach the handler through the keyboard path alone. Adding `{{on "keydown" …}}`, `{{on "keyup" …}}`, or `{{on "keypress" …}}` — along with appropriate `role`/`tabindex` to make the element focusable — restores keyboard parity.
+
+## On "normative basis"
+
+[WCAG 2.1 SC 2.1.1 Keyboard (Level A)](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) requires all functionality to be operable via the keyboard. The click-without-keydown shape is the canonical violation in practice. However, [Understanding 2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) explicitly notes that "a custom button only reacting to Enter" still satisfies the SC — so the click+keydown pairing isn't literally spec-mandated. It's a peer-plugin convention (jsx-a11y, vuejs-accessibility, lit-a11y, @angular-eslint/template all use it) as the strongest static-analysis proxy for SC 2.1.1 violations. This rule follows the convention.
+
+This rule is complementary to [`ember/template-no-invalid-interactive`](./template-no-invalid-interactive.md):
+
+- `template-no-invalid-interactive` takes a stricter stance: don't use DOM event modifiers on non-interactive elements at all. Steers authors toward native interactive elements.
+- `template-click-events-have-key-events` is permissive: if you _do_ use `{{on "click" …}}` on a non-interactive element, at least pair it with a keyboard listener.
+
+Enable one, the other, or both depending on your project's stance.
+
+## Examples
+
+This rule **forbids** the following:
+
+```gjs
+<template>
+  <div {{on "click" this.onClick}}></div>
+  <span {{on "click" this.onClick}}>text</span>
+  <a {{on "click" this.onClick}}>Not a link (missing href)</a>
+</template>
+```
+
+This rule **allows** the following:
+
+```gjs
+<template>
+  {{! Interactive elements — keyboard is built in }}
+  <button {{on "click" this.onClick}}>Toggle</button>
+  <a href="/x" {{on "click" this.track}}>Link</a>
+
+  {{! Non-interactive element with both click and keyboard handlers }}
+  <div {{on "click" this.onClick}} {{on "keydown" this.onKey}}></div>
+
+  {{! Hidden from assistive tech }}
+  <div aria-hidden="true" {{on "click" this.noop}}></div>
+
+  {{! Role="presentation" opts out of the widget contract }}
+  <div role="presentation" {{on "click" this.noop}}></div>
+</template>
+```
+
+## References
+
+- [WAI-ARIA Authoring Practices — Keyboard Interaction](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/)
+- [MDN — Keyboard-navigable JavaScript widgets](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)
+- [`click-events-have-key-events` — eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/click-events-have-key-events.md)

docs/rules/template-require-input-type.md

@@ -0,0 +1,66 @@
+# ember/template-require-input-type
+
+🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
+<!-- end auto-generated rule header -->
+
+This rule rejects `<input type="...">` values that are not one of the input
+types defined by the HTML spec, and (optionally) requires every `<input>` to
+declare a `type` attribute.
+
+An invalid value like `<input type="foo">` silently falls back to the Text
+state — the browser reports no error, but the author's intent (validation,
+inputmode hint, platform keyboard) is lost. That's a genuine silent-failure
+class, which this rule always flags and auto-fixes to `type="text"`.
+
+A missing `type` attribute (`<input />`) is _spec-compliant_ — the
+missing-value default is the Text state — so flagging it is a style /
+consistency choice, not a correctness one. Opt in with `requireExplicit: true`
+if your team wants parity with `template-require-button-type`.
+
+## Examples
+
+This rule **forbids** the following (always):
+
+```hbs
+<input type='' />
+<input type='foo' />
+<input type='TEXTY' />
+```
+
+With `requireExplicit: true` the rule **also forbids**:
+
+```hbs
+<input />
+<input name='email' />
+```
+
+This rule **allows** the following:
+
+```hbs
+<input type='text' />
+<input type='email' />
+<input type='checkbox' />
+<input type={{this.inputType}} />
+```
+
+Dynamic values such as `type={{this.inputType}}` are not flagged at lint time.
+
+## Configuration
+
+- `requireExplicit` (`boolean`, default `false`): when true, also flag
+  `<input>` elements that have no `type` attribute. Auto-fix inserts
+  `type="text"`.
+
+```js
+module.exports = {
+  rules: {
+    'ember/template-require-input-type': ['error', { requireExplicit: true }],
+  },
+};
+```
+
+## References
+
+- [HTML spec — the input element](https://html.spec.whatwg.org/multipage/input.html#the-input-element)
+- Adapted from [`html-validate`'s `no-implicit-input-type`](https://html-validate.org/rules/no-implicit-input-type.html) (MIT).

lib/rules/template-block-indentation.js

@@ -1,25 +1,9 @@
 'use strict';
 
+const { htmlVoidElements } = require('html-void-elements');
 const editorConfigUtil = require('../utils/editorconfig');
 
-const VOID_TAGS = new Set([
-  'area',
-  'base',
-  'br',
-  'col',
-  'command',
-  'embed',
-  'hr',
-  'img',
-  'input',
-  'keygen',
-  'link',
-  'meta',
-  'param',
-  'source',
-  'track',
-  'wbr',
-]);
+const VOID_TAGS = new Set(htmlVoidElements);
 const IGNORED_ELEMENTS = new Set(['pre', 'script', 'style', 'textarea']);
 
 function isControlChar(char) {

lib/rules/template-click-events-have-key-events.js

@@ -0,0 +1,164 @@
+const { dom } = require('aria-query');
+const { isNativeElement } = require('../utils/is-native-element');
+const { isHtmlInteractiveContent } = require('../utils/html-interactive-content');
+const { getStaticAttrValue } = require('../utils/static-attr-value');
+
+const KEYBOARD_EVENT_NAMES = new Set(['keydown', 'keyup', 'keypress']);
+
+function findAttr(node, name) {
+  return node.attributes?.find((a) => a.name === name);
+}
+
+function getAttrTextValue(attr) {
+  if (attr?.value?.type === 'GlimmerTextNode') {
+    return attr.value.chars;
+  }
+  return undefined;
+}
+
+// Adapter matching the `isHtmlInteractiveContent` util's expected signature:
+// `(node, attrName) -> string | undefined` for static attribute text values.
+function getTextAttrValue(node, attrName) {
+  return getAttrTextValue(findAttr(node, attrName));
+}
+
+function isHiddenFromScreenReader(node) {
+  const ariaHidden = findAttr(node, 'aria-hidden');
+  if (ariaHidden) {
+    // WAI-ARIA 1.2: aria-hidden is NOT a boolean HTML attribute. Only the
+    // string value "true" hides the element. A valueless attribute or an
+    // empty string is invalid and must NOT be treated as hiding the element.
+    //
+    // getStaticAttrValue resolves GlimmerTextNode, GlimmerMustacheStatement
+    // with a literal path (boolean/string), and GlimmerConcatStatement whose
+    // parts are all static — covering aria-hidden="TRUE", aria-hidden={{true}},
+    // aria-hidden={{"true"}}, and aria-hidden="{{true}}". Dynamic expressions
+    // return undefined and are intentionally not treated as hidden.
+    const resolved = getStaticAttrValue(ariaHidden.value);
+    if (resolved !== undefined && resolved.trim().toLowerCase() === 'true') {
+      return true;
+    }
+  }
+  if (findAttr(node, 'hidden')) {
+    return true;
+  }
+  return false;
+}
+
+function hasPresentationRole(node) {
+  const role = getAttrTextValue(findAttr(node, 'role'));
+  if (!role) {
+    return false;
+  }
+  return role
+    .trim()
+    .toLowerCase()
+    .split(/\s+/u)
+    .some((token) => token === 'presentation' || token === 'none');
+}
+
+function getOnModifierEventName(modifier) {
+  if (modifier.type !== 'GlimmerElementModifierStatement') {
+    return undefined;
+  }
+  if (modifier.path?.type !== 'GlimmerPathExpression' || modifier.path.original !== 'on') {
+    return undefined;
+  }
+  const firstParam = modifier.params?.[0];
+  if (firstParam?.type === 'GlimmerStringLiteral') {
+    return firstParam.value;
+  }
+  return undefined;
+}
+
+function modifierEvents(node) {
+  const events = new Set();
+  for (const modifier of node.modifiers || []) {
+    const eventName = getOnModifierEventName(modifier);
+    if (eventName) {
+      events.add(eventName);
+    }
+  }
+  return events;
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'require a clickable non-interactive element to have at least one keyboard event listener',
+      category: 'Accessibility',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-click-events-have-key-events.md',
+      templateMode: 'both',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      needsKeyEvent:
+        'Non-interactive elements with click handlers must have at least one keyboard listener (keydown/keyup/keypress).',
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    return {
+      GlimmerElementNode(node) {
+        if (!node.tag) {
+          return;
+        }
+
+        // Skip component invocations (PascalCase, named-arg, this-path, dot-path, named-block)
+        // and scope-shadowed tag names.
+        if (!isNativeElement(node, sourceCode)) {
+          return;
+        }
+
+        // Skip tags aria-query doesn't recognize as DOM elements (e.g. hyphenated
+        // custom elements like `<my-widget>`).
+        if (!dom.has(node.tag)) {
+          return;
+        }
+
+        const events = modifierEvents(node);
+        if (!events.has('click')) {
+          return;
+        }
+
+        if (isHiddenFromScreenReader(node) || hasPresentationRole(node)) {
+          return;
+        }
+
+        if (isHtmlInteractiveContent(node, getTextAttrValue)) {
+          return;
+        }
+
+        // Elements outside HTML §3.2.5.2.7 that are nonetheless ARIA widgets
+        // or conventionally interactive surfaces — click-without-key on them
+        // isn't what this rule targets. The HTML-content-model util covers
+        // the spec-normative list; these are explicit exemptions for elements
+        // that do not qualify as interactive content under the HTML spec but
+        // are carved out here due to their ARIA roles or browser-native
+        // behavior (see `html-interactive-content.js` docstring for context).
+        //   - <canvas>: drawing/game surface (axobject-query: CanvasRole).
+        //   - <option>: ARIA role="option" (widget), but not keyboard-activatable
+        //     as a standalone element — exempted as a special case.
+        //   - <datalist>: ARIA role="listbox" (widget), same rationale as <option>.
+        const lowerTag = node.tag.toLowerCase();
+        if (lowerTag === 'canvas' || lowerTag === 'option' || lowerTag === 'datalist') {
+          return;
+        }
+
+        // If any of the keyboard events is already handled, we're done.
+        for (const event of events) {
+          if (KEYBOARD_EVENT_NAMES.has(event)) {
+            return;
+          }
+        }
+
+        context.report({ node, messageId: 'needsKeyEvent' });
+      },
+    };
+  },
+};