feat(list,listitem): do not allow group as allowed parent or child (#…

…3784) * feat(list,listitem): do not allow group as allowed parent or child * fix tests
dequelabs · Nov 17, 2022 · d1cbf6f · d1cbf6f
1 parent 5259e88
commit d1cbf6f
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 17 deletions.
diff --git a/lib/standards/aria-roles.js b/lib/standards/aria-roles.js
@@ -278,7 +278,7 @@ const ariaRoles = {
   },
   list: {
     type: 'structure',
-    requiredOwned: ['group', 'listitem'],
+    requiredOwned: ['listitem'],
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section']
   },
@@ -298,7 +298,7 @@ const ariaRoles = {
   },
   listitem: {
     type: 'structure',
-    requiredContext: ['list', 'group'],
+    requiredContext: ['list'],
     allowedAttrs: [
       'aria-level',
       'aria-posinset',

diff --git a/test/act-rules/act-runner.js b/test/act-rules/act-runner.js
@@ -23,7 +23,7 @@ const testCaseJsonPath = path.resolve(
 const addr = `http://localhost:${serverPort}/WAI/content-assets/wcag-act-rules/`;
 const testCaseJson = require(testCaseJsonPath);
 
-module.exports = ({ id, title, axeRules }) => {
+module.exports = ({ id, title, axeRules, skipTests = [] }) => {
   describe(`${title} (${id})`, function () {
     let driver, server;
     const testcases = testCaseJson.testcases.filter(
@@ -64,7 +64,10 @@ module.exports = ({ id, title, axeRules }) => {
     });
 
     testcases.forEach(testcase => {
-      const shouldRun = testcase.relativePath.match(/\.(xhtml|html?)$/);
+      const shouldRun =
+        testcase.relativePath.match(/\.(xhtml|html?)$/) &&
+        !skipTests.includes(testcase.testcaseId);
+
       (shouldRun ? it : xit)(testcase.testcaseTitle, async () => {
         await driver.get(`${addr}/${testcase.relativePath}`);
 

diff --git a/test/act-rules/aria-required-owned-element-bc4a75.spec.js b/test/act-rules/aria-required-owned-element-bc4a75.spec.js
@@ -1,5 +1,6 @@
 require('./act-runner.js')({
   id: 'bc4a75',
   title: 'ARIA required owned elements',
-  axeRules: ['aria-required-children']
+  axeRules: ['aria-required-children'],
+  skipTests: ['52c725e462af074a3559cf4bf4d4dd2386168938']
 });
diff --git a/test/checks/aria/required-children.js b/test/checks/aria/required-children.js
@@ -22,7 +22,7 @@ describe('aria-required-children', function () {
         .getCheckEvaluate('aria-required-children')
         .apply(checkContext, params)
     );
-    assert.deepEqual(checkContext._data, ['group', 'listitem']);
+    assert.deepEqual(checkContext._data, ['listitem']);
   });
 
   (shadowSupported ? it : xit)(
@@ -43,7 +43,7 @@ describe('aria-required-children', function () {
           .getCheckEvaluate('aria-required-children')
           .apply(checkContext, params)
       );
-      assert.deepEqual(checkContext._data, ['group', 'listitem']);
+      assert.deepEqual(checkContext._data, ['listitem']);
     }
   );
 
@@ -138,7 +138,7 @@ describe('aria-required-children', function () {
         .apply(checkContext, params)
     );
 
-    assert.deepEqual(checkContext._data, ['group', 'listitem']);
+    assert.deepEqual(checkContext._data, ['listitem']);
   });
 
   it('should fail when list has intermediate child with role that is not a required role', function () {
@@ -361,7 +361,7 @@ describe('aria-required-children', function () {
 
   it('should fail when role does not allow group', function () {
     var params = checkSetup(
-      '<div role="table" id="target"><ul role="group"><li role="row">Option</li></ul></div>'
+      '<div role="list" id="target"><ul role="group"><li role="listitem">Item</li></ul></div>'
     );
     assert.isFalse(
       axe.testUtils

diff --git a/test/checks/aria/required-parent.js b/test/checks/aria/required-parent.js
@@ -21,7 +21,7 @@ describe('aria-required-parent', function () {
         .getCheckEvaluate('aria-required-parent')
         .apply(checkContext, params)
     );
-    assert.deepEqual(checkContext._data, ['list', 'group']);
+    assert.deepEqual(checkContext._data, ['list']);
   });
 
   (shadowSupported ? it : xit)(
@@ -44,7 +44,7 @@ describe('aria-required-parent', function () {
           .getCheckEvaluate('aria-required-parent')
           .apply(checkContext, params)
       );
-      assert.deepEqual(checkContext._data, ['list', 'group']);
+      assert.deepEqual(checkContext._data, ['list']);
     }
   );
 
@@ -70,7 +70,7 @@ describe('aria-required-parent', function () {
         .getCheckEvaluate('aria-required-parent')
         .apply(checkContext, params)
     );
-    assert.deepEqual(checkContext._data, ['list', 'group']);
+    assert.deepEqual(checkContext._data, ['list']);
   });
 
   it('should pass when required parent is present in an aria-owns context', function () {
@@ -165,13 +165,13 @@ describe('aria-required-parent', 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="tree">' +
+          '<div role="treeitem">' +
           '<div role="group">' +
-          '<div role="listitem" id="target">' +
+          '<div role="treeitem" id="target">' +
           '</div></div></div></div>',
         {
-          ownGroupRoles: ['listitem']
+          ownGroupRoles: ['treeitem']
         }
       );
 
@@ -245,7 +245,7 @@ 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>'
+      '<div role="tree"><div role="none"><div role="group"><div role="none"><div role="group"><div role="treeitem" id="target">Nothing here.</div></div></div></div></div></div>'
     );
     assert.isTrue(
       axe.testUtils