fix(eslint-plugin-template): [accessibility-valid-aria] ignore custom…

… elements (#552)
angular-eslint · Jun 19, 2021 · f6466ec · f6466ec
1 parent 5e33995
commit f6466ec
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 23 deletions.
diff --git a/packages/eslint-plugin-template/src/rules/accessibility-valid-aria.ts b/packages/eslint-plugin-template/src/rules/accessibility-valid-aria.ts
@@ -1,5 +1,6 @@
-import type { AST, ASTWithSource } from '@angular/compiler';
+import type { AST } from '@angular/compiler';
 import {
+  ASTWithSource,
   LiteralArray,
   LiteralMap,
   LiteralPrimitive,
@@ -12,14 +13,15 @@ import {
   createESLintRule,
   getTemplateParserServices,
 } from '../utils/create-eslint-rule';
+import { getDomElements } from '../utils/get-dom-elements';
+import { toPattern } from '../utils/to-pattern';
 
 type Options = [];
 export type MessageIds =
   | 'accessibilityValidAria'
   | 'accessibilityValidAriaValue'
   | 'suggestRemoveInvalidAria';
 export const RULE_NAME = 'accessibility-valid-aria';
-const ARIA_PATTERN = /^aria-.*/;
 
 export default createESLintRule<Options, MessageIds>({
   name: RULE_NAME,
@@ -44,15 +46,14 @@ export default createESLintRule<Options, MessageIds>({
   defaultOptions: [],
   create(context) {
     const parserServices = getTemplateParserServices(context);
+    const elementNamePattern = toPattern([...getDomElements()]);
 
     return {
-      [`BoundAttribute[name=${ARIA_PATTERN}], TextAttribute[name=${ARIA_PATTERN}]`](
-        astAttribute: TmplAstBoundAttribute | TmplAstTextAttribute,
+      [`Element[name=${elementNamePattern}] > :matches(BoundAttribute, TextAttribute)[name=/^aria-.+/]`](
+        node: TmplAstBoundAttribute | TmplAstTextAttribute,
       ) {
-        const { name: attribute, sourceSpan } = astAttribute;
-        const ariaPropertyDefinition = aria.get(attribute as ARIAProperty) as
-          | ARIAPropertyDefinition
-          | undefined;
+        const { name: attribute, sourceSpan } = node;
+        const ariaPropertyDefinition = aria.get(attribute as ARIAProperty);
         const loc = parserServices.convertNodeSourceSpanToLoc(sourceSpan);
 
         if (!ariaPropertyDefinition) {
@@ -76,7 +77,7 @@ export default createESLintRule<Options, MessageIds>({
           return;
         }
 
-        const ast = extractASTFrom(astAttribute);
+        const ast = extractASTFrom(node);
 
         if (
           canIgnoreNode(ast) ||
@@ -114,9 +115,10 @@ function canIgnoreNode(ast: unknown): boolean {
 
 function extractASTFrom(
   attribute: TmplAstBoundAttribute | TmplAstTextAttribute,
-): AST | TmplAstTextAttribute {
-  return attribute instanceof TmplAstBoundAttribute
-    ? (attribute.value as ASTWithSource).ast
+): AST | TmplAstBoundAttribute | TmplAstTextAttribute {
+  return attribute instanceof TmplAstBoundAttribute &&
+    attribute.value instanceof ASTWithSource
+    ? attribute.value.ast
     : attribute;
 }
 

diff --git a/packages/eslint-plugin-template/tests/rules/accessibility-valid-aria.test.ts b/packages/eslint-plugin-template/tests/rules/accessibility-valid-aria.test.ts
@@ -18,18 +18,19 @@ const suggestRemoveInvalidAria: MessageIds = 'suggestRemoveInvalidAria';
 
 ruleTester.run(RULE_NAME, rule, {
   valid: [
+    '<input aria-labelledby="Text">',
+    '<div ariaselected="0"></div>',
+    '<textarea [attr.aria-readonly]="readonly"></textarea>',
+    '<button [variant]="variant">Text</button>',
+    '<div aria-expanded="true">aria-expanded</div>',
+    '<div aria-haspopup="menu">aria-haspopup</div>',
+    '<div [attr.aria-pressed]="undefined">aria-pressed</div>',
+    '<input [attr.aria-rowcount]="2">',
+    '<div aria-relevant="additions">additions</div>',
+    '<div aria-checked="false">checked</div>',
+    '<div role="slider" [aria-valuemin]="1"></div>',
+    '<div aria-="text">Text</div>',
     `
-      <input aria-labelledby="Text">
-      <div ariaselected="0"></div>
-      <textarea [attr.aria-readonly]="readonly"></textarea>
-      <button [variant]="variant">Text</button>
-      <div aria-expanded="true">aria-expanded</div>
-      <div aria-haspopup="menu">aria-haspopup</div>
-      <div [attr.aria-pressed]="undefined">aria-pressed</div>
-      <input [attr.aria-rowcount]="2">
-      <div aria-relevant="additions">additions</div>
-      <div aria-checked="false">checked</div>
-      <div role="slider" [aria-valuemin]="1"></div>
       <input
         aria-placeholder="Placeholder"
         aria-orientation="undefined"
@@ -40,6 +41,8 @@ ruleTester.run(RULE_NAME, rule, {
         [attr.aria-live]="inputSchema['live']"
         [attr.aria-required]="inputSchema?.isRequired">
     `,
+    '<app-custom aria-x="text">Text</app-custom>',
+    '<app-test aria-expanded="notABoolean"></app-test>',
   ],
   invalid: [
     convertAnnotatedSourceToFailureCase({