@angular-eslint/eslint-plugin-template 22.6.1-alpha.2 → 22.6.1-alpha.3

package/dist/rules/no-interpolation-in-attributes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"no-interpolation-in-attributes.d.ts","sourceRoot":"","sources":["../../src/rules/no-interpolation-in-attributes.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,OAAO,GAAG,CAAC;IAAE,2BAA2B,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AACjE,MAAM,MAAM,UAAU,GAAG,6BAA6B,CAAC;AACvD,eAAO,MAAM,SAAS,mCAAmC,CAAC;;;;AAY1D,wBAmFG;AAEH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}
+{"version":3,"file":"no-interpolation-in-attributes.d.ts","sourceRoot":"","sources":["../../src/rules/no-interpolation-in-attributes.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,OAAO,GAAG,CAAC;IAAE,2BAA2B,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AACjE,MAAM,MAAM,UAAU,GAAG,6BAA6B,CAAC;AACvD,eAAO,MAAM,SAAS,mCAAmC,CAAC;;;;AAY1D,wBAoFG;AAEH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/no-interpolation-in-attributes.js

@@ -57,7 +57,7 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
                         end: sourceCode.getLocFromIndex(end),
                     },
                     messageId: 'noInterpolationInAttributes',
-                    fix: isFullInterpolation
+                    fix: isFullInterpolation && interpolation.expressions.length === 1
                         ? (fixer) => {
                             const attrStart = boundAttribute.keySpan.start.offset;
                             const attrEnd = boundAttribute.keySpan.end.offset;

package/dist/rules/prefer-at-else.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prefer-at-else.d.ts","sourceRoot":"","sources":["../../src/rules/prefer-at-else.ts"],"names":[],"mappings":"AAmBA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AACxC,eAAO,MAAM,SAAS,mBAAmB,CAAC;;;;AAe1C,wBAwKG;AAoGH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}
+{"version":3,"file":"prefer-at-else.d.ts","sourceRoot":"","sources":["../../src/rules/prefer-at-else.ts"],"names":[],"mappings":"AAmBA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AACxC,eAAO,MAAM,SAAS,mBAAmB,CAAC;;;;AAe1C,wBAkLG;AAoGH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/prefer-at-else.js

@@ -37,6 +37,10 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
     create(context) {
         const parserServices = (0, utils_1.getTemplateParserServices)(context);
         const previousNodeStack = [undefined];
+        // `@if` blocks that a fix in this pass turns into an else branch.
+        // Merging one of them into the next `@if` as well would edit a separate
+        // range, so ESLint would apply both fixes and write two else branches.
+        const ifBlocksTurnedIntoElse = new Set();
         function wouldPreventContentProjection(nodes) {
             let rootNodeCount = 0;
             let hasProjectableNode = false;
@@ -125,10 +129,16 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
                 if (current) {
                     const previous = previousNodeStack.at(-1);
                     if (previous && canCombine(previous, current)) {
+                        const fix = ifBlocksTurnedIntoElse.has(previous.node)
+                            ? null
+                            : getFix(previous, current);
+                        if (fix) {
+                            ifBlocksTurnedIntoElse.add(current.node);
+                        }
                         context.report({
                             loc: parserServices.convertNodeSourceSpanToLoc(current.node.nameSpan),
                             messageId: 'preferAtElse',
-                            fix: getFix(previous, current),
+                            fix,
                         });
                     }
                 }

package/dist/rules/prefer-style-binding.d.ts

@@ -1,6 +1,11 @@
-export type MessageIds = 'preferStyleBinding';
+export type Options = [
+    {
+        readonly bindUnits?: boolean;
+    }
+];
+export type MessageIds = 'preferStyleBinding' | 'preferStyleUnitBinding' | 'suggestStyleUnitBinding';
 export declare const RULE_NAME = "prefer-style-binding";
-declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferStyleBinding", [], 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/prefer-style-binding.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prefer-style-binding.d.ts","sourceRoot":"","sources":["../../src/rules/prefer-style-binding.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,GAAG,oBAAoB,CAAC;AAC9C,eAAO,MAAM,SAAS,yBAAyB,CAAC;;;;AAEhD,wBA4BG;AAEH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}
+{"version":3,"file":"prefer-style-binding.d.ts","sourceRoot":"","sources":["../../src/rules/prefer-style-binding.ts"],"names":[],"mappings":"AAgBA,MAAM,MAAM,OAAO,GAAG;IACpB;QACE,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;KAC9B;CACF,CAAC;AAKF,MAAM,MAAM,UAAU,GACpB,oBAAoB,GAAG,wBAAwB,GAAG,yBAAyB,CAAC;AAC9E,eAAO,MAAM,SAAS,yBAAyB,CAAC;;;;AA2EhD,wBAgFG;AAkIH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/prefer-style-binding.js

@@ -3,7 +3,70 @@ 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 literal_primitive_1 = require("../utils/literal-primitive");
+const unwrap_parenthesized_expression_1 = require("../utils/unwrap-parenthesized-expression");
+const DEFAULT_OPTIONS = {
+    bindUnits: false,
+};
 exports.RULE_NAME = 'prefer-style-binding';
+const CSS_UNITS = [
+    'px',
+    'em',
+    'rem',
+    '%',
+    'vh',
+    'vw',
+    'vmin',
+    'vmax',
+    'cm',
+    'mm',
+    'in',
+    'pt',
+    'pc',
+    'ex',
+    'ch',
+    'fr',
+    'deg',
+    'rad',
+    'grad',
+    'turn',
+    's',
+    'ms',
+    'Hz',
+    'kHz',
+    'dpi',
+    'dpcm',
+    'dppx',
+    'cap',
+    'ic',
+    'lh',
+    'rlh',
+    'vi',
+    'vb',
+    'svw',
+    'svh',
+    'lvw',
+    'lvh',
+    'dvw',
+    'dvh',
+    'cqw',
+    'cqh',
+    'cqi',
+    'cqb',
+    'cqmin',
+    'cqmax',
+    'svmin',
+    'svmax',
+    'lvmin',
+    'lvmax',
+    'dvmin',
+    'dvmax',
+];
+const CSS_UNITS_PATTERN = CSS_UNITS.join('|');
+const CSS_NUMBER_PATTERN = '[+-]?(?:\\d+(?:\\.\\d+)?|\\.\\d+)';
+const NUMBER_WITH_UNIT = new RegExp('^(?<value>' + CSS_NUMBER_PATTERN + ')(?<unit>' + CSS_UNITS_PATTERN + ')$', 'i');
+const UNIT_ONLY = new RegExp('^(?:' + CSS_UNITS_PATTERN + ')$', 'i');
+const STYLE_KEY_PREFIX = 'style.';
 exports.default = (0, create_eslint_rule_1.createESLintRule)({
     name: exports.RULE_NAME,
     meta: {
@@ -11,13 +74,29 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
         docs: {
             description: 'Suggests using [style] bindings over ngStyle where applicable',
         },
-        schema: [],
+        fixable: 'code',
+        hasSuggestions: true,
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    bindUnits: {
+                        type: 'boolean',
+                        description: 'Whether to also report `[style.property]` bindings whose bound value embeds the CSS unit, such as `[style.width]="\'30px\'"`, or a template literal or interpolation ending in the unit after a single expression, which are better expressed with the unit in the binding name (e.g. `[style.width.px]="30"`). Literal values are autofixed; dynamic values are only offered as a suggestion, because a unit binding removes the style when the value is null, undefined or an empty string.',
+                        default: DEFAULT_OPTIONS.bindUnits,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
         messages: {
             preferStyleBinding: 'Consider using [style] or [style.property] bindings instead of [ngStyle] where applicable.',
+            preferStyleUnitBinding: 'Consider using [style.{{property}}.{{unit}}] instead of embedding the unit in the bound value.',
+            suggestStyleUnitBinding: 'Use [style.{{property}}.{{unit}}]. Check null, undefined and empty-string values first: the unit binding removes the style for them instead of appending the unit.',
         },
-        defaultOptions: [],
+        defaultOptions: [DEFAULT_OPTIONS],
     },
-    create(context) {
+    create(context, [{ bindUnits }]) {
         const parserServices = (0, utils_1.getTemplateParserServices)(context);
         return {
             'BoundAttribute[name="ngStyle"]'(node) {
@@ -27,9 +106,122 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
                     loc,
                 });
             },
+            ...(bindUnits
+                ? {
+                    BoundAttribute(node) {
+                        const property = getStyleProperty(node);
+                        if (!property) {
+                            return;
+                        }
+                        const unitBinding = getUnitBinding(node, context.sourceCode.text);
+                        if (!unitBinding) {
+                            return;
+                        }
+                        const data = { property, unit: unitBinding.unit };
+                        const fix = (fixer) => createUnitBindingFix(fixer, node, unitBinding);
+                        context.report({
+                            messageId: 'preferStyleUnitBinding',
+                            loc: parserServices.convertNodeSourceSpanToLoc(node.sourceSpan),
+                            data,
+                            ...(unitBinding.value === null
+                                ? {}
+                                : unitBinding.isLiteral
+                                    ? { fix }
+                                    : {
+                                        suggest: [
+                                            { messageId: 'suggestStyleUnitBinding', data, fix },
+                                        ],
+                                    }),
+                        });
+                    },
+                }
+                : {}),
         };
     },
 });
+function getStyleProperty(node) {
+    const details = node.keySpan?.details;
+    if (node.unit || !details?.startsWith(STYLE_KEY_PREFIX)) {
+        return null;
+    }
+    return details.slice(STYLE_KEY_PREFIX.length) || null;
+}
+function getUnitBinding(node, templateText) {
+    const withSource = asASTWithSource(node.value);
+    const value = (0, unwrap_parenthesized_expression_1.unwrapParenthesizedExpression)(withSource?.ast ?? node.value);
+    if ((0, literal_primitive_1.isStringLiteralPrimitive)(value)) {
+        const groups = NUMBER_WITH_UNIT.exec(value.value)?.groups;
+        return groups?.['unit'] && groups['value']
+            ? {
+                unit: groups['unit'].toLowerCase(),
+                value: groups['value'],
+                isLiteral: true,
+            }
+            : null;
+    }
+    const verbatim = getVerbatimValue(node, withSource, templateText);
+    if ((0, literal_primitive_1.isTemplateLiteral)(value)) {
+        const unit = getTrailingUnit(value.elements.map(({ text }) => text), value.expressions.length);
+        if (!unit) {
+            return null;
+        }
+        const [expression] = value.expressions;
+        const { sourceSpan } = expression;
+        return {
+            unit: unit.toLowerCase(),
+            value: verbatim === null
+                ? null
+                : templateText.slice(sourceSpan.start, sourceSpan.end),
+            isLiteral: isNonNullishLiteral(expression),
+        };
+    }
+    if ((0, literal_primitive_1.isInterpolation)(value)) {
+        const unit = getTrailingUnit(value.strings, value.expressions.length);
+        if (!unit) {
+            return null;
+        }
+        return {
+            unit: unit.toLowerCase(),
+            value: verbatim === null ? null : verbatim.slice(0, -unit.length),
+            isLiteral: isNonNullishLiteral(value.expressions[0]),
+        };
+    }
+    return null;
+}
+function isNonNullishLiteral(expression) {
+    const value = (0, unwrap_parenthesized_expression_1.unwrapParenthesizedExpression)(expression);
+    return ((0, literal_primitive_1.isLiteralPrimitive)(value) &&
+        (typeof value.value === 'number' ||
+            (typeof value.value === 'string' && value.value !== '')));
+}
+function getTrailingUnit(strings, expressionCount) {
+    return expressionCount === 1 &&
+        strings.length === 2 &&
+        strings[0] === '' &&
+        UNIT_ONLY.test(strings[1])
+        ? strings[1]
+        : null;
+}
+function getVerbatimValue({ valueSpan }, withSource, templateText) {
+    if (!valueSpan) {
+        return null;
+    }
+    const raw = templateText.slice(valueSpan.fullStart.offset, valueSpan.end.offset);
+    return raw === withSource?.source ? raw : null;
+}
+function asASTWithSource(value) {
+    return 'ast' in value && 'source' in value ? value : null;
+}
+function createUnitBindingFix(fixer, node, { unit, value }) {
+    const { keySpan, valueSpan } = node;
+    if (!valueSpan || value === null) {
+        return null;
+    }
+    return [
+        fixer.insertTextAfterRange([keySpan.start.offset, keySpan.end.offset], `.${unit}`),
+        fixer.replaceTextRange([valueSpan.fullStart.offset, valueSpan.end.offset], value),
+    ];
+}
 exports.RULE_DOCS_EXTENSION = {
-    rationale: 'For simple cases, [style] and [style.property] bindings offer a more straightforward syntax with better performance than ngStyle, and the Angular style guide recommends them over the NgStyle directive. However, ngStyle should still be used when you need mutations on objects, as style bindings compare the bound object by reference and only apply updates when a new object instance is provided. Note that ngStyle also accepts unit suffixes on object keys (for example `{ "max-width.px": width }`), which [style] object bindings do not support; express these as [style.max-width.px] bindings instead. See https://angular.dev/style-guide#prefer-class-and-style-over-ngclass-and-ngstyle and https://angular.dev/guide/templates/binding#css-class-and-style-property-bindings for more information. This rule helps identify potential simplification opportunities but should be applied judiciously based on your specific needs.',
+    rationale: 'For simple cases, [style] and [style.property] bindings offer a more straightforward syntax with better performance than ngStyle, and the Angular style guide recommends them over the NgStyle directive. However, ngStyle should still be used when you need mutations on objects, as style bindings compare the bound object by reference and only apply updates when a new object instance is provided. Note that ngStyle also accepts unit suffixes on object keys (for example `{ "max-width.px": width }`), which [style] object bindings do not support; express these as [style.max-width.px] bindings instead. See https://angular.dev/style-guide#prefer-class-and-style-over-ngclass-and-ngstyle and https://angular.dev/guide/templates/binding#css-class-and-style-property-bindings for more information. This rule helps identify potential simplification opportunities but should be applied judiciously based on your specific needs. The opt-in `bindUnits` option additionally flags `[style.property]` bindings that embed the CSS unit in the bound value, such as `[style.width]="\'30px\'"`, or a template literal or interpolation ending in the unit after a single expression, which Angular can express as `[style.property.unit]` bindings instead, keeping the unit in the template rather than in the bound value. Literal values are autofixed. Dynamic values are only offered as a suggestion, because the two forms differ when the value is null, undefined or an empty string: the unit binding removes the style, letting CSS fallbacks such as `var(--gap, 16px)` or other style bindings apply, while the original binding still appends the unit (for example `nullpx` from a template literal, or just `px` from an interpolation).',
 };

package/dist/rules/prefer-template-literal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prefer-template-literal.d.ts","sourceRoot":"","sources":["../../src/rules/prefer-template-literal.ts"],"names":[],"mappings":"AAeA,QAAA,MAAM,SAAS,0BAA0B,CAAC;AAE1C,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC;AAC1C,eAAO,MAAM,SAAS,4BAA4B,CAAC;;;;AA6FnD,wBAiKG;AAEH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}
+{"version":3,"file":"prefer-template-literal.d.ts","sourceRoot":"","sources":["../../src/rules/prefer-template-literal.ts"],"names":[],"mappings":"AAeA,QAAA,MAAM,SAAS,0BAA0B,CAAC;AAE1C,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC;AAC1C,eAAO,MAAM,SAAS,4BAA4B,CAAC;;;;AAoGnD,wBAiKG;AAEH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/prefer-template-literal.js

@@ -75,6 +75,12 @@ function flattenBinaryConcat(node) {
     // Any other expression - use the unwrapped node (without parentheses)
     return [{ type: 'expression', node: unwrapped }];
 }
+function escapeLiteral(value, quote) {
+    const escaped = value
+        .replaceAll('\\', '\\\\')
+        .replaceAll(quote, `\\${quote}`);
+    return quote === '`' ? escaped.replaceAll('${', '\\${') : escaped;
+}
 exports.default = (0, create_eslint_rule_1.createESLintRule)({
     name: exports.RULE_NAME,
     meta: {
@@ -168,17 +174,20 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
                         // Build the replacement string from all parts
                         const effectiveQuote = quote === '' ? '`' : quote;
                         let replacement = '';
+                        let pendingLiteral = '';
                         for (const part of parts) {
                             if (part.type === 'literal') {
-                                // Escape the quote character in the value
-                                replacement += part.value.replaceAll(effectiveQuote, `\\${effectiveQuote}`);
+                                pendingLiteral += part.value;
                             }
                             else {
+                                replacement += escapeLiteral(pendingLiteral, effectiveQuote);
+                                pendingLiteral = '';
                                 // Expression - wrap in ${}
                                 const exprText = sourceCode.text.slice(part.node.sourceSpan.start, part.node.sourceSpan.end);
                                 replacement += `\${${exprText}}`;
                             }
                         }
+                        replacement += escapeLiteral(pendingLiteral, effectiveQuote);
                         // Add quotes if not inside a template literal
                         if (!parentIsTemplateLiteral) {
                             replacement = `${quote}${replacement}${quote}`;

package/dist/rules/valid-aria.d.ts

@@ -1,5 +1,5 @@
 export type Options = [];
-export type MessageIds = 'validAria' | 'validAriaValue' | 'suggestRemoveInvalidAria';
+export type MessageIds = 'validAria' | 'validAriaValue' | 'suggestRemoveInvalidAria' | 'invalidAttrBindingName' | 'suggestRenameAria';
 export declare const RULE_NAME = "valid-aria";
 declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<MessageIds, [], import("../utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
     name: string;

package/dist/rules/valid-aria.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"valid-aria.d.ts","sourceRoot":"","sources":["../../src/rules/valid-aria.ts"],"names":[],"mappings":"AAgBA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GACpB,WAAW,GAAG,gBAAgB,GAAG,0BAA0B,CAAC;AAC9D,eAAO,MAAM,SAAS,eAAe,CAAC;;;;AAEtC,wBA8EG;AA+FH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}
+{"version":3,"file":"valid-aria.d.ts","sourceRoot":"","sources":["../../src/rules/valid-aria.ts"],"names":[],"mappings":"AAiBA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAClB,WAAW,GACX,gBAAgB,GAChB,0BAA0B,GAC1B,wBAAwB,GACxB,mBAAmB,CAAC;AACxB,eAAO,MAAM,SAAS,eAAe,CAAC;;;;AAMtC,wBAgIG;AAyGH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/valid-aria.js

@@ -21,6 +21,8 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
             validAria: 'The `{{attribute}}` is an invalid ARIA attribute',
             validAriaValue: 'The `{{attribute}}` has an invalid value. Check the valid values at https://raw.githack.com/w3c/aria/stable/#roles',
             suggestRemoveInvalidAria: 'Remove attribute `{{attribute}}`',
+            invalidAttrBindingName: '`attr.{{attribute}}` sets a literal attribute named `{{attribute}}`; use the hyphenated `attr.{{suggested}}` instead',
+            suggestRenameAria: 'Rename to `{{suggested}}`',
         },
         defaultOptions: [],
     },
@@ -32,27 +34,59 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
             ...domElements,
             ...uppercaseDomElements,
         ]);
+        function reportInvalidAria(node) {
+            const { name: attribute, sourceSpan } = node;
+            context.report({
+                loc: parserServices.convertNodeSourceSpanToLoc(sourceSpan),
+                messageId: 'validAria',
+                data: { attribute },
+                suggest: [
+                    {
+                        messageId: 'suggestRemoveInvalidAria',
+                        data: { attribute },
+                        fix: (fixer) => fixer.removeRange([
+                            sourceSpan.start.offset - 1,
+                            sourceSpan.end.offset,
+                        ]),
+                    },
+                ],
+            });
+        }
         return {
-            [`Element[name=${elementNamePattern}] > :matches(BoundAttribute, TextAttribute)[name=/^aria-.+/]`](node) {
+            'Element > BoundAttribute[name=/^aria[A-Z]/]'(node) {
+                if (!isAttributeBinding(node)) {
+                    return;
+                }
+                const { name: attribute, sourceSpan, keySpan } = node;
+                const suggested = `aria-${attribute.slice('aria'.length).toLowerCase()}`;
+                // Only suggest a rename when the hyphenated name is a real ARIA attribute.
+                if (!aria_query_1.aria.get(suggested)) {
+                    reportInvalidAria(node);
+                    return;
+                }
+                context.report({
+                    loc: parserServices.convertNodeSourceSpanToLoc(sourceSpan),
+                    messageId: 'invalidAttrBindingName',
+                    data: { attribute, suggested },
+                    suggest: [
+                        {
+                            messageId: 'suggestRenameAria',
+                            data: { suggested: `attr.${suggested}` },
+                            fix: (fixer) => fixer.replaceTextRange([keySpan.end.offset - attribute.length, keySpan.end.offset], suggested),
+                        },
+                    ],
+                });
+            },
+            [`Element[name=${elementNamePattern}] > :matches(BoundAttribute, TextAttribute)[name=/^[aA][rR][iI][aA]-.+/]`](node) {
                 const { name: attribute, sourceSpan } = node;
-                const ariaPropertyDefinition = aria_query_1.aria.get(attribute);
+                // Only `attr.` bindings are matched case-insensitively.
+                if (!attribute.startsWith('aria-') && !isAttributeBinding(node)) {
+                    return;
+                }
+                const ariaPropertyDefinition = aria_query_1.aria.get(attribute.toLowerCase());
                 const loc = parserServices.convertNodeSourceSpanToLoc(sourceSpan);
                 if (!ariaPropertyDefinition) {
-                    context.report({
-                        loc,
-                        messageId: 'validAria',
-                        data: { attribute },
-                        suggest: [
-                            {
-                                messageId: 'suggestRemoveInvalidAria',
-                                data: { attribute },
-                                fix: (fixer) => fixer.removeRange([
-                                    sourceSpan.start.offset - 1,
-                                    sourceSpan.end.offset,
-                                ]),
-                            },
-                        ],
-                    });
+                    reportInvalidAria(node);
                     return;
                 }
                 const ast = extractASTFrom(node);
@@ -69,6 +103,11 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
         };
     },
 });
+function isAttributeBinding(node) {
+    return (node instanceof bundled_angular_compiler_1.TmplAstBoundAttribute &&
+        node.__originalType ===
+            bundled_angular_compiler_1.BindingType.Attribute);
+}
 function isLiteralCollection(ast) {
     return ast instanceof bundled_angular_compiler_1.LiteralArray || ast instanceof bundled_angular_compiler_1.LiteralMap;
 }

package/dist/utils/literal-primitive.d.ts

@@ -1,8 +1,10 @@
-import { AST, LiteralPrimitive } from '@angular-eslint/bundled-angular-compiler';
+import { AST, Interpolation, LiteralPrimitive, TemplateLiteral } from '@angular-eslint/bundled-angular-compiler';
 export type Quote = "'" | '"' | '`';
 export declare function isLiteralPrimitive(node: AST): node is LiteralPrimitive;
 export declare function isStringLiteralPrimitive(node: AST): node is Omit<LiteralPrimitive, 'value'> & {
     value: string;
 };
+export declare function isTemplateLiteral(node: AST): node is TemplateLiteral;
+export declare function isInterpolation(node: AST): node is Interpolation;
 export declare function getLiteralPrimitiveStringValue(node: LiteralPrimitive, quote: Quote): string;
 //# sourceMappingURL=literal-primitive.d.ts.map

package/dist/utils/literal-primitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"literal-primitive.d.ts","sourceRoot":"","sources":["../../src/utils/literal-primitive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,GAAG,EACH,gBAAgB,EACjB,MAAM,0CAA0C,CAAC;AAElD,MAAM,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEpC,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI,IAAI,gBAAgB,CAStE;AAED,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,GAAG,GACR,IAAI,IAAI,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAE7D;AAED,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,KAAK,GACX,MAAM,CAIR"}
+{"version":3,"file":"literal-primitive.d.ts","sourceRoot":"","sources":["../../src/utils/literal-primitive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,GAAG,EACH,aAAa,EACb,gBAAgB,EAChB,eAAe,EAChB,MAAM,0CAA0C,CAAC;AAElD,MAAM,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEpC,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI,IAAI,gBAAgB,CAStE;AAED,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,GAAG,GACR,IAAI,IAAI,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAE7D;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI,IAAI,eAAe,CAMpE;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI,IAAI,aAAa,CAMhE;AAED,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,KAAK,GACX,MAAM,CAIR"}

package/dist/utils/literal-primitive.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isLiteralPrimitive = isLiteralPrimitive;
 exports.isStringLiteralPrimitive = isStringLiteralPrimitive;
+exports.isTemplateLiteral = isTemplateLiteral;
+exports.isInterpolation = isInterpolation;
 exports.getLiteralPrimitiveStringValue = getLiteralPrimitiveStringValue;
 const bundled_angular_compiler_1 = require("@angular-eslint/bundled-angular-compiler");
 function isLiteralPrimitive(node) {
@@ -15,6 +17,16 @@ function isLiteralPrimitive(node) {
 function isStringLiteralPrimitive(node) {
     return isLiteralPrimitive(node) && typeof node.value === 'string';
 }
+function isTemplateLiteral(node) {
+    return (!!node &&
+        (node.type === 'TemplateLiteral' ||
+            node instanceof bundled_angular_compiler_1.TemplateLiteral));
+}
+function isInterpolation(node) {
+    return (!!node &&
+        (node.type === 'Interpolation' ||
+            node instanceof bundled_angular_compiler_1.Interpolation));
+}
 function getLiteralPrimitiveStringValue(node, quote) {
     return typeof node.value === 'string'
         ? `${node.value.replaceAll(quote, `\\${quote}`)}`

package/package.json

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