feat(rule): no distracting elements should be used (#760)

src/index.ts

@@ -36,6 +36,7 @@ export { Rule as TemplatesAccessibilityAnchorContentRule } from './templateAcces
 export { Rule as TemplateClickEventsHaveKeyEventsRule } from './templateClickEventsHaveKeyEventsRule';
 export { Rule as TemplateAccessibilityAltTextRule } from './templateAccessibilityAltTextRule';
 export { Rule as TemplateAccessibilityTableScopeRule } from './templateAccessibilityTableScopeRule';
+export { Rule as TemplateNoDistractingElementsRule } from './templateNoDistractingElementsRule';
 export { Rule as TemplatesNoNegatedAsync } from './templatesNoNegatedAsyncRule';
 export { Rule as TemplateNoAutofocusRule } from './templateNoAutofocusRule';
 export { Rule as TrackByFunctionRule } from './trackByFunctionRule';

src/templateNoDistractingElementsRule.ts

@@ -0,0 +1,51 @@
+import { ElementAst } from '@angular/compiler';
+import { sprintf } from 'sprintf-js';
+import { IRuleMetadata, RuleFailure, Rules } from 'tslint/lib';
+import { SourceFile } from 'typescript/lib/typescript';
+import { NgWalker } from './angular/ngWalker';
+import { BasicTemplateAstVisitor } from './angular/templates/basicTemplateAstVisitor';
+
+export class Rule extends Rules.AbstractRule {
+  static readonly metadata: IRuleMetadata = {
+    description: 'Enforces that no distracting elements are used',
+    options: null,
+    optionsDescription: 'Not configurable.',
+    rationale: 'Elements that can be visually distracting can cause accessibility issues with visually impaired users.',
+    ruleName: 'template-no-distracting-elements',
+    type: 'functionality',
+    typescriptOnly: true
+  };
+
+  static readonly FAILURE_STRING = 'Avoid using <%s/> elements as they create visual accessibility issues.';
+
+  apply(sourceFile: SourceFile): RuleFailure[] {
+    return this.applyWithWalker(
+      new NgWalker(sourceFile, this.getOptions(), {
+        templateVisitorCtrl: TemplateNoDistractingElementsVisitor
+      })
+    );
+  }
+}
+
+export function getFailureMessage(element: string) {
+  return sprintf(Rule.FAILURE_STRING, element);
+}
+
+class TemplateNoDistractingElementsVisitor extends BasicTemplateAstVisitor {
+  visitElement(prop: ElementAst, context: any): any {
+    this.validateElement(prop);
+    super.visitElement(prop, context);
+  }
+
+  private validateElement(el: ElementAst): void {
+    if (el.name === 'marquee' || el.name === 'blink') {
+      const {
+        sourceSpan: {
+          end: { offset: endOffset },
+          start: { offset: startOffset }
+        }
+      } = el;
+      this.addFailureFromStartToEnd(startOffset, endOffset, getFailureMessage(el.name));
+    }
+  }
+}

test/templateNoDistractingElementsRule.spec.ts

@@ -0,0 +1,58 @@
+import { getFailureMessage, Rule } from '../src/templateNoDistractingElementsRule';
+import { assertAnnotated, assertSuccess } from './testHelper';
+
+const {
+  metadata: { ruleName }
+} = Rule;
+
+describe(ruleName, () => {
+  describe('failure', () => {
+    it('should fail when distracting element marquee is used', () => {
+      const source = `
+        @Component({
+          template: \`
+            <marquee></marquee>
+            ~~~~~~~~~
+          \`
+        })
+        class Bar {}
+      `;
+      assertAnnotated({
+        message: getFailureMessage('marquee'),
+        ruleName,
+        source
+      });
+    });
+
+    it('should fail when distracting element blink is used', () => {
+      const source = `
+        @Component({
+          template: \`
+            <blink></blink>
+            ~~~~~~~
+          \`
+        })
+        class Bar {}
+      `;
+      assertAnnotated({
+        message: getFailureMessage('blink'),
+        ruleName,
+        source
+      });
+    });
+  });
+
+  describe('success', () => {
+    it('should work when distracting element is not used', () => {
+      const source = `
+        @Component({
+          template: \`
+            <div>Valid</div>
+          \`
+        })
+        class Bar {}
+      `;
+      assertSuccess(ruleName, source);
+    });
+  });
+});