fix(aria-required-parent): allow nested group and presentational roles (

#3492)

* fix(aria-required-parent): allow nested group and presentational roles

* update

* remove comments

lib/checks/aria/aria-required-parent-evaluate.js

@@ -18,31 +18,30 @@ function getMissingContext(
     return null;
   }
 
+  const allowsGroup = reqContext.includes('group');
   let vNode = includeElement ? virtualNode : virtualNode.parent;
+
   while (vNode) {
-    const parentRole = getRole(vNode);
+    const role = getRole(vNode, { noPresentational: true });
 
-    // if parent node has role=group and role=group is an allowed
-    // context, check next parent
-    if (reqContext.includes('group') && parentRole === 'group') {
+    // if parent node has no role or is presentational, or if role
+    // allows group, we keep parsing the parent tree.
+    // this means intermediate roles between a required parent and
+    // child will fail the check
+    if (!role) {
+      vNode = vNode.parent;
+    } else if (role === 'group' && allowsGroup) {
       // Allow the own role; i.e. tree > treeitem > group > treeitem
       if (ownGroupRoles.includes(explicitRole)) {
         reqContext.push(explicitRole);
       }
       reqContext = reqContext.filter(r => r !== 'group');
       vNode = vNode.parent;
-      continue;
-    }
-
-    // if parent node has a role that is not the required role and not
-    // presentational we will fail the check
-    if (reqContext.includes(parentRole)) {
+    } else if (reqContext.includes(role)) {
       return null;
-    } else if (parentRole && !['presentation', 'none'].includes(parentRole)) {
+    } else {
       return reqContext;
     }
-
-    vNode = vNode.parent;
   }
 
   return reqContext;

test/checks/aria/required-parent.js

@@ -243,6 +243,17 @@ describe('aria-required-parent', function() {
     );
   });
 
+  it('should pass for multiple group and presentational roles', function() {
+    var params = checkSetup(
+      '<div role="list"><div role="none"><div role="group"><div role="none"><div role="group"><div role="listitem" id="target">Nothing here.</div></div></div></div></div></div>'
+    );
+    assert.isTrue(
+      axe.testUtils
+        .getCheckEvaluate('aria-required-parent')
+        .apply(checkContext, params)
+    );
+  });
+
   (shadowSupported ? it : xit)(
     'should pass when required parent is present across shadow boundary',
     function() {

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

@@ -64,3 +64,15 @@
     <div role="option" id="pass13">option</div>
   </div>
 </div>
+
+<div role="tree">
+  <ul role="group">
+    <li role="none">
+      <ul role="group">
+        <li role="none">
+          <div role="treeitem" id="pass14">tree item</div>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>

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

@@ -23,6 +23,7 @@
     ["#pass10"],
     ["#pass11"],
     ["#pass12"],
-    ["#pass13"]
+    ["#pass13"],
+    ["#pass14"]
   ]
 }