-
-
Notifications
You must be signed in to change notification settings - Fork 208
/
accessibility-role-has-required-aria.ts
95 lines (86 loc) · 2.82 KB
/
accessibility-role-has-required-aria.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
import type {
TmplAstTextAttribute,
TmplAstElement,
} from '@angular-eslint/bundled-angular-compiler';
import type { ARIARoleDefinitionKey } from 'aria-query';
import { roles } from 'aria-query';
import {
createESLintRule,
getTemplateParserServices,
} from '../utils/create-eslint-rule';
import { getDomElements } from '../utils/get-dom-elements';
import { toPattern } from '../utils/to-pattern';
import { isSemanticRoleElement } from '../utils/is-semantic-role-element';
type Options = [];
export type MessageIds = 'roleHasRequiredAria' | 'suggestRemoveRole';
export const RULE_NAME = 'accessibility-role-has-required-aria';
export default createESLintRule<Options, MessageIds>({
name: RULE_NAME,
meta: {
type: 'suggestion',
docs: {
description:
'Ensures elements with ARIA roles have all required properties for that role.',
recommended: false,
},
hasSuggestions: true,
schema: [],
messages: {
roleHasRequiredAria:
'The {{element}} with role="{{role}}" does not have required ARIA properties: {{missingProps}}',
suggestRemoveRole: 'Remove role `{{role}}`',
},
},
defaultOptions: [],
create(context) {
const parserServices = getTemplateParserServices(context);
const elementNamePattern = toPattern([...getDomElements()]);
return {
[`Element$1[name=${elementNamePattern}] > TextAttribute[name='role']`](
node: TmplAstTextAttribute & {
parent: TmplAstElement;
},
) {
const { value: role, sourceSpan } = node;
const { attributes, inputs, name: element } = node.parent;
const props = [...attributes, ...inputs];
const roleDef = roles.get(role as ARIARoleDefinitionKey);
const requiredProps = Object.keys(roleDef?.requiredProps || {});
if (!requiredProps.length) return;
if (isSemanticRoleElement(element, role, props)) return;
const missingProps = requiredProps
.filter(
(requiredProp) => !props.find((prop) => prop.name === requiredProp),
)
.join(', ');
if (missingProps) {
const loc = parserServices.convertNodeSourceSpanToLoc(sourceSpan);
context.report({
loc,
messageId: 'roleHasRequiredAria',
data: {
element,
role,
missingProps,
},
suggest: [
{
messageId: 'suggestRemoveRole',
data: {
element,
role,
missingProps,
},
fix: (fixer) =>
fixer.removeRange([
sourceSpan?.start.offset - 1,
sourceSpan?.end.offset,
]),
},
],
});
}
},
};
},
});