Update aria-query and axobject-query to the latest versions

jsx-eslint · Dec 2, 2019 · 8e0d22b · 8e0d22b
1 parent 2fec9f7
commit 8e0d22b
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 44 deletions.
diff --git a/__mocks__/genInteractives.js b/__mocks__/genInteractives.js
@@ -18,9 +18,8 @@ const interactiveElementsMap = {
   audio: [],
   button: [],
   canvas: [],
+  datalist: [],
   embed: [],
-  label: [],
-  link: [],
   input: [],
   'input[type="button"]': [{ prop: 'type', value: 'button' }],
   'input[type="checkbox"]': [{ prop: 'type', value: 'checkbox' }],
@@ -43,6 +42,7 @@ const interactiveElementsMap = {
   'input[type="time"]': [{ prop: 'type', value: 'time' }],
   'input[type="url"]': [{ prop: 'type', value: 'url' }],
   'input[type="week"]': [{ prop: 'type', value: 'week' }],
+  link: [{ prop: 'href', value: '#' }],
   menuitem: [],
   option: [],
   select: [],
@@ -56,10 +56,12 @@ const interactiveElementsMap = {
   video: [],
 };
 
-const nonInteractiveElementsMap = {
+const nonInteractiveElementsMap: {[string]: Array<{[string]: string}>} = {
   abbr: [],
+  aside: [],
   article: [],
   blockquote: [],
+  body: [],
   br: [],
   caption: [],
   dd: [],
@@ -84,6 +86,7 @@ const nonInteractiveElementsMap = {
   hr: [],
   iframe: [],
   img: [],
+  label: [],
   legend: [],
   li: [],
   main: [],
@@ -93,11 +96,14 @@ const nonInteractiveElementsMap = {
   meter: [],
   nav: [],
   ol: [],
+  optgroup: [],
+  output: [],
   p: [],
   pre: [],
   progress: [],
   ruby: [],
-  section: [],
+  'section[aria-label]': [{ prop: 'aria-label' }],
+  'section[aria-labelledby]': [{ prop: 'aria-labelledby' }],
   table: [],
   tbody: [],
   td: [],

diff --git a/__tests__/src/rules/control-has-associated-label-test.js b/__tests__/src/rules/control-has-associated-label-test.js
@@ -45,7 +45,6 @@ const alwaysValid = [
   { code: '<button><span><span label="Save"></span></span></button>', options: [{ depth: 3, labelAttributes: ['label'] }] },
   { code: '<a href="#">Save</a>' },
   { code: '<area href="#">Save</area>' },
-  { code: '<label>Save</label>' },
   { code: '<link>Save</link>' },
   { code: '<menuitem>Save</menuitem>' },
   { code: '<option>Save</option>' },
@@ -139,6 +138,7 @@ const alwaysValid = [
   { code: '<hr />' },
   { code: '<iframe />' },
   { code: '<img />' },
+  { code: '<label />' },
   { code: '<legend />' },
   { code: '<li />' },
   { code: '<link />' },
@@ -254,7 +254,6 @@ const neverValid = [
   { code: '<CustomControl><span><span></span></span></CustomControl>', options: [{ depth: 3, controlComponents: ['CustomControl'] }], errors: [expectedError] },
   { code: '<a href="#" />', errors: [expectedError] },
   { code: '<area href="#" />', errors: [expectedError] },
-  { code: '<label />', errors: [expectedError] },
   { code: '<menuitem />', errors: [expectedError] },
   { code: '<option />', errors: [expectedError] },
   { code: '<th />', errors: [expectedError] },

diff --git a/__tests__/src/rules/no-noninteractive-element-interactions-test.js b/__tests__/src/rules/no-noninteractive-element-interactions-test.js
@@ -65,7 +65,6 @@ const alwaysValid = [
   { code: '<a onClick={() => void 0} href="http://x.y.z" tabIndex="0" />' },
   { code: '<area onClick={() => {}} />;' },
   { code: '<button onClick={() => void 0} className="foo" />' },
-  { code: '<label onClick={() => {}} />;' },
   { code: '<menuitem onClick={() => {}} />;' },
   { code: '<option onClick={() => void 0} className="foo" />' },
   { code: '<select onClick={() => void 0} className="foo" />' },
@@ -75,15 +74,13 @@ const alwaysValid = [
   { code: '<acronym onClick={() => {}} />;' },
   { code: '<address onClick={() => {}} />;' },
   { code: '<applet onClick={() => {}} />;' },
-  { code: '<aside onClick={() => {}} />;' },
   { code: '<audio onClick={() => {}} />;' },
   { code: '<b onClick={() => {}} />;' },
   { code: '<base onClick={() => {}} />;' },
   { code: '<bdi onClick={() => {}} />;' },
   { code: '<bdo onClick={() => {}} />;' },
   { code: '<big onClick={() => {}} />;' },
   { code: '<blink onClick={() => {}} />;' },
-  { code: '<body onClick={() => {}} />;' },
   { code: '<body onLoad={() => {}} />;' },
   { code: '<canvas onClick={() => {}} />;' },
   { code: '<center onClick={() => {}} />;' },
@@ -138,8 +135,6 @@ const alwaysValid = [
   { code: '<noembed onClick={() => {}} />;' },
   { code: '<noscript onClick={() => {}} />;' },
   { code: '<object onClick={() => {}} />;' },
-  { code: '<optgroup onClick={() => {}} />;' },
-  { code: '<output onClick={() => {}} />;' },
   { code: '<param onClick={() => {}} />;' },
   { code: '<picture onClick={() => {}} />;' },
   { code: '<q onClick={() => {}} />;' },
@@ -149,6 +144,7 @@ const alwaysValid = [
   { code: '<s onClick={() => {}} />;' },
   { code: '<samp onClick={() => {}} />;' },
   { code: '<script onClick={() => {}} />;' },
+  { code: '<section onClick={() => {}} />;' },
   { code: '<small onClick={() => {}} />;' },
   { code: '<source onClick={() => {}} />;' },
   { code: '<spacer onClick={() => {}} />;' },
@@ -262,7 +258,9 @@ const neverValid = [
   /* HTML elements with an inherent, non-interactive role */
   { code: '<main onClick={() => void 0} />;', errors: [expectedError] },
   { code: '<article onClick={() => {}} />;', errors: [expectedError] },
+  { code: '<aside onClick={() => {}} />;', errors: [expectedError] },
   { code: '<blockquote onClick={() => {}} />;', errors: [expectedError] },
+  { code: '<body onClick={() => {}} />;', errors: [expectedError] },
   { code: '<br onClick={() => {}} />;', errors: [expectedError] },
   { code: '<caption onClick={() => {}} />;', errors: [expectedError] },
   { code: '<dd onClick={() => {}} />;', errors: [expectedError] },
@@ -286,6 +284,7 @@ const neverValid = [
   { code: '<hr onClick={() => {}} />;', errors: [expectedError] },
   { code: '<iframe onClick={() => {}} />;', errors: [expectedError] },
   { code: '<img onClick={() => {}} />;', errors: [expectedError] },
+  { code: '<label onClick={() => {}} />;', errors: [expectedError] },
   { code: '<legend onClick={() => {}} />;', errors: [expectedError] },
   { code: '<li onClick={() => {}} />;', errors: [expectedError] },
   { code: '<mark onClick={() => {}} />;', errors: [expectedError] },
@@ -294,11 +293,14 @@ const neverValid = [
   { code: '<meter onClick={() => {}} />;', errors: [expectedError] },
   { code: '<nav onClick={() => {}} />;', errors: [expectedError] },
   { code: '<ol onClick={() => {}} />;', errors: [expectedError] },
+  { code: '<optgroup onClick={() => {}} />;', errors: [expectedError] },
+  { code: '<output onClick={() => {}} />;', errors: [expectedError] },
   { code: '<p onClick={() => {}} />;', errors: [expectedError] },
   { code: '<pre onClick={() => {}} />;', errors: [expectedError] },
   { code: '<progress onClick={() => {}} />;', errors: [expectedError] },
   { code: '<ruby onClick={() => {}} />;', errors: [expectedError] },
-  { code: '<section onClick={() => {}} />;', errors: [expectedError] },
+  { code: '<section onClick={() => {}} aria-label="Aardvark" />;', errors: [expectedError] },
+  { code: '<section onClick={() => {}} aria-labelledby="js_1" />;', errors: [expectedError] },
   { code: '<table onClick={() => {}} />;', errors: [expectedError] },
   { code: '<tbody onClick={() => {}} />;', errors: [expectedError] },
   { code: '<td onClick={() => {}} />;', errors: [expectedError] },

diff --git a/__tests__/src/rules/no-noninteractive-element-to-interactive-role-test.js b/__tests__/src/rules/no-noninteractive-element-to-interactive-role-test.js
@@ -138,7 +138,6 @@ const alwaysValid = [
   { code: '<input type="url" role="listitem" />' },
   { code: '<input type="week" role="listitem" />' },
   /* End all flavors of input */
-  { code: '<label role="button" />;' },
   { code: '<menuitem role="listitem" />;' },
   { code: '<option className="foo" role="listitem" />' },
   { code: '<select className="foo" role="listitem" />' },
@@ -148,15 +147,13 @@ const alwaysValid = [
   { code: '<acronym role="button" />;' },
   { code: '<address role="button" />;' },
   { code: '<applet role="button" />;' },
-  { code: '<aside role="button" />;' },
   { code: '<audio role="button" />;' },
   { code: '<b role="button" />;' },
   { code: '<base role="button" />;' },
   { code: '<bdi role="button" />;' },
   { code: '<bdo role="button" />;' },
   { code: '<big role="button" />;' },
   { code: '<blink role="button" />;' },
-  { code: '<body role="button" />;' },
   { code: '<canvas role="button" />;' },
   { code: '<center role="button" />;' },
   { code: '<cite role="button" />;' },
@@ -194,8 +191,6 @@ const alwaysValid = [
   { code: '<noembed role="button" />;' },
   { code: '<noscript role="button" />;' },
   { code: '<object role="button" />;' },
-  { code: '<optgroup role="button" />;' },
-  { code: '<output role="button" />;' },
   { code: '<param role="button" />;' },
   { code: '<picture role="button" />;' },
   { code: '<q role="button" />;' },
@@ -354,7 +349,9 @@ const neverValid = [
   { code: '<main role="button" />;', errors: [expectedError] },
   { code: '<article role="button" />;', errors: [expectedError] },
   { code: '<article role="button" />;', errors: [expectedError] },
+  { code: '<aside role="button" />;', errors: [expectedError] },
   { code: '<blockquote role="button" />;', errors: [expectedError] },
+  { code: '<body role="button" />;', errors: [expectedError] },
   { code: '<br role="button" />;', errors: [expectedError] },
   { code: '<caption role="button" />;', errors: [expectedError] },
   { code: '<dd role="button" />;', errors: [expectedError] },
@@ -378,6 +375,7 @@ const neverValid = [
   { code: '<hr role="button" />;', errors: [expectedError] },
   { code: '<iframe role="button" />;', errors: [expectedError] },
   { code: '<img role="button" />;', errors: [expectedError] },
+  { code: '<label role="button" />;', errors: [expectedError] },
   { code: '<legend role="button" />;', errors: [expectedError] },
   { code: '<li role="button" />;', errors: [expectedError] },
   { code: '<mark role="button" />;', errors: [expectedError] },
@@ -386,6 +384,8 @@ const neverValid = [
   { code: '<meter role="button" />;', errors: [expectedError] },
   { code: '<nav role="button" />;', errors: [expectedError] },
   { code: '<ol role="button" />;', errors: [expectedError] },
+  { code: '<optgroup role="button" />;', errors: [expectedError] },
+  { code: '<output role="button" />;', errors: [expectedError] },
   { code: '<pre role="button" />;', errors: [expectedError] },
   { code: '<progress role="button" />;', errors: [expectedError] },
   { code: '<ruby role="button" />;', errors: [expectedError] },
@@ -419,7 +419,7 @@ const neverValid = [
   { code: '<nav role="menuitem" />;', errors: [expectedError] },
   { code: '<ol role="menuitem" />;', errors: [expectedError] },
   { code: '<p role="button" />;', errors: [expectedError] },
-  { code: '<section role="button" />;', errors: [expectedError] },
+  { code: '<section role="button" aria-label="Aardvark" />;', errors: [expectedError] },
   { code: '<table role="menuitem" />;', errors: [expectedError] },
   { code: '<tbody role="menuitem" />;', errors: [expectedError] },
   { code: '<td role="menuitem" />;', errors: [expectedError] },

diff --git a/__tests__/src/rules/no-static-element-interactions-test.js b/__tests__/src/rules/no-static-element-interactions-test.js
@@ -65,6 +65,7 @@ const alwaysValid = [
   { code: '<input type="week" onClick={() => void 0} />' },
   /* End all flavors of input */
   { code: '<button onClick={() => void 0} className="foo" />' },
+  { code: '<datalist onClick={() => {}} />;' },
   { code: '<menuitem onClick={() => {}} />;' },
   { code: '<option onClick={() => void 0} className="foo" />' },
   { code: '<select onClick={() => void 0} className="foo" />' },
@@ -74,6 +75,7 @@ const alwaysValid = [
   { code: '<audio onClick={() => {}} />;' },
   { code: '<form onClick={() => {}} />;' },
   { code: '<form onSubmit={() => {}} />;' },
+  { code: '<link onClick={() => {}} href="#" />;' },
   /* HTML elements attributed with an interactive role */
   { code: '<div role="button" onClick={() => {}} />;' },
   { code: '<div role="checkbox" onClick={() => {}} />;' },
@@ -99,10 +101,11 @@ const alwaysValid = [
   { code: '<div role="presentation" onClick={() => {}} />;' },
   { code: '<div role="presentation" onKeyDown={() => {}} />;' },
   /* HTML elements with an inherent, non-interactive role */
-  { code: '<main onClick={() => void 0} />;' },
   { code: '<article onClick={() => {}} />;' },
   { code: '<article onDblClick={() => void 0} />;' },
+  { code: '<aside onClick={() => {}} />;' },
   { code: '<blockquote onClick={() => {}} />;' },
+  { code: '<body onClick={() => {}} />;' },
   { code: '<br onClick={() => {}} />;' },
   { code: '<canvas onClick={() => {}} />;' },
   { code: '<caption onClick={() => {}} />;' },
@@ -130,17 +133,21 @@ const alwaysValid = [
   { code: '<label onClick={() => {}} />;' },
   { code: '<legend onClick={() => {}} />;' },
   { code: '<li onClick={() => {}} />;' },
-  { code: '<link onClick={() => {}} />;' },
+  { code: '<main onClick={() => void 0} />;' },
   { code: '<mark onClick={() => {}} />;' },
   { code: '<marquee onClick={() => {}} />;' },
   { code: '<menu onClick={() => {}} />;' },
   { code: '<meter onClick={() => {}} />;' },
   { code: '<nav onClick={() => {}} />;' },
   { code: '<ol onClick={() => {}} />;' },
+  { code: '<optgroup onClick={() => {}} />;' },
+  { code: '<output onClick={() => {}} />;' },
   { code: '<p onClick={() => {}} />;' },
   { code: '<pre onClick={() => {}} />;' },
   { code: '<progress onClick={() => {}} />;' },
   { code: '<ruby onClick={() => {}} />;' },
+  { code: '<section onClick={() => {}} aria-label="Aa" />;' },
+  { code: '<section onClick={() => {}} aria-labelledby="js_1" />;' },
   { code: '<table onClick={() => {}} />;' },
   { code: '<tbody onClick={() => {}} />;' },
   { code: '<tfoot onClick={() => {}} />;' },
@@ -273,22 +280,19 @@ const neverValid = [
   { code: '<acronym onClick={() => {}} />;', errors: [expectedError] },
   { code: '<address onClick={() => {}} />;', errors: [expectedError] },
   { code: '<applet onClick={() => {}} />;', errors: [expectedError] },
-  { code: '<aside onClick={() => {}} />;', errors: [expectedError] },
   { code: '<b onClick={() => {}} />;', errors: [expectedError] },
   { code: '<base onClick={() => {}} />;', errors: [expectedError] },
   { code: '<bdi onClick={() => {}} />;', errors: [expectedError] },
   { code: '<bdo onClick={() => {}} />;', errors: [expectedError] },
   { code: '<big onClick={() => {}} />;', errors: [expectedError] },
   { code: '<blink onClick={() => {}} />;', errors: [expectedError] },
-  { code: '<body onClick={() => {}} />;', errors: [expectedError] },
   { code: '<center onClick={() => {}} />;', errors: [expectedError] },
   { code: '<cite onClick={() => {}} />;', errors: [expectedError] },
   { code: '<code onClick={() => {}} />;', errors: [expectedError] },
   { code: '<col onClick={() => {}} />;', errors: [expectedError] },
   { code: '<colgroup onClick={() => {}} />;', errors: [expectedError] },
   { code: '<content onClick={() => {}} />;', errors: [expectedError] },
   { code: '<data onClick={() => {}} />;', errors: [expectedError] },
-  { code: '<datalist onClick={() => {}} />;', errors: [expectedError] },
   { code: '<del onClick={() => {}} />;', errors: [expectedError] },
   { code: '<div onClick={() => {}} />;', errors: [expectedError] },
   { code: '<em onClick={() => {}} />;', errors: [expectedError] },
@@ -307,8 +311,6 @@ const neverValid = [
   { code: '<noembed onClick={() => {}} />;', errors: [expectedError] },
   { code: '<noscript onClick={() => {}} />;', errors: [expectedError] },
   { code: '<object onClick={() => {}} />;', errors: [expectedError] },
-  { code: '<optgroup onClick={() => {}} />;', errors: [expectedError] },
-  { code: '<output onClick={() => {}} />;', errors: [expectedError] },
   { code: '<param onClick={() => {}} />;', errors: [expectedError] },
   { code: '<picture onClick={() => {}} />;', errors: [expectedError] },
   { code: '<q onClick={() => {}} />;', errors: [expectedError] },
@@ -318,6 +320,7 @@ const neverValid = [
   { code: '<s onClick={() => {}} />;', errors: [expectedError] },
   { code: '<samp onClick={() => {}} />;', errors: [expectedError] },
   { code: '<script onClick={() => {}} />;', errors: [expectedError] },
+  { code: '<section onClick={() => {}} />;', errors: [expectedError] },
   { code: '<small onClick={() => {}} />;', errors: [expectedError] },
   { code: '<source onClick={() => {}} />;', errors: [expectedError] },
   { code: '<spacer onClick={() => {}} />;', errors: [expectedError] },

diff --git a/package.json b/package.json
@@ -59,11 +59,11 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.4.5",
-    "aria-query": "^3.0.0",
+    "aria-query": "^4.0.1",
     "array-includes": "^3.0.3",
     "ast-types-flow": "^0.0.7",
     "axe-core": "^3.4.0",
-    "axobject-query": "^2.0.2",
+    "axobject-query": "^2.1.1",
     "damerau-levenshtein": "^1.0.4",
     "emoji-regex": "^7.0.2",
     "has": "^1.0.3",

diff --git a/src/util/isInteractiveElement.js b/src/util/isInteractiveElement.js
@@ -23,24 +23,32 @@ const nonInteractiveRoles = new Set(roleKeys
     const role = roles.get(name);
     return (
       !role.abstract
+        // 'toolbar' does not descend from widget, but it does support
+        // aria-activedescendant, thus in practice we treat it as a widget.
+        && name !== 'toolbar'
         && !role.superClass.some((classes) => includes(classes, 'widget'))
     );
-  }));
+  }).concat(
+    // The `progressbar` is descended from `widget`, but in practice, its
+    // value is always `readonly`, so we treat it as a non-interactive role.
+    'progressbar',
+  ));
 
-const interactiveRoles = new Set([].concat(
-  roleKeys,
-  // 'toolbar' does not descend from widget, but it does support
-  // aria-activedescendant, thus in practice we treat it as a widget.
-  'toolbar',
-)
+const interactiveRoles = new Set(roleKeys
   .filter((name) => {
     const role = roles.get(name);
     return (
       !role.abstract
+      // The `progressbar` is descended from `widget`, but in practice, its
+      // value is always `readonly`, so we treat it as a non-interactive role.
+        && name !== 'progressbar'
         && role.superClass.some((classes) => includes(classes, 'widget'))
     );
-  }));
-
+  }).concat(
+    // 'toolbar' does not descend from widget, but it does support
+    // aria-activedescendant, thus in practice we treat it as a widget.
+    'toolbar',
+  ));
 
 const nonInteractiveElementRoleSchemas = elementRoleEntries
   .reduce((