-
Notifications
You must be signed in to change notification settings - Fork 234
/
templateAccessibilityLabelForRule.ts
100 lines (91 loc) · 3.52 KB
/
templateAccessibilityLabelForRule.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import { BoundDirectivePropertyAst, ElementAst } from '@angular/compiler';
import { sprintf } from 'sprintf-js';
import { IRuleMetadata, RuleFailure, Rules, Utils } from 'tslint/lib';
import { SourceFile } from 'typescript/lib/typescript';
import { NgWalker } from './angular/ngWalker';
import { BasicTemplateAstVisitor } from './angular/templates/basicTemplateAstVisitor';
import { mayContainChildComponent } from './util/mayContainChildComponent';
interface ILabelForOptions {
labelComponents: string[];
labelAttributes: string[];
controlComponents: string[];
}
export class Rule extends Rules.AbstractRule {
static readonly metadata: IRuleMetadata = {
description: 'Checks if the label has associated for attribute or a form element',
optionExamples: [[true, { labelComponents: ['app-label'], labelAttributes: ['id'], controlComponents: ['app-input', 'app-select'] }]],
options: {
items: {
type: 'object',
properties: {
labelComponents: {
type: 'array',
items: {
type: 'string'
}
},
labelAttributes: {
type: 'array',
items: {
type: 'string'
}
},
controlComponents: {
type: 'array',
items: {
type: 'string'
}
}
}
},
type: 'array'
},
optionsDescription: 'Add custom label, label attribute and controls',
rationale: Utils.dedent`
The label tag should either have a for attribute or should have associated control.
This rule supports two ways, either the label component should explicitly have a for attribute or a control nested inside the label component
It also supports adding custom control component and custom label component support.`,
ruleName: 'template-accessibility-label-for',
type: 'functionality',
typescriptOnly: true
};
static readonly FAILURE_STRING = 'A form label must be associated with a control';
static readonly FORM_ELEMENTS = ['input', 'select', 'textarea'];
apply(sourceFile: SourceFile): RuleFailure[] {
return this.applyWithWalker(
new NgWalker(sourceFile, this.getOptions(), {
templateVisitorCtrl: TemplateAccessibilityLabelForVisitor
})
);
}
}
class TemplateAccessibilityLabelForVisitor extends BasicTemplateAstVisitor {
visitElement(element: ElementAst, context: any) {
this.validateElement(element);
super.visitElement(element, context);
}
private validateElement(element: ElementAst) {
let { labelAttributes, labelComponents, controlComponents }: ILabelForOptions = this.getOptions() || {};
controlComponents = Rule.FORM_ELEMENTS.concat(controlComponents || []);
labelComponents = ['label'].concat(labelComponents || []);
labelAttributes = ['for'].concat(labelAttributes || []);
if (labelComponents.indexOf(element.name) === -1) {
return;
}
const hasForAttr = element.attrs.some(attr => labelAttributes.indexOf(attr.name) !== -1);
const hasForInput = element.inputs.some(input => {
return labelAttributes.indexOf(input.name) !== -1;
});
const hasImplicitFormElement = controlComponents.some(component => mayContainChildComponent(element, component));
if (hasForAttr || hasForInput || hasImplicitFormElement) {
return;
}
const {
sourceSpan: {
end: { offset: endOffset },
start: { offset: startOffset }
}
} = element;
this.addFailureFromStartToEnd(startOffset, endOffset, Rule.FAILURE_STRING);
}
}