@angular-eslint/eslint-plugin-template 22.3.1-alpha.0 → 22.3.1-alpha.2

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/button-has-type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-has-type.d.ts","sourceRoot":"","sources":["../../src/rules/button-has-type.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,OAAO,GAAG;IACpB;QACE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;KAC1C;CACF,CAAC;AACF,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,aAAa,CAAC;AACvD,eAAO,MAAM,SAAS,oBAAoB,CAAC;AAI3C,eAAO,MAAM,qBAAqB,SAAS,CAAC;;;;AAW5C,wBA2DG;AAEH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}
+{"version":3,"file":"button-has-type.d.ts","sourceRoot":"","sources":["../../src/rules/button-has-type.ts"],"names":[],"mappings":"AAYA,MAAM,MAAM,OAAO,GAAG;IACpB;QACE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;KAC1C;CACF,CAAC;AACF,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,aAAa,CAAC;AACvD,eAAO,MAAM,SAAS,oBAAoB,CAAC;AAI3C,eAAO,MAAM,qBAAqB,SAAS,CAAC;;;;AAW5C,wBA+DG;AAEH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/button-has-type.js

@@ -4,6 +4,7 @@ exports.RULE_DOCS_EXTENSION = exports.INVALID_TYPE_DATA_KEY = exports.RULE_NAME
 const bundled_angular_compiler_1 = require("@angular-eslint/bundled-angular-compiler");
 const utils_1 = require("@angular-eslint/utils");
 const create_eslint_rule_1 = require("../utils/create-eslint-rule");
+const has_ignored_directive_1 = require("../utils/has-ignored-directive");
 exports.RULE_NAME = 'button-has-type';
 const DEFAULT_OPTIONS = {
     ignoreWithDirectives: [],
@@ -27,6 +28,7 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
                         type: 'array',
                         items: { type: 'string' },
                         uniqueItems: true,
+                        description: 'Directive names that, when present on the element, cause it to be ignored. Entries wrapped in slashes, e.g. `/^tui/`, are treated as regular expressions.',
                         default: DEFAULT_OPTIONS.ignoreWithDirectives,
                     },
                 },
@@ -41,10 +43,11 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
     },
     create(context, [{ ignoreWithDirectives }]) {
         const parserServices = (0, utils_1.getTemplateParserServices)(context);
+        const hasIgnoredDirective = (0, has_ignored_directive_1.createIgnoredDirectiveMatcher)(ignoreWithDirectives);
         return {
             [`Element[name=/^(button)$/i]`](element) {
                 if (!isTypeAttributePresentInElement(element)) {
-                    if (!isIgnored(ignoreWithDirectives, element)) {
+                    if (!hasIgnoredDirective(element)) {
                         context.report({
                             loc: parserServices.convertNodeSourceSpanToLoc(element.sourceSpan),
                             messageId: 'missingType',
@@ -71,21 +74,6 @@ exports.RULE_DOCS_EXTENSION = {
 function isTypeAttributePresentInElement({ inputs, attributes, }) {
     return [...inputs, ...attributes].some(({ name }) => name === TYPE_ATTRIBUTE_NAME);
 }
-function isIgnored(ignoreWithDirectives, { inputs, attributes }) {
-    if (ignoreWithDirectives && ignoreWithDirectives.length > 0) {
-        for (const input of inputs) {
-            if (ignoreWithDirectives.includes(input.name)) {
-                return true;
-            }
-        }
-        for (const attribute of attributes) {
-            if (ignoreWithDirectives.includes(attribute.name)) {
-                return true;
-            }
-        }
-    }
-    return false;
-}
 function getInvalidButtonTypeIfPresent(element) {
     const invalidTextAttribute = element.attributes.find(({ name, value }) => name === TYPE_ATTRIBUTE_NAME && !VALID_BUTTON_TYPES.includes(value));
     if (invalidTextAttribute) {

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":"AAcA,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,wBAmIG;AAqBH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RULE_DOCS_EXTENSION = exports.RULE_NAME = void 0;
 const utils_1 = require("@angular-eslint/utils");
 const create_eslint_rule_1 = require("../utils/create-eslint-rule");
+const has_ignored_directive_1 = require("../utils/has-ignored-directive");
 const get_dom_elements_1 = require("../utils/get-dom-elements");
 const is_hidden_from_screen_reader_1 = require("../utils/is-hidden-from-screen-reader");
 const is_interactive_element_1 = require("../utils/is-interactive-element");
@@ -11,7 +12,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: {
@@ -27,24 +31,41 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
                         type: 'array',
                         items: { type: 'string' },
                         uniqueItems: true,
+                        description: 'Directive names that, when present on the element, cause it to be ignored. Entries wrapped in slashes, e.g. `/^tui/`, are treated as regular expressions.',
                         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());
+        const hasIgnoredDirective = (0, has_ignored_directive_1.createIgnoredDirectiveMatcher)(ignoreWithDirectives);
         return {
             Element(node) {
                 if (!(0, get_dom_elements_1.getDomElements)().has(node.name.toLowerCase())) {
                     return;
                 }
-                if (isIgnored(ignoreWithDirectives, node) ||
+                if (hasIgnoredDirective(node) ||
                     (0, is_presentation_role_1.isPresentationRole)(node) ||
                     (0, is_hidden_from_screen_reader_1.isHiddenFromScreenReader)(node) ||
                     (0, is_interactive_element_1.isInherentlyInteractiveElement)(node)) {
@@ -56,42 +77,70 @@ 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 isIgnored(ignoreWithDirectives, { inputs, attributes }) {
-    if (ignoreWithDirectives && ignoreWithDirectives.length > 0) {
-        for (const input of inputs) {
-            if (ignoreWithDirectives.includes(input.name)) {
-                return true;
-            }
-        }
-        for (const attribute of attributes) {
-            if (ignoreWithDirectives.includes(attribute.name)) {
-                return true;
-            }
-        }
+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;
     }
-    return false;
+    const keyCode = segments[segments.length - 1].toLowerCase();
+    return keyCode.length > 0 ? keyCode : undefined;
 }
 exports.RULE_DOCS_EXTENSION = {
     rationale: 'Elements with click handlers must also be operable via keyboard for users who cannot use a mouse. This includes users with motor disabilities, users of assistive technologies, and keyboard-only users. While native interactive elements like buttons and links are keyboard-accessible by default (activated by Enter or Space keys), non-interactive elements with click handlers (like divs or spans) are not. For such elements, you must add keyboard event handlers (keyup, keydown, or keypress) that perform the same action as the click handler. Alternatively, use a semantic button element which handles this automatically. This is a WCAG Level A requirement for keyboard accessibility.',

package/dist/utils/has-ignored-directive.d.ts

@@ -0,0 +1,11 @@
+import type { TmplAstElement } from '@angular-eslint/bundled-angular-compiler';
+/**
+ * Compiles an `ignoreWithDirectives` option into a predicate that reports
+ * whether an element carries one of the ignored directives.
+ *
+ * Entries wrapped in slashes, e.g. `/^tui/`, are treated as regular
+ * expressions (an optional flags suffix is supported, e.g. `/^tui/i`).
+ * All other entries are matched exactly against the directive name.
+ */
+export declare function createIgnoredDirectiveMatcher(ignoreWithDirectives: readonly string[] | undefined): (element: TmplAstElement) => boolean;
+//# sourceMappingURL=has-ignored-directive.d.ts.map

package/dist/utils/has-ignored-directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"has-ignored-directive.d.ts","sourceRoot":"","sources":["../../src/utils/has-ignored-directive.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAM/E;;;;;;;GAOG;AACH,wBAAgB,6BAA6B,CAC3C,oBAAoB,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,GAClD,CAAC,OAAO,EAAE,cAAc,KAAK,OAAO,CAsBtC"}

package/dist/utils/has-ignored-directive.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createIgnoredDirectiveMatcher = createIgnoredDirectiveMatcher;
+const REGEX_LITERAL_PATTERN = /^\/(.+)\/([a-z]*)$/;
+/**
+ * Compiles an `ignoreWithDirectives` option into a predicate that reports
+ * whether an element carries one of the ignored directives.
+ *
+ * Entries wrapped in slashes, e.g. `/^tui/`, are treated as regular
+ * expressions (an optional flags suffix is supported, e.g. `/^tui/i`).
+ * All other entries are matched exactly against the directive name.
+ */
+function createIgnoredDirectiveMatcher(ignoreWithDirectives) {
+    if (!ignoreWithDirectives || ignoreWithDirectives.length === 0) {
+        return () => false;
+    }
+    const matchers = ignoreWithDirectives.map((entry) => {
+        const regexLiteral = REGEX_LITERAL_PATTERN.exec(entry);
+        if (regexLiteral) {
+            const pattern = new RegExp(regexLiteral[1], regexLiteral[2]);
+            return (name) => pattern.test(name);
+        }
+        return (name) => name === entry;
+    });
+    const isIgnoredName = (name) => matchers.some((matcher) => matcher(name));
+    return ({ inputs, attributes }) => inputs.some(({ name }) => isIgnoredName(name)) ||
+        attributes.some(({ name }) => isIgnoredName(name));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/eslint-plugin-template",
-  "version": "22.3.1-alpha.0",
+  "version": "22.3.1-alpha.2",
   "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.1-alpha.0",
-    "@angular-eslint/utils": "22.3.1-alpha.0",
+    "@angular-eslint/bundled-angular-compiler": "22.3.1-alpha.2",
+    "@angular-eslint/utils": "22.3.1-alpha.2",
     "aria-query": "5.3.2",
     "axobject-query": "4.1.0"
   },
   "devDependencies": {
-    "@angular-eslint/test-utils": "22.3.1-alpha.0",
+    "@angular-eslint/test-utils": "22.3.1-alpha.2",
     "@types/aria-query": "5.0.4"
   },
   "peerDependencies": {
-    "@angular-eslint/template-parser": "22.3.1-alpha.0",
+    "@angular-eslint/template-parser": "22.3.1-alpha.2",
     "@typescript-eslint/types": "^8.0.0",
     "@typescript-eslint/utils": "^8.0.0",
     "eslint": "^9.0.0 || ^10.0.0",