fix(page-has-heading-one,landmark-one-main): do not fail if modal is …

…open (#3501)
dequelabs · Jul 13, 2022 · 399dc94 · 399dc94
1 parent 3b0b678
commit 399dc94
Show file tree

Hide file tree

Showing 7 changed files with 161 additions and 3 deletions.
diff --git a/lib/checks/generic/has-descendant-evaluate.js b/lib/checks/generic/has-descendant-evaluate.js
@@ -1,5 +1,5 @@
 import { querySelectorAllFilter } from '../../core/utils';
-import { isVisible } from '../../commons/dom';
+import { isVisible, isModalOpen } from '../../commons/dom';
 
 function hasDescendant(node, options, virtualNode) {
   if (!options || !options.selector || typeof options.selector !== 'string') {
@@ -8,6 +8,10 @@ function hasDescendant(node, options, virtualNode) {
     );
   }
 
+  if (options.passForModal && isModalOpen()) {
+    return true;
+  }
+
   const matchingElms = querySelectorAllFilter(
     virtualNode,
     options.selector,

diff --git a/lib/checks/keyboard/page-has-heading-one.json b/lib/checks/keyboard/page-has-heading-one.json
@@ -3,7 +3,8 @@
   "evaluate": "has-descendant-evaluate",
   "after": "has-descendant-after",
   "options": {
-    "selector": "h1:not([role], [aria-level]), :is(h1, h2, h3, h4, h5, h6):not([role])[aria-level=1], [role=heading][aria-level=1]"
+    "selector": "h1:not([role], [aria-level]), :is(h1, h2, h3, h4, h5, h6):not([role])[aria-level=1], [role=heading][aria-level=1]",
+    "passForModal": true
   },
   "metadata": {
     "impact": "moderate",

diff --git a/lib/checks/keyboard/page-has-main.json b/lib/checks/keyboard/page-has-main.json
@@ -3,7 +3,8 @@
   "evaluate": "has-descendant-evaluate",
   "after": "has-descendant-after",
   "options": {
-    "selector": "main:not([role]), [role='main']"
+    "selector": "main:not([role]), [role='main']",
+    "passForModal": true
   },
   "metadata": {
     "impact": "moderate",

diff --git a/test/integration/full/landmark-one-main/landmark-one-main-pass4.html b/test/integration/full/landmark-one-main/landmark-one-main-pass4.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" id="pass4">
+  <head>
+    <meta charset="utf8" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="/node_modules/mocha/mocha.css"
+    />
+    <script src="/node_modules/mocha/mocha.js"></script>
+    <script src="/node_modules/chai/chai.js"></script>
+    <script src="/axe.js"></script>
+    <script>
+      mocha.setup({
+        timeout: 10000,
+        ui: 'bdd'
+      });
+      var assert = chai.assert;
+    </script>
+  </head>
+  <body>
+    <main aria-hidden="true">
+      <h1>Level one heading!</h1>
+    </main>
+    <div role="dialog">
+      Modal open
+    </div>
+    <div id="mocha"></div>
+    <script src="/test/testutils.js"></script>
+    <script src="landmark-one-main-pass4.js"></script>
+    <script src="/test/integration/adapter.js"></script>
+  </body>
+</html>
diff --git a/test/integration/full/landmark-one-main/landmark-one-main-pass4.js b/test/integration/full/landmark-one-main/landmark-one-main-pass4.js
@@ -0,0 +1,40 @@
+describe('landmark-one-main test pass', function() {
+  'use strict';
+  var results;
+  before(function(done) {
+    axe.testUtils.awaitNestedLoad(function() {
+      axe.run(
+        { runOnly: { type: 'rule', values: ['landmark-one-main'] } },
+        function(err, r) {
+          assert.isNull(err);
+          results = r;
+          done();
+        }
+      );
+    });
+  });
+
+  describe('violations', function() {
+    it('should find 0', function() {
+      assert.lengthOf(results.violations, 0);
+    });
+  });
+
+  describe('passes', function() {
+    it('should find 1', function() {
+      assert.lengthOf(results.passes[0].nodes, 1);
+    });
+
+    it('should find #pass4', function() {
+      assert.deepEqual(results.passes[0].nodes[0].target, ['#pass4']);
+    });
+  });
+
+  it('should find 0 inapplicable', function() {
+    assert.lengthOf(results.inapplicable, 0);
+  });
+
+  it('should find 0 incomplete', function() {
+    assert.lengthOf(results.incomplete, 0);
+  });
+});
diff --git a/test/integration/full/page-has-heading-one/page-has-heading-one-pass10.html b/test/integration/full/page-has-heading-one/page-has-heading-one-pass10.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" id="pass10">
+  <head>
+    <meta charset="utf8" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="/node_modules/mocha/mocha.css"
+    />
+    <script src="/node_modules/mocha/mocha.js"></script>
+    <script src="/node_modules/chai/chai.js"></script>
+    <script src="/axe.js"></script>
+    <script>
+      mocha.setup({
+        timeout: 10000,
+        ui: 'bdd'
+      });
+      var assert = chai.assert;
+    </script>
+  </head>
+  <body>
+    <main aria-hidden="true">
+      <h1>Level one heading!</h1>
+    </main>
+    <div role="dialog">
+      Modal open
+    </div>
+    <div id="mocha"></div>
+    <script src="/test/testutils.js"></script>
+    <script src="page-has-heading-one-pass10.js"></script>
+    <script src="/test/integration/adapter.js"></script>
+  </body>
+</html>
diff --git a/test/integration/full/page-has-heading-one/page-has-heading-one-pass10.js b/test/integration/full/page-has-heading-one/page-has-heading-one-pass10.js
@@ -0,0 +1,46 @@
+describe('page-has-heading-one test pass 2', function() {
+  'use strict';
+  var results;
+  before(function(done) {
+    axe.testUtils.awaitNestedLoad(function() {
+      // Stop messing with my tests Mocha!
+      var heading = document.querySelector('#mocha h1');
+      if (heading) {
+        heading.outerHTML = '<h2>page-has-heading-one test</h2>';
+      }
+
+      axe.run(
+        { runOnly: { type: 'rule', values: ['page-has-heading-one'] } },
+        function(err, r) {
+          assert.isNull(err);
+          results = r;
+          done();
+        }
+      );
+    });
+  });
+
+  describe('violations', function() {
+    it('should find 0', function() {
+      assert.lengthOf(results.violations, 0);
+    });
+  });
+
+  describe('passes', function() {
+    it('should find 1', function() {
+      assert.lengthOf(results.passes[0].nodes, 1);
+    });
+
+    it('should find #pass10', function() {
+      assert.deepEqual(results.passes[0].nodes[0].target, ['#pass10']);
+    });
+  });
+
+  it('should find 0 inapplicable', function() {
+    assert.lengthOf(results.inapplicable, 0);
+  });
+
+  it('should find 0 incomplete', function() {
+    assert.lengthOf(results.incomplete, 0);
+  });
+});