Extract rule: template-no-down-event-binding

Author: NullVoxPopuli

README.md

@@ -176,9 +176,10 @@ rules in templates can be disabled with eslint directives with mustache or html
 
 ### Accessibility
 
-| Name                                                                         | Description                             | 💼 | 🔧 | 💡 |
-| :--------------------------------------------------------------------------- | :-------------------------------------- | :- | :- | :- |
-| [template-link-href-attributes](docs/rules/template-link-href-attributes.md) | require href attribute on link elements |    |    |    |
+| Name                                                                           | Description                             | 💼 | 🔧 | 💡 |
+| :----------------------------------------------------------------------------- | :-------------------------------------- | :- | :- | :- |
+| [template-link-href-attributes](docs/rules/template-link-href-attributes.md)   | require href attribute on link elements |    |    |    |
+| [template-no-down-event-binding](docs/rules/template-no-down-event-binding.md) | disallow mouse down event bindings      |    |    |    |
 
 ### Best Practices
 

docs/rules/template-no-down-event-binding.md

@@ -0,0 +1,78 @@
+# ember/template-no-down-event-binding
+
+<!-- end auto-generated rule header -->
+
+Disallows mouse down and touch start event bindings.
+
+Mouse down and touch start events can cause accessibility issues because they don't work well with keyboard navigation. Use `click` or `keydown` events instead.
+
+## Rule Details
+
+This rule disallows the use of `mousedown` and `touchstart` events in templates.
+
+## Examples
+
+Examples of **incorrect** code for this rule:
+
+```gjs
+<template>
+  <button {{on "mousedown" this.handleMouseDown}}>Click</button>
+</template>
+```
+
+```gjs
+<template>
+  <div {{on "touchstart" this.handleTouchStart}}>Content</div>
+</template>
+```
+
+```gjs
+<template>
+  <div onmousedown={{this.handleMouseDown}}>Content</div>
+</template>
+```
+
+Examples of **correct** code for this rule:
+
+```gjs
+<template>
+  <button {{on "click" this.handleClick}}>Click</button>
+</template>
+```
+
+```gjs
+<template>
+  <button {{on "keydown" this.handleKeyDown}}>Press</button>
+</template>
+```
+
+```gjs
+<template>
+  <div {{on "mouseup" this.handleMouseUp}}>Content</div>
+</template>
+```
+
+## Migration
+
+Replace:
+
+```gjs
+<button {{on "mousedown" this.action}}>
+```
+
+With:
+
+```gjs
+<button {{on "click" this.action}}>
+```
+
+Or for keyboard support:
+
+```gjs
+<button {{on "click" this.action}} {{on "keydown" this.handleKey}}>
+```
+
+## References
+
+- [eslint-plugin-ember no-down-event-binding](https://github.com/eslint-plugin-ember/eslint-plugin-ember/blob/master/docs/rule/no-down-event-binding.md)
+- [MDN - Mouse events](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)

lib/rules/template-no-down-event-binding.js

@@ -0,0 +1,58 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow mouse down event bindings',
+      category: 'Accessibility',
+      strictGjs: true,
+      strictGts: true,
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-down-event-binding.md',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      unexpected:
+        'Avoid mousedown/touchstart events. Use click or keydown events instead for better accessibility.',
+    },
+  },
+
+  create(context) {
+    const DOWN_EVENTS = new Set(['mousedown', 'touchstart']);
+
+    return {
+      GlimmerElementNode(node) {
+        // Check for onmousedown/ontouchstart attributes
+        if (node.attributes) {
+          for (const attr of node.attributes) {
+            if (attr.name && DOWN_EVENTS.has(attr.name.replace('on', ''))) {
+              context.report({
+                node: attr,
+                messageId: 'unexpected',
+              });
+            }
+          }
+        }
+
+        // Check for {{on "mousedown"}} or {{on "touchstart"}} modifiers
+        if (node.modifiers) {
+          for (const modifier of node.modifiers) {
+            if (
+              modifier.path?.type === 'GlimmerPathExpression' &&
+              modifier.path.original === 'on' &&
+              modifier.params?.length > 0
+            ) {
+              const eventParam = modifier.params[0];
+              if (eventParam.type === 'GlimmerStringLiteral' && DOWN_EVENTS.has(eventParam.value)) {
+                context.report({
+                  node: modifier,
+                  messageId: 'unexpected',
+                });
+              }
+            }
+          }
+        }
+      },
+    };
+  },
+};

tests/lib/rules/template-no-down-event-binding.js

@@ -0,0 +1,71 @@
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/template-no-down-event-binding');
+const RuleTester = require('eslint').RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('template-no-down-event-binding', rule, {
+  valid: [
+    `<template>
+      <button {{on "click" this.handleClick}}>Click</button>
+    </template>`,
+    `<template>
+      <button {{on "keydown" this.handleKeyDown}}>Press</button>
+    </template>`,
+    `<template>
+      <div {{on "mouseup" this.handleMouseUp}}>Content</div>
+    </template>`,
+  ],
+
+  invalid: [
+    {
+      code: `<template>
+        <button {{on "mousedown" this.handleMouseDown}}>Click</button>
+      </template>`,
+      output: null,
+      errors: [
+        {
+          message:
+            'Avoid mousedown/touchstart events. Use click or keydown events instead for better accessibility.',
+          type: 'GlimmerElementModifierStatement',
+        },
+      ],
+    },
+    {
+      code: `<template>
+        <div {{on "touchstart" this.handleTouchStart}}>Content</div>
+      </template>`,
+      output: null,
+      errors: [
+        {
+          message:
+            'Avoid mousedown/touchstart events. Use click or keydown events instead for better accessibility.',
+          type: 'GlimmerElementModifierStatement',
+        },
+      ],
+    },
+    {
+      code: `<template>
+        <div onmousedown={{this.handleMouseDown}}>Content</div>
+      </template>`,
+      output: null,
+      errors: [
+        {
+          message:
+            'Avoid mousedown/touchstart events. Use click or keydown events instead for better accessibility.',
+          type: 'GlimmerAttrNode',
+        },
+      ],
+    },
+  ],
+});