fix(aria-required-parent): Filter out group from required parent role…

…s if group is present (#3084)
dequelabs · Jul 16, 2021 · 1cb270c · 1cb270c
1 parent 3967745
commit 1cb270c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 24 deletions.
diff --git a/lib/checks/aria/aria-required-parent-evaluate.js b/lib/checks/aria/aria-required-parent-evaluate.js
@@ -2,7 +2,12 @@ import { getExplicitRole, getRole, requiredContext } from '../../commons/aria';
 import { getRootNode } from '../../commons/dom';
 import { getNodeFromTree, escapeSelector } from '../../core/utils';
 
-function getMissingContext(virtualNode, ownGroupRoles, reqContext, includeElement) {
+function getMissingContext(
+  virtualNode,
+  ownGroupRoles,
+  reqContext,
+  includeElement
+) {
   const explicitRole = getExplicitRole(virtualNode);
 
   if (!reqContext) {
@@ -24,6 +29,7 @@ function getMissingContext(virtualNode, ownGroupRoles, reqContext, includeElemen
       if (ownGroupRoles.includes(explicitRole)) {
         reqContext.push(explicitRole);
       }
+      reqContext = reqContext.filter(r => r !== 'group');
       vNode = vNode.parent;
       continue;
     }
@@ -86,19 +92,16 @@ function getAriaOwners(element) {
  * @return {Boolean} True if the element has a parent with a required role. False otherwise.
  */
 function ariaRequiredParentEvaluate(node, options, virtualNode) {
-  const ownGroupRoles = (
-    options && Array.isArray(options.ownGroupRoles) 
-    ? options.ownGroupRoles 
-    : []
-  );
+  const ownGroupRoles =
+    options && Array.isArray(options.ownGroupRoles)
+      ? options.ownGroupRoles
+      : [];
   let missingParents = getMissingContext(virtualNode, ownGroupRoles);
 
   if (!missingParents) {
     return true;
   }
-
   const owners = getAriaOwners(node);
-
   if (owners) {
     for (let i = 0, l = owners.length; i < l; i++) {
       missingParents = getMissingContext(

diff --git a/test/checks/aria/required-parent.js b/test/checks/aria/required-parent.js
@@ -148,6 +148,7 @@ describe('aria-required-parent', function() {
         .getCheckEvaluate('aria-required-parent')
         .apply(checkContext, params)
     );
+    assert.deepEqual(checkContext._data, ['menu', 'menubar']);
   });
 
   it('should fail when intermediate node is role=group but this not an allowed context', function() {
@@ -161,60 +162,63 @@ describe('aria-required-parent', function() {
     );
   });
 
-  describe('group with ownGroupRoles', function () {
+  describe('group with ownGroupRoles', function() {
     it('should pass when the role and grand parent role is in ownGroupRoles', function() {
       var params = checkSetup(
         '<div role="list">' +
           '<div role="listitem">' +
           '<div role="group">' +
           '<div role="listitem" id="target">' +
-          '</div></div></div></div>', {
-            ownGroupRoles: ['listitem']
-          }
+          '</div></div></div></div>',
+        {
+          ownGroupRoles: ['listitem']
+        }
       );
-  
+
       assert.isTrue(
         axe.testUtils
           .getCheckEvaluate('aria-required-parent')
           .apply(checkContext, params)
       );
     });
-  
+
     it('should fail when the role and grand parent role is in ownGroupRoles', function() {
       var params = checkSetup(
         '<div role="menu">' +
           '<div role="menuitem">' +
           '<div role="group">' +
           '<div role="menuitem" id="target">' +
-          '</div></div></div></div>', {
-            ownGroupRoles: ['listitem']
-          }
+          '</div></div></div></div>',
+        {
+          ownGroupRoles: ['listitem']
+        }
       );
-  
+
       assert.isFalse(
         axe.testUtils
           .getCheckEvaluate('aria-required-parent')
           .apply(checkContext, params)
       );
     });
 
-    it('should fail when the role is not in a group', function () {
+    it('should fail when the role is not in a group', function() {
       var params = checkSetup(
         '<div role="list">' +
           '<div role="listitem">' +
           '<div role="none">' +
           '<div role="listitem" id="target">' +
-          '</div></div></div></div>', {
-            ownGroupRoles: ['listitem']
-          }
+          '</div></div></div></div>',
+        {
+          ownGroupRoles: ['listitem']
+        }
       );
-  
+
       assert.isFalse(
         axe.testUtils
           .getCheckEvaluate('aria-required-parent')
           .apply(checkContext, params)
       );
-    })
+    });
   });
 
   it('should pass when intermediate node is role=none', function() {