fix(aria-required-children): only match for roles that require childr…

…en (#2703)

* fix(aria-required-children): only match for roles that require children

* fix

* fix tests

lib/core/base/metadata-function-map.js

@@ -132,6 +132,7 @@ import ariaAllowedAttrMatches from '../../rules/aria-allowed-attr-matches';
 import ariaAllowedRoleMatches from '../../rules/aria-allowed-role-matches';
 import ariaHasAttrMatches from '../../rules/aria-has-attr-matches';
 import ariaHiddenFocusMatches from '../../rules/aria-hidden-focus-matches';
+import ariaRequiredChildrenMatches from '../../rules/aria-required-children-matches';
 import autocompleteMatches from '../../rules/autocomplete-matches';
 import bypassMatches from '../../rules/bypass-matches';
 import colorContrastMatches from '../../rules/color-contrast-matches';
@@ -303,6 +304,7 @@ const metadataFunctionMap = {
   'aria-form-field-name-matches': noNamingMethodMatches,
   'aria-has-attr-matches': ariaHasAttrMatches,
   'aria-hidden-focus-matches': ariaHiddenFocusMatches,
+  'aria-required-children-matches': ariaRequiredChildrenMatches,
   'autocomplete-matches': autocompleteMatches,
   'bypass-matches': bypassMatches,
   'color-contrast-matches': colorContrastMatches,

lib/rules/aria-required-children-matches.js

@@ -0,0 +1,8 @@
+import { requiredOwned, getExplicitRole } from '../commons/aria';
+
+function ariaRequiredChildrenMatches(node, virtualNode) {
+  const role = getExplicitRole(virtualNode, { dpub: true });
+  return !!requiredOwned(role);
+}
+
+export default ariaRequiredChildrenMatches;

lib/rules/aria-required-children.json

@@ -1,6 +1,7 @@
 {
   "id": "aria-required-children",
   "selector": "[role]",
+  "matches": "aria-required-children-matches",
   "tags": ["cat.aria", "wcag2a", "wcag131"],
   "metadata": {
     "description": "Ensures elements with an ARIA role that require child roles contain them",

test/integration/rules/aria-required-children/aria-required-children.html

@@ -1,19 +1,19 @@
 <div role="list" id="pass1">
-  <div role="listitem" id="pass2">Item 1</div>
+  <div role="listitem" id="ignore1">Item 1</div>
 </div>
-<div role="list" id="pass3" aria-owns="pass4"></div>
-<div role="listitem" id="pass4"></div>
+<div role="list" id="pass2" aria-owns="ignore2"></div>
+<div role="listitem" id="ignore2"></div>
 <div role="list" id="fail1">
-  <div role="menuitem" id="pass5"></div>
+  <div role="menuitem" id="ignore3"></div>
 </div>
-<div role="list" id="fail2" aria-owns="pass6"></div>
+<div role="list" id="fail2" aria-owns="ingore4"></div>
 <div role="menu" id="fail3"></div>
 <div role="menubar" id="fail4"></div>
 <div role="row" id="fail5"></div>
-<div role="menuitem" id="pass6"></div>
-<div role="list" id="pass7" aria-owns="parent"></div>
+<div role="menuitem" id="ingore4"></div>
+<div role="list" id="pass3" aria-owns="parent"></div>
 <div id="parent">
-  <div role="listitem" id="pass8"></div>
+  <div role="listitem" id="ignore5"></div>
 </div>
 <div role="grid" id="incomplete1"></div>
 <div role="list" id="incomplete2"></div>
@@ -29,30 +29,29 @@
   <div></div>
 </div>
 <div role="list" id="fail6">
-  <div role="tabpanel" id="pass9">
-    <div role="listitem" id="pass10">List item 1</div>
+  <div role="tabpanel" id="ignore6">
+    <div role="listitem" id="ignore7">List item 1</div>
   </div>
 </div>
-<div role="grid" id="pass11">
+<div role="grid" id="pass4">
   <div role="row" id="fail7">
     <span>Item 1</span>
   </div>
 </div>
-<div role="grid" id="pass12">
-  <div role="presentation" id="pass13">
-    <div role="row" id="pass14">
-      <div role="none" id="pass15">
-        <span role="cell" id="pass16">Item 1</span>
+<div role="grid" id="pass5">
+  <div role="presentation" id="ignore8">
+    <div role="row" id="pass6">
+      <div role="none" id="ingore9">
+        <span role="cell" id="ignore10">Item 1</span>
       </div>
     </div>
   </div>
 </div>
 
-<div role="menu" id="pass17">
-  <ul role="group" id="pass18">
-    >
-    <li role="menuitem" id="pass19">>Inbox</li>
-    <li role="menuitem" id="pass20">>Archive</li>
-    <li role="menuitem" id="pass21">>Trash</li>
+<div role="menu" id="pass7">
+  <ul role="group" id="ignore11">
+    <li role="menuitem" id="ignore12">>Inbox</li>
+    <li role="menuitem" id="ignore13">>Archive</li>
+    <li role="menuitem" id="ignore14">>Trash</li>
   </ul>
 </div>

test/integration/rules/aria-required-children/aria-required-children.json

@@ -17,21 +17,7 @@
     ["#pass4"],
     ["#pass5"],
     ["#pass6"],
-    ["#pass7"],
-    ["#pass8"],
-    ["#pass9"],
-    ["#pass10"],
-    ["#pass11"],
-    ["#pass12"],
-    ["#pass13"],
-    ["#pass14"],
-    ["#pass15"],
-    ["#pass16"],
-    ["#pass17"],
-    ["#pass18"],
-    ["#pass19"],
-    ["#pass20"],
-    ["#pass21"]
+    ["#pass7"]
   ],
   "incomplete": [
     ["#incomplete1"],

test/rule-matches/aria-required-children-matches.js

@@ -0,0 +1,27 @@
+describe('aria-required-children-matches', function() {
+  'use strict';
+
+  var fixture = document.getElementById('fixture');
+  var queryFixture = axe.testUtils.queryFixture;
+  var rule;
+
+  beforeEach(function() {
+    rule = axe._audit.rules.find(function(rule) {
+      return rule.id === 'aria-required-children';
+    });
+  });
+
+  afterEach(function() {
+    fixture.innerHTML = '';
+  });
+
+  it('should return true for a role that requires children', function() {
+    var vNode = queryFixture('<div id="target" role="list"></div>');
+    assert.isTrue(rule.matches(null, vNode));
+  });
+
+  it('should return false for a role that does not require children', function() {
+    var vNode = queryFixture('<div id="target" role="alert"></div>');
+    assert.isFalse(rule.matches(null, vNode));
+  });
+});