Skip to content

Commit 8e0d22b

Browse files
jessebeachjessebeach
committed
Update aria-query and axobject-query to the latest versions
1 parent 2fec9f7 commit 8e0d22b

8 files changed

+71
-44
lines changed

‎__mocks__/genInteractives.js

+10-4
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,8 @@ const interactiveElementsMap = {
1818
audio: [],
1919
button: [],
2020
canvas: [],
21+
datalist: [],
2122
embed: [],
22-
label: [],
23-
link: [],
2423
input: [],
2524
'input[type="button"]': [{ prop: 'type', value: 'button' }],
2625
'input[type="checkbox"]': [{ prop: 'type', value: 'checkbox' }],
@@ -43,6 +42,7 @@ const interactiveElementsMap = {
4342
'input[type="time"]': [{ prop: 'type', value: 'time' }],
4443
'input[type="url"]': [{ prop: 'type', value: 'url' }],
4544
'input[type="week"]': [{ prop: 'type', value: 'week' }],
45+
link: [{ prop: 'href', value: '#' }],
4646
menuitem: [],
4747
option: [],
4848
select: [],
@@ -56,10 +56,12 @@ const interactiveElementsMap = {
5656
video: [],
5757
};
5858

59-
const nonInteractiveElementsMap = {
59+
const nonInteractiveElementsMap: {[string]: Array<{[string]: string}>} = {
6060
abbr: [],
61+
aside: [],
6162
article: [],
6263
blockquote: [],
64+
body: [],
6365
br: [],
6466
caption: [],
6567
dd: [],
@@ -84,6 +86,7 @@ const nonInteractiveElementsMap = {
8486
hr: [],
8587
iframe: [],
8688
img: [],
89+
label: [],
8790
legend: [],
8891
li: [],
8992
main: [],
@@ -93,11 +96,14 @@ const nonInteractiveElementsMap = {
9396
meter: [],
9497
nav: [],
9598
ol: [],
99+
optgroup: [],
100+
output: [],
96101
p: [],
97102
pre: [],
98103
progress: [],
99104
ruby: [],
100-
section: [],
105+
'section[aria-label]': [{ prop: 'aria-label' }],
106+
'section[aria-labelledby]': [{ prop: 'aria-labelledby' }],
101107
table: [],
102108
tbody: [],
103109
td: [],

‎__tests__/src/rules/control-has-associated-label-test.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ const alwaysValid = [
4545
{ code: '<button><span><span label="Save"></span></span></button>', options: [{ depth: 3, labelAttributes: ['label'] }] },
4646
{ code: '<a href="#">Save</a>' },
4747
{ code: '<area href="#">Save</area>' },
48-
{ code: '<label>Save</label>' },
4948
{ code: '<link>Save</link>' },
5049
{ code: '<menuitem>Save</menuitem>' },
5150
{ code: '<option>Save</option>' },
@@ -139,6 +138,7 @@ const alwaysValid = [
139138
{ code: '<hr />' },
140139
{ code: '<iframe />' },
141140
{ code: '<img />' },
141+
{ code: '<label />' },
142142
{ code: '<legend />' },
143143
{ code: '<li />' },
144144
{ code: '<link />' },
@@ -254,7 +254,6 @@ const neverValid = [
254254
{ code: '<CustomControl><span><span></span></span></CustomControl>', options: [{ depth: 3, controlComponents: ['CustomControl'] }], errors: [expectedError] },
255255
{ code: '<a href="#" />', errors: [expectedError] },
256256
{ code: '<area href="#" />', errors: [expectedError] },
257-
{ code: '<label />', errors: [expectedError] },
258257
{ code: '<menuitem />', errors: [expectedError] },
259258
{ code: '<option />', errors: [expectedError] },
260259
{ code: '<th />', errors: [expectedError] },

‎__tests__/src/rules/no-noninteractive-element-interactions-test.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ const alwaysValid = [
6565
{ code: '<a onClick={() => void 0} href="http://x.y.z" tabIndex="0" />' },
6666
{ code: '<area onClick={() => {}} />;' },
6767
{ code: '<button onClick={() => void 0} className="foo" />' },
68-
{ code: '<label onClick={() => {}} />;' },
6968
{ code: '<menuitem onClick={() => {}} />;' },
7069
{ code: '<option onClick={() => void 0} className="foo" />' },
7170
{ code: '<select onClick={() => void 0} className="foo" />' },
@@ -75,15 +74,13 @@ const alwaysValid = [
7574
{ code: '<acronym onClick={() => {}} />;' },
7675
{ code: '<address onClick={() => {}} />;' },
7776
{ code: '<applet onClick={() => {}} />;' },
78-
{ code: '<aside onClick={() => {}} />;' },
7977
{ code: '<audio onClick={() => {}} />;' },
8078
{ code: '<b onClick={() => {}} />;' },
8179
{ code: '<base onClick={() => {}} />;' },
8280
{ code: '<bdi onClick={() => {}} />;' },
8381
{ code: '<bdo onClick={() => {}} />;' },
8482
{ code: '<big onClick={() => {}} />;' },
8583
{ code: '<blink onClick={() => {}} />;' },
86-
{ code: '<body onClick={() => {}} />;' },
8784
{ code: '<body onLoad={() => {}} />;' },
8885
{ code: '<canvas onClick={() => {}} />;' },
8986
{ code: '<center onClick={() => {}} />;' },
@@ -138,8 +135,6 @@ const alwaysValid = [
138135
{ code: '<noembed onClick={() => {}} />;' },
139136
{ code: '<noscript onClick={() => {}} />;' },
140137
{ code: '<object onClick={() => {}} />;' },
141-
{ code: '<optgroup onClick={() => {}} />;' },
142-
{ code: '<output onClick={() => {}} />;' },
143138
{ code: '<param onClick={() => {}} />;' },
144139
{ code: '<picture onClick={() => {}} />;' },
145140
{ code: '<q onClick={() => {}} />;' },
@@ -149,6 +144,7 @@ const alwaysValid = [
149144
{ code: '<s onClick={() => {}} />;' },
150145
{ code: '<samp onClick={() => {}} />;' },
151146
{ code: '<script onClick={() => {}} />;' },
147+
{ code: '<section onClick={() => {}} />;' },
152148
{ code: '<small onClick={() => {}} />;' },
153149
{ code: '<source onClick={() => {}} />;' },
154150
{ code: '<spacer onClick={() => {}} />;' },
@@ -262,7 +258,9 @@ const neverValid = [
262258
/* HTML elements with an inherent, non-interactive role */
263259
{ code: '<main onClick={() => void 0} />;', errors: [expectedError] },
264260
{ code: '<article onClick={() => {}} />;', errors: [expectedError] },
261+
{ code: '<aside onClick={() => {}} />;', errors: [expectedError] },
265262
{ code: '<blockquote onClick={() => {}} />;', errors: [expectedError] },
263+
{ code: '<body onClick={() => {}} />;', errors: [expectedError] },
266264
{ code: '<br onClick={() => {}} />;', errors: [expectedError] },
267265
{ code: '<caption onClick={() => {}} />;', errors: [expectedError] },
268266
{ code: '<dd onClick={() => {}} />;', errors: [expectedError] },
@@ -286,6 +284,7 @@ const neverValid = [
286284
{ code: '<hr onClick={() => {}} />;', errors: [expectedError] },
287285
{ code: '<iframe onClick={() => {}} />;', errors: [expectedError] },
288286
{ code: '<img onClick={() => {}} />;', errors: [expectedError] },
287+
{ code: '<label onClick={() => {}} />;', errors: [expectedError] },
289288
{ code: '<legend onClick={() => {}} />;', errors: [expectedError] },
290289
{ code: '<li onClick={() => {}} />;', errors: [expectedError] },
291290
{ code: '<mark onClick={() => {}} />;', errors: [expectedError] },
@@ -294,11 +293,14 @@ const neverValid = [
294293
{ code: '<meter onClick={() => {}} />;', errors: [expectedError] },
295294
{ code: '<nav onClick={() => {}} />;', errors: [expectedError] },
296295
{ code: '<ol onClick={() => {}} />;', errors: [expectedError] },
296+
{ code: '<optgroup onClick={() => {}} />;', errors: [expectedError] },
297+
{ code: '<output onClick={() => {}} />;', errors: [expectedError] },
297298
{ code: '<p onClick={() => {}} />;', errors: [expectedError] },
298299
{ code: '<pre onClick={() => {}} />;', errors: [expectedError] },
299300
{ code: '<progress onClick={() => {}} />;', errors: [expectedError] },
300301
{ code: '<ruby onClick={() => {}} />;', errors: [expectedError] },
301-
{ code: '<section onClick={() => {}} />;', errors: [expectedError] },
302+
{ code: '<section onClick={() => {}} aria-label="Aardvark" />;', errors: [expectedError] },
303+
{ code: '<section onClick={() => {}} aria-labelledby="js_1" />;', errors: [expectedError] },
302304
{ code: '<table onClick={() => {}} />;', errors: [expectedError] },
303305
{ code: '<tbody onClick={() => {}} />;', errors: [expectedError] },
304306
{ code: '<td onClick={() => {}} />;', errors: [expectedError] },

‎__tests__/src/rules/no-noninteractive-element-to-interactive-role-test.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,6 @@ const alwaysValid = [
138138
{ code: '<input type="url" role="listitem" />' },
139139
{ code: '<input type="week" role="listitem" />' },
140140
/* End all flavors of input */
141-
{ code: '<label role="button" />;' },
142141
{ code: '<menuitem role="listitem" />;' },
143142
{ code: '<option className="foo" role="listitem" />' },
144143
{ code: '<select className="foo" role="listitem" />' },
@@ -148,15 +147,13 @@ const alwaysValid = [
148147
{ code: '<acronym role="button" />;' },
149148
{ code: '<address role="button" />;' },
150149
{ code: '<applet role="button" />;' },
151-
{ code: '<aside role="button" />;' },
152150
{ code: '<audio role="button" />;' },
153151
{ code: '<b role="button" />;' },
154152
{ code: '<base role="button" />;' },
155153
{ code: '<bdi role="button" />;' },
156154
{ code: '<bdo role="button" />;' },
157155
{ code: '<big role="button" />;' },
158156
{ code: '<blink role="button" />;' },
159-
{ code: '<body role="button" />;' },
160157
{ code: '<canvas role="button" />;' },
161158
{ code: '<center role="button" />;' },
162159
{ code: '<cite role="button" />;' },
@@ -194,8 +191,6 @@ const alwaysValid = [
194191
{ code: '<noembed role="button" />;' },
195192
{ code: '<noscript role="button" />;' },
196193
{ code: '<object role="button" />;' },
197-
{ code: '<optgroup role="button" />;' },
198-
{ code: '<output role="button" />;' },
199194
{ code: '<param role="button" />;' },
200195
{ code: '<picture role="button" />;' },
201196
{ code: '<q role="button" />;' },
@@ -354,7 +349,9 @@ const neverValid = [
354349
{ code: '<main role="button" />;', errors: [expectedError] },
355350
{ code: '<article role="button" />;', errors: [expectedError] },
356351
{ code: '<article role="button" />;', errors: [expectedError] },
352+
{ code: '<aside role="button" />;', errors: [expectedError] },
357353
{ code: '<blockquote role="button" />;', errors: [expectedError] },
354+
{ code: '<body role="button" />;', errors: [expectedError] },
358355
{ code: '<br role="button" />;', errors: [expectedError] },
359356
{ code: '<caption role="button" />;', errors: [expectedError] },
360357
{ code: '<dd role="button" />;', errors: [expectedError] },
@@ -378,6 +375,7 @@ const neverValid = [
378375
{ code: '<hr role="button" />;', errors: [expectedError] },
379376
{ code: '<iframe role="button" />;', errors: [expectedError] },
380377
{ code: '<img role="button" />;', errors: [expectedError] },
378+
{ code: '<label role="button" />;', errors: [expectedError] },
381379
{ code: '<legend role="button" />;', errors: [expectedError] },
382380
{ code: '<li role="button" />;', errors: [expectedError] },
383381
{ code: '<mark role="button" />;', errors: [expectedError] },
@@ -386,6 +384,8 @@ const neverValid = [
386384
{ code: '<meter role="button" />;', errors: [expectedError] },
387385
{ code: '<nav role="button" />;', errors: [expectedError] },
388386
{ code: '<ol role="button" />;', errors: [expectedError] },
387+
{ code: '<optgroup role="button" />;', errors: [expectedError] },
388+
{ code: '<output role="button" />;', errors: [expectedError] },
389389
{ code: '<pre role="button" />;', errors: [expectedError] },
390390
{ code: '<progress role="button" />;', errors: [expectedError] },
391391
{ code: '<ruby role="button" />;', errors: [expectedError] },
@@ -419,7 +419,7 @@ const neverValid = [
419419
{ code: '<nav role="menuitem" />;', errors: [expectedError] },
420420
{ code: '<ol role="menuitem" />;', errors: [expectedError] },
421421
{ code: '<p role="button" />;', errors: [expectedError] },
422-
{ code: '<section role="button" />;', errors: [expectedError] },
422+
{ code: '<section role="button" aria-label="Aardvark" />;', errors: [expectedError] },
423423
{ code: '<table role="menuitem" />;', errors: [expectedError] },
424424
{ code: '<tbody role="menuitem" />;', errors: [expectedError] },
425425
{ code: '<td role="menuitem" />;', errors: [expectedError] },

‎__tests__/src/rules/no-static-element-interactions-test.js

+10-7
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ const alwaysValid = [
6565
{ code: '<input type="week" onClick={() => void 0} />' },
6666
/* End all flavors of input */
6767
{ code: '<button onClick={() => void 0} className="foo" />' },
68+
{ code: '<datalist onClick={() => {}} />;' },
6869
{ code: '<menuitem onClick={() => {}} />;' },
6970
{ code: '<option onClick={() => void 0} className="foo" />' },
7071
{ code: '<select onClick={() => void 0} className="foo" />' },
@@ -74,6 +75,7 @@ const alwaysValid = [
7475
{ code: '<audio onClick={() => {}} />;' },
7576
{ code: '<form onClick={() => {}} />;' },
7677
{ code: '<form onSubmit={() => {}} />;' },
78+
{ code: '<link onClick={() => {}} href="#" />;' },
7779
/* HTML elements attributed with an interactive role */
7880
{ code: '<div role="button" onClick={() => {}} />;' },
7981
{ code: '<div role="checkbox" onClick={() => {}} />;' },
@@ -99,10 +101,11 @@ const alwaysValid = [
99101
{ code: '<div role="presentation" onClick={() => {}} />;' },
100102
{ code: '<div role="presentation" onKeyDown={() => {}} />;' },
101103
/* HTML elements with an inherent, non-interactive role */
102-
{ code: '<main onClick={() => void 0} />;' },
103104
{ code: '<article onClick={() => {}} />;' },
104105
{ code: '<article onDblClick={() => void 0} />;' },
106+
{ code: '<aside onClick={() => {}} />;' },
105107
{ code: '<blockquote onClick={() => {}} />;' },
108+
{ code: '<body onClick={() => {}} />;' },
106109
{ code: '<br onClick={() => {}} />;' },
107110
{ code: '<canvas onClick={() => {}} />;' },
108111
{ code: '<caption onClick={() => {}} />;' },
@@ -130,17 +133,21 @@ const alwaysValid = [
130133
{ code: '<label onClick={() => {}} />;' },
131134
{ code: '<legend onClick={() => {}} />;' },
132135
{ code: '<li onClick={() => {}} />;' },
133-
{ code: '<link onClick={() => {}} />;' },
136+
{ code: '<main onClick={() => void 0} />;' },
134137
{ code: '<mark onClick={() => {}} />;' },
135138
{ code: '<marquee onClick={() => {}} />;' },
136139
{ code: '<menu onClick={() => {}} />;' },
137140
{ code: '<meter onClick={() => {}} />;' },
138141
{ code: '<nav onClick={() => {}} />;' },
139142
{ code: '<ol onClick={() => {}} />;' },
143+
{ code: '<optgroup onClick={() => {}} />;' },
144+
{ code: '<output onClick={() => {}} />;' },
140145
{ code: '<p onClick={() => {}} />;' },
141146
{ code: '<pre onClick={() => {}} />;' },
142147
{ code: '<progress onClick={() => {}} />;' },
143148
{ code: '<ruby onClick={() => {}} />;' },
149+
{ code: '<section onClick={() => {}} aria-label="Aa" />;' },
150+
{ code: '<section onClick={() => {}} aria-labelledby="js_1" />;' },
144151
{ code: '<table onClick={() => {}} />;' },
145152
{ code: '<tbody onClick={() => {}} />;' },
146153
{ code: '<tfoot onClick={() => {}} />;' },
@@ -273,22 +280,19 @@ const neverValid = [
273280
{ code: '<acronym onClick={() => {}} />;', errors: [expectedError] },
274281
{ code: '<address onClick={() => {}} />;', errors: [expectedError] },
275282
{ code: '<applet onClick={() => {}} />;', errors: [expectedError] },
276-
{ code: '<aside onClick={() => {}} />;', errors: [expectedError] },
277283
{ code: '<b onClick={() => {}} />;', errors: [expectedError] },
278284
{ code: '<base onClick={() => {}} />;', errors: [expectedError] },
279285
{ code: '<bdi onClick={() => {}} />;', errors: [expectedError] },
280286
{ code: '<bdo onClick={() => {}} />;', errors: [expectedError] },
281287
{ code: '<big onClick={() => {}} />;', errors: [expectedError] },
282288
{ code: '<blink onClick={() => {}} />;', errors: [expectedError] },
283-
{ code: '<body onClick={() => {}} />;', errors: [expectedError] },
284289
{ code: '<center onClick={() => {}} />;', errors: [expectedError] },
285290
{ code: '<cite onClick={() => {}} />;', errors: [expectedError] },
286291
{ code: '<code onClick={() => {}} />;', errors: [expectedError] },
287292
{ code: '<col onClick={() => {}} />;', errors: [expectedError] },
288293
{ code: '<colgroup onClick={() => {}} />;', errors: [expectedError] },
289294
{ code: '<content onClick={() => {}} />;', errors: [expectedError] },
290295
{ code: '<data onClick={() => {}} />;', errors: [expectedError] },
291-
{ code: '<datalist onClick={() => {}} />;', errors: [expectedError] },
292296
{ code: '<del onClick={() => {}} />;', errors: [expectedError] },
293297
{ code: '<div onClick={() => {}} />;', errors: [expectedError] },
294298
{ code: '<em onClick={() => {}} />;', errors: [expectedError] },
@@ -307,8 +311,6 @@ const neverValid = [
307311
{ code: '<noembed onClick={() => {}} />;', errors: [expectedError] },
308312
{ code: '<noscript onClick={() => {}} />;', errors: [expectedError] },
309313
{ code: '<object onClick={() => {}} />;', errors: [expectedError] },
310-
{ code: '<optgroup onClick={() => {}} />;', errors: [expectedError] },
311-
{ code: '<output onClick={() => {}} />;', errors: [expectedError] },
312314
{ code: '<param onClick={() => {}} />;', errors: [expectedError] },
313315
{ code: '<picture onClick={() => {}} />;', errors: [expectedError] },
314316
{ code: '<q onClick={() => {}} />;', errors: [expectedError] },
@@ -318,6 +320,7 @@ const neverValid = [
318320
{ code: '<s onClick={() => {}} />;', errors: [expectedError] },
319321
{ code: '<samp onClick={() => {}} />;', errors: [expectedError] },
320322
{ code: '<script onClick={() => {}} />;', errors: [expectedError] },
323+
{ code: '<section onClick={() => {}} />;', errors: [expectedError] },
321324
{ code: '<small onClick={() => {}} />;', errors: [expectedError] },
322325
{ code: '<source onClick={() => {}} />;', errors: [expectedError] },
323326
{ code: '<spacer onClick={() => {}} />;', errors: [expectedError] },

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,11 @@
5959
"license": "MIT",
6060
"dependencies": {
6161
"@babel/runtime": "^7.4.5",
62-
"aria-query": "^3.0.0",
62+
"aria-query": "^4.0.1",
6363
"array-includes": "^3.0.3",
6464
"ast-types-flow": "^0.0.7",
6565
"axe-core": "^3.4.0",
66-
"axobject-query": "^2.0.2",
66+
"axobject-query": "^2.1.1",
6767
"damerau-levenshtein": "^1.0.4",
6868
"emoji-regex": "^7.0.2",
6969
"has": "^1.0.3",

‎src/util/isInteractiveElement.js

+17-9
Original file line numberDiff line numberDiff line change
@@ -23,24 +23,32 @@ const nonInteractiveRoles = new Set(roleKeys
2323
const role = roles.get(name);
2424
return (
2525
!role.abstract
26+
// 'toolbar' does not descend from widget, but it does support
27+
// aria-activedescendant, thus in practice we treat it as a widget.
28+
&& name !== 'toolbar'
2629
&& !role.superClass.some((classes) => includes(classes, 'widget'))
2730
);
28-
}));
31+
}).concat(
32+
// The `progressbar` is descended from `widget`, but in practice, its
33+
// value is always `readonly`, so we treat it as a non-interactive role.
34+
'progressbar',
35+
));
2936

30-
const interactiveRoles = new Set([].concat(
31-
roleKeys,
32-
// 'toolbar' does not descend from widget, but it does support
33-
// aria-activedescendant, thus in practice we treat it as a widget.
34-
'toolbar',
35-
)
37+
const interactiveRoles = new Set(roleKeys
3638
.filter((name) => {
3739
const role = roles.get(name);
3840
return (
3941
!role.abstract
42+
// The `progressbar` is descended from `widget`, but in practice, its
43+
// value is always `readonly`, so we treat it as a non-interactive role.
44+
&& name !== 'progressbar'
4045
&& role.superClass.some((classes) => includes(classes, 'widget'))
4146
);
42-
}));
43-
47+
}).concat(
48+
// 'toolbar' does not descend from widget, but it does support
49+
// aria-activedescendant, thus in practice we treat it as a widget.
50+
'toolbar',
51+
));
4452

4553
const nonInteractiveElementRoleSchemas = elementRoleEntries
4654
.reduce((

0 commit comments

Comments
 (0)