diff --git a/src/index.ts b/src/index.ts
index 09f7a2b60..bcec4b20a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -44,7 +44,6 @@ export { Rule as TemplateNoCallExpressionRule } from './templateNoCallExpression
export { Rule as TemplateNoDistractingElementsRule } from './templateNoDistractingElementsRule';
export { Rule as TemplateNoNegatedAsyncRule } from './templateNoNegatedAsyncRule';
export { Rule as TemplateUseTrackByFunctionRule } from './templateUseTrackByFunctionRule';
-export { Rule as TemplatesAccessibilityAnchorContentRule } from './templateAccessibilityAnchorContentRule';
export { Rule as UseComponentSelectorRule } from './useComponentSelectorRule';
export { Rule as UseComponentViewEncapsulationRule } from './useComponentViewEncapsulationRule';
export { Rule as UseLifecycleInterfaceRule } from './useLifecycleInterfaceRule';
diff --git a/src/templateAccessibilityAnchorContentRule.ts b/src/templateAccessibilityElementsContentRule.ts
similarity index 54%
rename from src/templateAccessibilityAnchorContentRule.ts
rename to src/templateAccessibilityElementsContentRule.ts
index 704ed5c5c..4435977c7 100644
--- a/src/templateAccessibilityAnchorContentRule.ts
+++ b/src/templateAccessibilityElementsContentRule.ts
@@ -1,17 +1,18 @@
import { ElementAst } from '@angular/compiler';
-import { IRuleMetadata, RuleFailure, Rules, Utils } from 'tslint/lib';
+import { IRuleMetadata, RuleFailure, Rules } from 'tslint/lib';
import { SourceFile } from 'typescript';
+import { sprintf } from 'sprintf-js';
import { NgWalker } from './angular/ngWalker';
import { BasicTemplateAstVisitor } from './angular';
-class TemplateAccessibilityAnchorContentVisitor extends BasicTemplateAstVisitor {
+class TemplateAccessibilityElementsContentVisitor extends BasicTemplateAstVisitor {
visitElement(ast: ElementAst, context: any) {
this.validateElement(ast);
super.visitElement(ast, context);
}
validateElement(element: ElementAst) {
- if (element.name !== 'a') {
+ if (Rule.ELEMENTS.indexOf(element.name) === -1) {
return;
}
@@ -26,27 +27,32 @@ class TemplateAccessibilityAnchorContentVisitor extends BasicTemplateAstVisitor
start: { offset: startOffset }
}
} = element;
- this.addFailureFromStartToEnd(startOffset, endOffset, Rule.FAILURE_MESSAGE);
+ this.addFailureFromStartToEnd(startOffset, endOffset, getErrorMessage(element.name));
}
}
+export const getErrorMessage = (element: string): string => {
+ return sprintf(Rule.FAILURE_STRING, element);
+};
+
export class Rule extends Rules.AbstractRule {
static readonly metadata: IRuleMetadata = {
- description: 'Ensures that the anchor element has some content in it',
+ description: 'Ensures that the heading, anchor and button elements have 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',
+ rationale: 'Heading, anchor and button elements should have content to be accessible by screen readers',
+ ruleName: 'template-accessibility-elements-content',
type: 'functionality',
typescriptOnly: true
};
- static readonly FAILURE_MESSAGE = 'Anchor element should have content';
+ static readonly FAILURE_STRING = '<%s/> element should have content';
+ static readonly ELEMENTS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'button'];
apply(sourceFile: SourceFile): RuleFailure[] {
return this.applyWithWalker(
new NgWalker(sourceFile, this.getOptions(), {
- templateVisitorCtrl: TemplateAccessibilityAnchorContentVisitor
+ templateVisitorCtrl: TemplateAccessibilityElementsContentVisitor
})
);
}
diff --git a/test/templateAccessibilityAnchorContentRule.spec.ts b/test/templateAccessibilityAnchorContentRule.spec.ts
deleted file mode 100644
index 32ee73d5a..000000000
--- a/test/templateAccessibilityAnchorContentRule.spec.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-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: \`
-
- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- \`
- })
- 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: \`
- Anchor Content!
-