fix(empty-heading): Skip headings with the role changed #645 (#722)

dequelabs · Feb 14, 2018 · 80ef961 · 80ef961
1 parent 87fa280
commit 80ef961
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 8 deletions.
diff --git a/lib/rules/empty-heading.json b/lib/rules/empty-heading.json
@@ -1,6 +1,7 @@
 {
   "id": "empty-heading",
   "selector": "h1, h2, h3, h4, h5, h6, [role=\"heading\"]",
+  "matches": "heading-matches.js",
   "tags": [
     "cat.name-role-value",
     "best-practice"
@@ -11,9 +12,7 @@
   },
   "all": [],
   "any": [
-    "has-visible-text",
-    "role-presentation",
-    "role-none"
+    "has-visible-text"
   ],
   "none": []
 }
diff --git a/lib/rules/heading-matches.js b/lib/rules/heading-matches.js
@@ -0,0 +1,13 @@
+// Get all valid roles
+let explicitRoles;
+if (node.hasAttribute('role')) {
+  explicitRoles = node.getAttribute('role').split(/\s+/i)
+    .filter(axe.commons.aria.isValidRole);
+}
+
+// Check valid roles if there are any, otherwise fall back to the inherited role
+if (explicitRoles && explicitRoles.length > 0) {
+  return explicitRoles.includes('heading');
+} else { 
+  return axe.commons.aria.implicitRole(node) === 'heading';
+}
diff --git a/lib/rules/heading-order.json b/lib/rules/heading-order.json
@@ -1,6 +1,7 @@
 {
   "id": "heading-order",
   "selector": "h1, h2, h3, h4, h5, h6, [role=heading]",
+  "matches": "heading-matches.js",
   "tags": [
     "cat.semantics",
     "best-practice"

diff --git a/test/integration/rules/empty-heading/empty-heading.html b/test/integration/rules/empty-heading/empty-heading.html
@@ -6,6 +6,8 @@
 	<script src="/axe.js"></script>
 </head>
 <body>
+	<h1 id="ignore1" role="banner">Meh</h1>
+
 	<h1 id="pass1">Ok</h1>
 	<h2 id="pass2">Ok</h2>
 	<h3 id="pass3">Ok</h3>
@@ -16,8 +18,6 @@ <h6 id="pass6">Ok</h6>
 	<h1 id="fail1"></h1>
 	<h1 id="fail2"><div style="display: none">Not Ok</div></h1>
 	<h1 id="fail3">       </h1>
-	<h3 role="presentation" id="pass8">Should still work</h3>
-	<h3 role="none" id="pass9">Should also work</h3>
 
 </body>
 </html>
diff --git a/test/integration/rules/empty-heading/empty-heading.json b/test/integration/rules/empty-heading/empty-heading.json
@@ -13,8 +13,6 @@
 		["#pass4"],
 		["#pass5"],
 		["#pass6"],
-		["#pass7"],
-		["#pass8"],
-		["#pass9"]
+		["#pass7"]
 	]
 }
diff --git a/test/integration/rules/heading-order/heading-order.html b/test/integration/rules/heading-order/heading-order.html
@@ -6,3 +6,5 @@ <h3 id="heading4">Header</h3>
 <h1 id="heading5">Header</h1>
 <h3 id="heading6">Header</h3>
 <h3 id="heading7">Header</h3>
+
+<h6 role="banner">Ignore</h6>
diff --git a/test/rule-matches/heading-matches.js b/test/rule-matches/heading-matches.js
@@ -0,0 +1,55 @@
+describe('heading-matches', function () {
+  'use strict';
+
+  var fixture = document.getElementById('fixture');
+  var rule;
+
+  beforeEach(function () {
+    rule = axe._audit.rules.find(function (rule) {
+      return rule.id === 'empty-heading';
+    });
+  });
+
+  afterEach(function () {
+    fixture.innerHTML = '';
+  });
+
+  it('is a function', function () {
+    assert.isFunction(rule.matches);
+  });
+
+  it('should return false on elements that are not headings', function () {
+    var div = document.createElement('div');
+    assert.isFalse(rule.matches(div));
+  });
+
+  it('should return true on elements with "heading" in the role', function () {
+    var div = document.createElement('div');
+    div.setAttribute('role', 'heading');
+    assert.isTrue(rule.matches(div));
+
+    div.setAttribute('role', 'slider heading');
+    assert.isTrue(rule.matches(div));
+  });
+
+  it('should return true on regular headings without roles', function () {
+    var h1 = document.createElement('h1');
+    var h2 = document.createElement('h2');
+    var h3 = document.createElement('h3');
+    assert.isTrue(rule.matches(h1));
+    assert.isTrue(rule.matches(h2));
+    assert.isTrue(rule.matches(h3));
+  });
+
+  it('should return false on headings with their role changes', function () {
+    var h1 = document.createElement('h1');
+    h1.setAttribute('role', 'banner');
+    assert.isFalse(rule.matches(h1));
+  });
+
+  it('should return true on headings with their role changes to an invalid role', function () {
+    var h1 = document.createElement('h1');
+    h1.setAttribute('role', 'bruce');
+    assert.isTrue(rule.matches(h1));
+  });
+});