feat(rule): anchor element should have content (#742)

Author: mohammedzamakhan

src/index.ts

@@ -30,6 +30,7 @@ export { Rule as TemplateConditionalComplexityRule } from './templateConditional
 export { Rule as TemplateCyclomaticComplexityRule } from './templateCyclomaticComplexityRule';
 export { Rule as TemplateAccessibilityTabindexNoPositiveRule } from './templateAccessibilityTabindexNoPositiveRule';
 export { Rule as TemplateAccessibilityLabelForVisitor } from './templateAccessibilityLabelForRule';
+export { Rule as TemplatesAccessibilityAnchorContentRule } from './templateAccessibilityAnchorContentRule';
 export { Rule as TemplatesNoNegatedAsync } from './templatesNoNegatedAsyncRule';
 export { Rule as TemplateNoAutofocusRule } from './templateNoAutofocusRule';
 export { Rule as TrackByFunctionRule } from './trackByFunctionRule';

src/templateAccessibilityAnchorContentRule.ts

@@ -0,0 +1,53 @@
+import { ElementAst } from '@angular/compiler';
+import { IRuleMetadata, RuleFailure, Rules, Utils } from 'tslint/lib';
+import { SourceFile } from 'typescript';
+import { NgWalker } from './angular/ngWalker';
+import { BasicTemplateAstVisitor } from './angular';
+
+class TemplateAccessibilityAnchorContentVisitor extends BasicTemplateAstVisitor {
+  visitElement(ast: ElementAst, context: any) {
+    this.validateElement(ast);
+    super.visitElement(ast, context);
+  }
+
+  validateElement(element: ElementAst) {
+    if (element.name !== 'a') {
+      return;
+    }
+
+    const hasContent = element.children.length;
+    const hasInnerContent = element.inputs.some(input => input.name === 'innerHTML' || input.name === 'innerText');
+    if (hasContent || hasInnerContent) {
+      return;
+    }
+    const {
+      sourceSpan: {
+        end: { offset: endOffset },
+        start: { offset: startOffset }
+      }
+    } = element;
+    this.addFailureFromStartToEnd(startOffset, endOffset, Rule.FAILURE_MESSAGE);
+  }
+}
+
+export class Rule extends Rules.AbstractRule {
+  static readonly metadata: IRuleMetadata = {
+    description: 'Ensures that the anchor element has some content in it',
+    options: null,
+    optionsDescription: 'Not configurable.',
+    rationale: 'Anchor elements should have content to be accessible by screen readers',
+    ruleName: 'template-accessibility-anchor-content',
+    type: 'functionality',
+    typescriptOnly: true
+  };
+
+  static readonly FAILURE_MESSAGE = 'Anchor element should have content';
+
+  apply(sourceFile: SourceFile): RuleFailure[] {
+    return this.applyWithWalker(
+      new NgWalker(sourceFile, this.getOptions(), {
+        templateVisitorCtrl: TemplateAccessibilityAnchorContentVisitor
+      })
+    );
+  }
+}

test/templateAccessibilityAnchorContentRule.spec.ts

@@ -0,0 +1,45 @@
+import { Rule } from '../src/templateAccessibilityAnchorContentRule';
+import { assertAnnotated, assertSuccess } from './testHelper';
+
+const {
+  FAILURE_MESSAGE,
+  metadata: { ruleName }
+} = Rule;
+
+describe(ruleName, () => {
+  describe('failure', () => {
+    it('should fail with no content in anchor tag', () => {
+      const source = `
+        @Component({
+          template: \`
+            <a href="#" [routerLink]="['route1']"></a>
+            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+          \`
+        })
+        class Bar {}
+      `;
+      assertAnnotated({
+        message: FAILURE_MESSAGE,
+        ruleName,
+        source
+      });
+    });
+  });
+
+  describe('success', () => {
+    it('should work when anchor has any kind of content in it', () => {
+      const source = `
+        @Component({
+          template: \`
+            <a>Anchor Content!</a>
+            <a><app-content></app-content></a>
+            <a [innerHTML]="dangerouslySetHTML"></a>
+            <a [innerText]="text"></a>
+          \`
+        })
+        class Bar {}
+      `;
+      assertSuccess(ruleName, source);
+    });
+  });
+});