fix(aria-required-parent): only match for roles that require parents (#…

…2707)

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

* fix

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

@@ -133,6 +133,7 @@ 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 ariaRequiredParentMatches from '../../rules/aria-required-parent-matches';
 import autocompleteMatches from '../../rules/autocomplete-matches';
 import bypassMatches from '../../rules/bypass-matches';
 import colorContrastMatches from '../../rules/color-contrast-matches';
@@ -305,6 +306,7 @@ const metadataFunctionMap = {
   'aria-has-attr-matches': ariaHasAttrMatches,
   'aria-hidden-focus-matches': ariaHiddenFocusMatches,
   'aria-required-children-matches': ariaRequiredChildrenMatches,
+  'aria-required-parent-matches': ariaRequiredParentMatches,
   'autocomplete-matches': autocompleteMatches,
   'bypass-matches': bypassMatches,
   'color-contrast-matches': colorContrastMatches,

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

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

lib/rules/aria-required-parent.json

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

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

@@ -1,40 +1,40 @@
-<div role="list" id="pass1"><div role="listitem" id="pass2">Item 1</div></div>
-<div role="list" id="pass3" aria-owns="pass4"></div>
-<div role="listitem" id="pass4"></div>
+<div role="list" id="ignore1"><div role="listitem" id="pass1">Item 1</div></div>
+<div role="list" id="ignore2" aria-owns="pass2"></div>
+<div role="listitem" id="pass2"></div>
 <div role="listitem" id="fail1"></div>
-<div role="menu" id="pass5"><div role="listitem" id="fail2"></div></div>
-<div role="menu" id="pass6" aria-owns="fail3"></div>
+<div role="menu" id="ignore3"><div role="listitem" id="fail2"></div></div>
+<div role="menu" id="ignore4" aria-owns="fail3"></div>
 <div role="listitem" id="fail3"></div>
-<div role="list" id="pass7" aria-owns="parent"></div>
-<div id="parent"><div role="listitem" id="pass8"></div></div>
-<div role="grid" id="pass9"><div role="rowgroup" id="pass10">Item 1</div></div>
-<div role="table" id="pass11">
-  <div role="rowgroup" id="pass12">Item 1</div>
+<div role="list" id="ignore5" aria-owns="parent"></div>
+<div id="parent"><div role="listitem" id="pass3"></div></div>
+<div role="grid" id="ignore6"><div role="rowgroup" id="pass4">Item 1</div></div>
+<div role="table" id="ignore7">
+  <div role="rowgroup" id="pass5">Item 1</div>
 </div>
-<div role="treegrid" id="pass13">
-  <div role="rowgroup" id="pass14">Item 1</div>
+<div role="treegrid" id="ignore8">
+  <div role="rowgroup" id="pass6">Item 1</div>
 </div>
 
-<div role="treegrid" id="pass15">
+<div role="treegrid" id="ignore9">
   <div role="listitem" id="fail4">
     <div role="rowgroup" id="fail5">Item 1</div>
   </div>
 </div>
 
-<div role="treegrid" id="pass16">
-  <div role="presentation" id="pass17">
-    <div role="rowgroup" id="pass18">Item 1</div>
+<div role="treegrid" id="ignore10">
+  <div role="presentation" id="ignore11">
+    <div role="rowgroup" id="pass7">Item 1</div>
   </div>
 </div>
 
-<div role="treegrid" id="pass19">
-  <div role="presentation" id="pass20">
-    <div role="rowgroup" id="pass21">Item 1</div>
+<div role="treegrid" id="ignore12">
+  <div role="none" id="ignore13">
+    <div role="rowgroup" id="pass8">Item 1</div>
   </div>
 </div>
 
-<div role="treegrid" id="pass22" aria-owns="pass24">
-  <div role="list" id="pass23">
-    <div role="rowgroup" id="pass24">Item 1</div>
+<div role="treegrid" id="ignore14" aria-owns="pass9">
+  <div role="list" id="ignore15">
+    <div role="rowgroup" id="pass9">Item 1</div>
   </div>
 </div>

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

@@ -11,21 +11,6 @@
     ["#pass6"],
     ["#pass7"],
     ["#pass8"],
-    ["#pass9"],
-    ["#pass10"],
-    ["#pass11"],
-    ["#pass12"],
-    ["#pass13"],
-    ["#pass14"],
-    ["#pass15"],
-    ["#pass16"],
-    ["#pass17"],
-    ["#pass18"],
-    ["#pass19"],
-    ["#pass20"],
-    ["#pass21"],
-    ["#pass22"],
-    ["#pass23"],
-    ["#pass24"]
+    ["#pass9"]
   ]
 }

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

@@ -0,0 +1,27 @@
+describe('aria-required-parent-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-parent';
+    });
+  });
+
+  afterEach(function() {
+    fixture.innerHTML = '';
+  });
+
+  it('should return true for a role that requires parent', function() {
+    var vNode = queryFixture('<div id="target" role="listitem"></div>');
+    assert.isTrue(rule.matches(null, vNode));
+  });
+
+  it('should return false for a role that does not require parent', function() {
+    var vNode = queryFixture('<div id="target" role="alert"></div>');
+    assert.isFalse(rule.matches(null, vNode));
+  });
+});