fix(landmark-complementary-is-top-level): allow aside inside main (#2740

) * fix(landmark-complementary-is-top-level): allow aside inside main * fix * use getRole
dequelabs · Jan 11, 2021 · 9388c96 · 9388c96
1 parent 7c05162
commit 9388c96
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 10 deletions.
diff --git a/lib/checks/keyboard/landmark-is-top-level-evaluate.js b/lib/checks/keyboard/landmark-is-top-level-evaluate.js
@@ -1,21 +1,26 @@
-import { implicitRole } from '../../commons/aria';
+import { getRole, implicitRole } from '../../commons/aria';
 import { getAriaRolesByType } from '../../commons/standards';
 import { getComposedParent } from '../../commons/dom';
 
 function landmarkIsTopLevelEvaluate(node) {
   var landmarks = getAriaRolesByType('landmark');
   var parent = getComposedParent(node);
+  var nodeRole = getRole(node);
 
-  this.data({
-    role: node.getAttribute('role') || implicitRole(node)
-  });
+  this.data({ role: nodeRole });
 
   while (parent) {
     var role = parent.getAttribute('role');
     if (!role && parent.nodeName.toUpperCase() !== 'FORM') {
       role = implicitRole(parent);
     }
-    if (role && landmarks.includes(role)) {
+    // allow aside inside main
+    // @see https://github.com/dequelabs/axe-core/issues/2651
+    if (
+      role &&
+      landmarks.includes(role) &&
+      !(role === 'main' && nodeRole === 'complementary')
+    ) {
       return false;
     }
     parent = getComposedParent(parent);

diff --git a/test/checks/keyboard/landmark-is-top-level.js b/test/checks/keyboard/landmark-is-top-level.js
@@ -23,13 +23,22 @@ describe('landmark-is-top-level', function() {
 
   it('should return false if the complementary landmark is in another landmark', function() {
     var params = checkSetup(
-      '<main><div role="complementary" id="target"></div></main>'
+      '<nav><div role="complementary" id="target"></div></nav>'
     );
     axe.utils.getFlattenedTree(document.documentElement);
     assert.isFalse(check.evaluate.apply(checkContext, params));
     assert.deepEqual(checkContext._data, { role: 'complementary' });
   });
 
+  it('should return true if the complementary landmark is in main landmark', function() {
+    var params = checkSetup(
+      '<main><div role="complementary" id="target"></div></main>'
+    );
+    axe.utils.getFlattenedTree(document.documentElement);
+    assert.isTrue(check.evaluate.apply(checkContext, params));
+    assert.deepEqual(checkContext._data, { role: 'complementary' });
+  });
+
   it('should return false if div with role set to main is in another landmark', function() {
     var params = checkSetup(
       '<div role="navigation"><div role="main" id="target"></div></div>'

diff --git a/test/integration/full/landmark-complementary-is-top-level/frames/level1-fail.html b/test/integration/full/landmark-complementary-is-top-level/frames/level1-fail.html
@@ -6,10 +6,10 @@
   </head>
   <body>
     <p>This iframe should fail, too</p>
-    <main>
+    <nav>
       <div role="complementary">
         <p>This complementary landmark is in a main landmark</p>
       </div>
-    </main>
+    </nav>
   </body>
 </html>
diff --git a/...on/full/landmark-complementary-is-top-level/landmark-complementary-is-top-level-pass.html b/...on/full/landmark-complementary-is-top-level/landmark-complementary-is-top-level-pass.html
@@ -39,6 +39,11 @@
       <p>This div has role form</p>
       <p></p>
     </div>
+    <div role="main">
+      <div role="complementary">
+        <p>This div has role complementary></p>
+      </div>
+    </div>
 
     <iframe id="frame1" src="frames/level1.html"></iframe>
     <div id="mocha"></div>

diff --git a/...tion/full/landmark-complementary-is-top-level/landmark-complementary-is-top-level-pass.js b/...tion/full/landmark-complementary-is-top-level/landmark-complementary-is-top-level-pass.js
@@ -26,8 +26,8 @@ describe('landmark-complementary-is-top-level test pass', function() {
   });
 
   describe('passes', function() {
-    it('should find 4', function() {
-      assert.lengthOf(results.passes[0].nodes, 4);
+    it('should find 5', function() {
+      assert.lengthOf(results.passes[0].nodes, 5);
     });
   });