@angular-eslint/eslint-plugin-template 22.3.0 → 22.3.1-alpha.1

package/dist/index.d.ts

@@ -22,7 +22,7 @@ declare const _default: {
         "button-has-type": import("@typescript-eslint/utils/ts-eslint").RuleModule<import("./rules/button-has-type").MessageIds, import("./rules/button-has-type").Options, import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
             name: string;
         };
-        "click-events-have-key-events": import("@typescript-eslint/utils/ts-eslint").RuleModule<"clickEventsHaveKeyEvents", import("./rules/click-events-have-key-events").Options, import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
+        "click-events-have-key-events": import("@typescript-eslint/utils/ts-eslint").RuleModule<import("./rules/click-events-have-key-events").MessageIds, import("./rules/click-events-have-key-events").Options, import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
             name: string;
         };
         "conditional-complexity": import("@typescript-eslint/utils/ts-eslint").RuleModule<"conditionalComplexity", import("./rules/conditional-complexity").Options, import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {

package/dist/rules/click-events-have-key-events.d.ts

@@ -1,11 +1,13 @@
 export type Options = [
     {
         readonly ignoreWithDirectives?: string[];
+        readonly requireKeyCode?: boolean;
+        readonly allowedKeyCodes?: string[];
     }
 ];
-export type MessageIds = 'clickEventsHaveKeyEvents';
+export type MessageIds = 'clickEventsHaveKeyEvents' | 'clickEventsHaveKeyCode' | 'clickEventsHaveAllowedKeyCode';
 export declare const RULE_NAME = "click-events-have-key-events";
-declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<"clickEventsHaveKeyEvents", Options, import("../utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
+declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<MessageIds, Options, import("../utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
     name: string;
 };
 export default _default;

package/dist/rules/click-events-have-key-events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"click-events-have-key-events.d.ts","sourceRoot":"","sources":["../../src/rules/click-events-have-key-events.ts"],"names":[],"mappings":"AAUA,MAAM,MAAM,OAAO,GAAG;IACpB;QACE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;KAC1C;CACF,CAAC;AACF,MAAM,MAAM,UAAU,GAAG,0BAA0B,CAAC;AACpD,eAAO,MAAM,SAAS,iCAAiC,CAAC;;;;AAKxD,wBA8EG;AAsBH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}
+{"version":3,"file":"click-events-have-key-events.d.ts","sourceRoot":"","sources":["../../src/rules/click-events-have-key-events.ts"],"names":[],"mappings":"AAaA,MAAM,MAAM,OAAO,GAAG;IACpB;QACE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;QACzC,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;QAClC,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;KACrC;CACF,CAAC;AACF,MAAM,MAAM,UAAU,GAClB,0BAA0B,GAC1B,wBAAwB,GACxB,+BAA+B,CAAC;AACpC,eAAO,MAAM,SAAS,iCAAiC,CAAC;;;;AASxD,wBA+HG;AAyCH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/click-events-have-key-events.js

@@ -11,7 +11,10 @@ const get_attribute_value_1 = require("../utils/get-attribute-value");
 exports.RULE_NAME = 'click-events-have-key-events';
 const DEFAULT_OPTIONS = {
     ignoreWithDirectives: [],
+    requireKeyCode: false,
+    allowedKeyCodes: [],
 };
+const KEY_EVENTS = ['keyup', 'keydown', 'keypress'];
 exports.default = (0, create_eslint_rule_1.createESLintRule)({
     name: exports.RULE_NAME,
     meta: {
@@ -29,16 +32,31 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
                         uniqueItems: true,
                         default: DEFAULT_OPTIONS.ignoreWithDirectives,
                     },
+                    requireKeyCode: {
+                        type: 'boolean',
+                        description: 'Require key events to specify a key via a pseudo-event, e.g. `(keydown.enter)`. A bare `(keydown)` will not satisfy the rule.',
+                        default: DEFAULT_OPTIONS.requireKeyCode,
+                    },
+                    allowedKeyCodes: {
+                        type: 'array',
+                        items: { type: 'string' },
+                        uniqueItems: true,
+                        description: 'Only key events whose key (the last segment of the pseudo-event, e.g. `enter` in `(keydown.shift.enter)`) is in this list satisfy the rule. Implies `requireKeyCode`.',
+                        default: DEFAULT_OPTIONS.allowedKeyCodes,
+                    },
                 },
                 additionalProperties: false,
             },
         ],
         messages: {
             clickEventsHaveKeyEvents: 'click must be accompanied by either keyup, keydown or keypress event for accessibility.',
+            clickEventsHaveKeyCode: 'click must be accompanied by a keyup, keydown or keypress event that specifies a key (e.g. `(keydown.enter)`) for accessibility.',
+            clickEventsHaveAllowedKeyCode: 'click must be accompanied by a keyup, keydown or keypress event for one of the allowed keys ({{allowedKeyCodes}}) for accessibility.',
         },
         defaultOptions: [DEFAULT_OPTIONS],
     },
-    create(context, [{ ignoreWithDirectives }]) {
+    create(context, [{ ignoreWithDirectives, requireKeyCode, allowedKeyCodes }]) {
+        const normalizedAllowedKeyCodes = (allowedKeyCodes ?? []).map((keyCode) => keyCode.toLowerCase());
         return {
             Element(node) {
                 if (!(0, get_dom_elements_1.getDomElements)().has(node.name.toLowerCase())) {
@@ -56,28 +74,71 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
                 if (role === 'button') {
                     return;
                 }
-                let hasClick = false, hasKeyEvent = false;
+                let hasClick = false, hasKeyEvent = false, hasSatisfyingKeyEvent = false;
                 for (const output of node.outputs) {
                     hasClick = hasClick || output.name === 'click';
-                    hasKeyEvent =
-                        hasKeyEvent ||
-                            output.name.startsWith('keyup') ||
-                            output.name.startsWith('keydown') ||
-                            output.name.startsWith('keypress');
+                    if (!isKeyEvent(output)) {
+                        continue;
+                    }
+                    hasKeyEvent = true;
+                    const keyCode = getKeyCode(output);
+                    if (normalizedAllowedKeyCodes.length > 0) {
+                        hasSatisfyingKeyEvent =
+                            hasSatisfyingKeyEvent ||
+                                (keyCode !== undefined &&
+                                    normalizedAllowedKeyCodes.includes(keyCode));
+                    }
+                    else if (requireKeyCode) {
+                        hasSatisfyingKeyEvent =
+                            hasSatisfyingKeyEvent || keyCode !== undefined;
+                    }
+                    else {
+                        hasSatisfyingKeyEvent = true;
+                    }
                 }
-                if (!hasClick || hasKeyEvent) {
+                if (!hasClick || hasSatisfyingKeyEvent) {
                     return;
                 }
                 const parserServices = (0, utils_1.getTemplateParserServices)(context);
                 const loc = parserServices.convertNodeSourceSpanToLoc(node.sourceSpan);
-                context.report({
-                    loc,
-                    messageId: 'clickEventsHaveKeyEvents',
-                });
+                if (!hasKeyEvent) {
+                    context.report({
+                        loc,
+                        messageId: 'clickEventsHaveKeyEvents',
+                    });
+                }
+                else if (normalizedAllowedKeyCodes.length > 0) {
+                    context.report({
+                        loc,
+                        messageId: 'clickEventsHaveAllowedKeyCode',
+                        data: { allowedKeyCodes: normalizedAllowedKeyCodes.join(', ') },
+                    });
+                }
+                else {
+                    context.report({
+                        loc,
+                        messageId: 'clickEventsHaveKeyCode',
+                    });
+                }
             },
         };
     },
 });
+function isKeyEvent({ name }) {
+    return KEY_EVENTS.some((keyEvent) => name === keyEvent || name.startsWith(`${keyEvent}.`));
+}
+/**
+ * Returns the key targeted by a key pseudo-event, e.g. `enter` for
+ * `(keydown.shift.enter)`, or `undefined` for a bare `(keydown)`.
+ */
+function getKeyCode({ name }) {
+    const segments = name.split('.');
+    if (segments.length < 2) {
+        return undefined;
+    }
+    const keyCode = segments[segments.length - 1].toLowerCase();
+    return keyCode.length > 0 ? keyCode : undefined;
+}
 function isIgnored(ignoreWithDirectives, { inputs, attributes }) {
     if (ignoreWithDirectives && ignoreWithDirectives.length > 0) {
         for (const input of inputs) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/eslint-plugin-template",
-  "version": "22.3.0",
+  "version": "22.3.1-alpha.1",
   "description": "ESLint plugin for Angular Templates",
   "license": "MIT",
   "main": "dist/index.js",
@@ -19,17 +19,17 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@angular-eslint/bundled-angular-compiler": "22.3.0",
-    "@angular-eslint/utils": "22.3.0",
+    "@angular-eslint/bundled-angular-compiler": "22.3.1-alpha.1",
+    "@angular-eslint/utils": "22.3.1-alpha.1",
     "aria-query": "5.3.2",
     "axobject-query": "4.1.0"
   },
   "devDependencies": {
-    "@angular-eslint/test-utils": "22.3.0",
+    "@angular-eslint/test-utils": "22.3.1-alpha.1",
     "@types/aria-query": "5.0.4"
   },
   "peerDependencies": {
-    "@angular-eslint/template-parser": "22.3.0",
+    "@angular-eslint/template-parser": "22.3.1-alpha.1",
     "@typescript-eslint/types": "^8.0.0",
     "@typescript-eslint/utils": "^8.0.0",
     "eslint": "^9.0.0 || ^10.0.0",