forked from jsx-eslint/eslint-plugin-jsx-a11y
/
aria-proptypes.js
112 lines (97 loc) · 3.61 KB
/
aria-proptypes.js
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
101
102
103
104
105
106
107
108
109
110
111
112
/**
* @fileoverview Enforce ARIA state and property values are valid.
* @author Ethan Cohen
*/
// ----------------------------------------------------------------------------
// Rule Definition
// ----------------------------------------------------------------------------
import { aria } from 'aria-query';
import { getLiteralPropValue, getPropValue, propName } from 'jsx-ast-utils';
import { generateObjSchema } from '../util/schemas';
const errorMessage = (name, type, permittedValues) => {
switch (type) {
case 'tristate':
return `The value for ${name} must be a boolean or the string "mixed".`;
case 'token':
return `The value for ${name} must be a single token from the following: ${permittedValues}.`;
case 'tokenlist':
return `The value for ${name} must be a list of one or more \
tokens from the following: ${permittedValues}.`;
case 'idlist':
return `The value for ${name} must be a list of strings that represent DOM element IDs (idlist)`;
case 'id':
return `The value for ${name} must be a string that represents a DOM element ID`;
case 'boolean':
case 'string':
case 'integer':
case 'number':
default:
return `The value for ${name} must be a ${type}.`;
}
};
const validityCheck = (value, expectedType, permittedValues) => {
switch (expectedType) {
case 'boolean':
return typeof value === 'boolean';
case 'string':
case 'id':
return typeof value === 'string';
case 'tristate':
return typeof value === 'boolean' || value === 'mixed';
case 'integer':
case 'number':
// Booleans resolve to 0/1 values so hard check that it's not first.
// eslint-disable-next-line no-restricted-globals
return typeof value !== 'boolean' && isNaN(Number(value)) === false;
case 'token':
return permittedValues.indexOf(typeof value === 'string' ? value.toLowerCase() : value) > -1;
case 'idlist':
return typeof value === 'string'
&& value.split(' ').every((token) => validityCheck(token, 'id', []));
case 'tokenlist':
return typeof value === 'string'
&& value.split(' ').every((token) => permittedValues.indexOf(token.toLowerCase()) > -1);
default:
return false;
}
};
const schema = generateObjSchema();
export default {
validityCheck,
meta: {
docs: {
url: 'https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules/aria-proptypes.md',
},
schema: [schema],
},
create: (context) => ({
JSXAttribute: (attribute) => {
const name = propName(attribute);
const normalizedName = name.toLowerCase();
// Not a valid aria-* state or property.
if (normalizedName.indexOf('aria-') !== 0 || aria.get(normalizedName) === undefined) {
return;
}
// Ignore the attribute if its value is null or undefined.
if (getPropValue(attribute) == null) return;
const value = getLiteralPropValue(attribute);
// Ignore the attribute if its value is not a literal.
if (value === null) {
return;
}
// These are the attributes of the property/state to check against.
const attributes = aria.get(normalizedName);
const permittedType = attributes.type;
const allowUndefined = attributes.allowUndefined || false;
const permittedValues = attributes.values || [];
const isValid = validityCheck(value, permittedType, permittedValues) || (allowUndefined && value === undefined);
if (isValid) {
return;
}
context.report({
node: attribute,
message: errorMessage(name, permittedType, permittedValues),
});
},
}),
};