refactor(empty-heading): use virtual node

lib/checks/generic/has-text-content-evaluate.js

@@ -1,11 +1,9 @@
 import { sanitize, subtreeText } from '../../commons/text';
 
-function hasTextContentEvaluate(node, options, virtualNode) {
+export default function hasTextContentEvaluate(node, options, virtualNode) {
   try {
     return sanitize(subtreeText(virtualNode)) !== '';
   } catch (e) {
     return undefined;
   }
 }
-
-export default hasTextContentEvaluate;

lib/commons/text/accessible-text-virtual.js

@@ -74,7 +74,7 @@ function textNodeValue(virtualNode) {
 }
 
 /**
- * Check if the
+ * Check if the VirtualNode should be ignored because it is not visible or hidden should be included
  * @param {VirtualNode} element
  * @param {Object} context
  * @property {VirtualNode[]} processed

lib/rules/heading-matches.js

@@ -1,19 +1,5 @@
-function headingMatches(node) {
-  // Get all valid roles
-  let explicitRoles;
-  if (node.hasAttribute('role')) {
-    explicitRoles = node
-      .getAttribute('role')
-      .split(/\s+/i)
-      .filter(axe.commons.aria.isValidRole);
-  }
+import { getRole } from '../commons/aria';
 
-  // 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';
-  }
+export default function headingMatches(node, virtualNode) {
+  return getRole(virtualNode) === 'heading';
 }
-
-export default headingMatches;

test/checks/shared/has-visible-text.js

@@ -1,18 +1,14 @@
-describe('has-visible-text', function() {
+describe('has-visible-text', function () {
   'use strict';
 
-  var fixture = document.getElementById('fixture');
   var checkSetup = axe.testUtils.checkSetup;
-
   var checkContext = axe.testUtils.MockCheckContext();
 
-  afterEach(function() {
-    fixture.innerHTML = '';
-    axe._tree = undefined;
+  afterEach(function () {
     checkContext.reset();
   });
 
-  it('should return false if there is no visible text', function() {
+  it('should return false if there is no visible text', function () {
     var params = checkSetup('<p id="target"></p>');
     assert.isFalse(
       axe.testUtils
@@ -21,7 +17,7 @@ describe('has-visible-text', function() {
     );
   });
 
-  it('should return false if there is text, but its hidden', function() {
+  it('should return false if there is text, but its hidden', function () {
     var params = checkSetup(
       '<p id="target"><span style="display:none">hello!</span></p>'
     );
@@ -32,7 +28,7 @@ describe('has-visible-text', function() {
     );
   });
 
-  it('should return true if there is visible text', function() {
+  it('should return true if there is visible text', function () {
     var params = checkSetup('<p id="target">hello!</p>');
     assert.isTrue(
       axe.testUtils
@@ -41,8 +37,8 @@ describe('has-visible-text', function() {
     );
   });
 
-  describe('SerialVirtualNode', function() {
-    it('should return false if element is not named from contents', function() {
+  describe('SerialVirtualNode', function () {
+    it('should return false if element is not named from contents', function () {
       var node = new axe.SerialVirtualNode({
         nodeName: 'article'
       });
@@ -52,7 +48,7 @@ describe('has-visible-text', function() {
       );
     });
 
-    it('should return incomplete if no other properties are set', function() {
+    it('should return incomplete if no other properties are set', function () {
       var node = new axe.SerialVirtualNode({
         nodeName: 'button'
       });
@@ -62,7 +58,7 @@ describe('has-visible-text', function() {
       );
     });
 
-    it('should return false if there is no visible text', function() {
+    it('should return false if there is no visible text', function () {
       var node = new axe.SerialVirtualNode({
         nodeName: 'button'
       });
@@ -73,7 +69,7 @@ describe('has-visible-text', function() {
       );
     });
 
-    it('should return true if there is visible text', function() {
+    it('should return true if there is visible text', function () {
       var node = new axe.SerialVirtualNode({
         nodeName: 'p'
       });

test/integration/virtual-rules/empty-heading.js

@@ -0,0 +1,149 @@
+describe('empty-heading virtual-rule', function () {
+  it('should pass with visible text', function () {
+    var node = new axe.SerialVirtualNode({
+      nodeName: 'h1',
+      attributes: {}
+    });
+    var child = new axe.SerialVirtualNode({
+      nodeName: '#text',
+      nodeType: 3,
+      nodeValue: 'OK',
+      attributes: {}
+    });
+
+    node.children = [child];
+
+    var results = axe.runVirtualRule('empty-heading', node);
+
+    assert.lengthOf(results.violations, 0);
+    assert.lengthOf(results.incomplete, 0);
+    assert.lengthOf(results.passes, 1);
+  });
+
+  it('should incomplete if no other properties are set', function () {
+    var node = new axe.SerialVirtualNode({
+      nodeName: 'h1'
+    });
+
+    var results = axe.runVirtualRule('empty-heading', node);
+
+    assert.lengthOf(results.violations, 0);
+    assert.lengthOf(results.incomplete, 1);
+    assert.lengthOf(results.passes, 0);
+  });
+
+  it('should pass for title', function () {
+    var results = axe.runVirtualRule('empty-heading', {
+      nodeName: 'h1',
+      attributes: {
+        title: 'it has a title'
+      }
+    });
+
+    assert.lengthOf(results.passes, 1);
+    assert.lengthOf(results.violations, 0);
+    assert.lengthOf(results.incomplete, 0);
+  });
+
+  it('should pass on explicit role', function () {
+    var results = axe.runVirtualRule('empty-heading', {
+      nodeName: 'span',
+      attributes: {
+        role: 'heading',
+        title: 'foobar'
+      }
+    });
+
+    assert.lengthOf(results.passes, 1);
+    assert.lengthOf(results.violations, 0);
+    assert.lengthOf(results.incomplete, 0);
+  });
+
+  it('should pass on implicit role', function () {
+    var results = axe.runVirtualRule('empty-heading', {
+      nodeName: 'h1',
+      attributes: {
+        title: 'foobar'
+      }
+    });
+
+    assert.lengthOf(results.passes, 1);
+    assert.lengthOf(results.violations, 0);
+    assert.lengthOf(results.incomplete, 0);
+  });
+
+  it('should pass for aria-label', function () {
+    var results = axe.runVirtualRule('empty-heading', {
+      nodeName: 'h1',
+      attributes: {
+        'aria-label': 'foobar'
+      }
+    });
+
+    assert.lengthOf(results.passes, 1);
+    assert.lengthOf(results.violations, 0);
+    assert.lengthOf(results.incomplete, 0);
+  });
+
+  it('should fail when aria-label is empty', function () {
+    var node = new axe.SerialVirtualNode({
+      nodeName: 'h1',
+      attributes: {
+        'aria-label': ''
+      }
+    });
+    node.children = [];
+
+    var results = axe.runVirtualRule('empty-heading', node);
+
+    assert.lengthOf(results.passes, 0);
+    assert.lengthOf(results.violations, 1);
+    assert.lengthOf(results.incomplete, 0);
+  });
+
+  it('should incomplete for aria-labelledby', function () {
+    var results = axe.runVirtualRule('empty-heading', {
+      nodeName: 'h1',
+      attributes: {
+        'aria-labelledby': 'foobar'
+      }
+    });
+
+    assert.lengthOf(results.passes, 0);
+    assert.lengthOf(results.violations, 0);
+    assert.lengthOf(results.incomplete, 1);
+  });
+
+  it('should fail when title is empty', function () {
+    var node = new axe.SerialVirtualNode({
+      nodeName: 'h1',
+      attributes: {
+        title: ''
+      }
+    });
+    node.children = [];
+
+    var results = axe.runVirtualRule('empty-heading', node);
+
+    assert.lengthOf(results.passes, 0);
+    assert.lengthOf(results.violations, 1);
+    assert.lengthOf(results.incomplete, 0);
+  });
+
+  it('should fail in order to account for presentation conflict resolution', function () {
+    var node = new axe.SerialVirtualNode({
+      nodeName: 'h1',
+      attributes: {
+        role: 'none',
+        'aria-label': ''
+      }
+    });
+    node.children = [];
+
+    var results = axe.runVirtualRule('empty-heading', node);
+
+    assert.lengthOf(results.passes, 0);
+    assert.lengthOf(results.violations, 1);
+    assert.lengthOf(results.incomplete, 0);
+  });
+});

test/rule-matches/heading-matches.js

@@ -1,76 +1,51 @@
-describe('heading-matches', function() {
+describe('heading-matches', function () {
   'use strict';
-
-  var fixture = document.getElementById('fixture');
-  var flatTreeSetup = axe.testUtils.flatTreeSetup;
+  var queryFixture = axe.testUtils.queryFixture;
+  var fixtureSetup = axe.testUtils.fixtureSetup;
   var rule;
 
-  beforeEach(function() {
+  beforeEach(function () {
     rule = axe.utils.getRule('empty-heading');
   });
 
-  afterEach(function() {
-    fixture.innerHTML = '';
-  });
-
-  it('is a function', function() {
+  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');
-    fixture.appendChild(div);
-    flatTreeSetup(fixture);
-    assert.isFalse(rule.matches(div));
+  it('should return false on elements that are not headings', function () {
+    var vNode = fixtureSetup('<div></div>');
+    assert.isFalse(rule.matches(null, vNode));
   });
 
-  it('should return true on elements with "heading" in the role', function() {
-    var div = document.createElement('div');
-    div.setAttribute('role', 'heading');
-    fixture.appendChild(div);
-    flatTreeSetup(fixture);
-    assert.isTrue(rule.matches(div));
-
-    div.setAttribute('role', 'slider heading');
-    assert.isTrue(rule.matches(div));
+  it('should return true on elements with role="heading"', function () {
+    var vNode = queryFixture('<div role="heading" id="target"></div>');
+    assert.isTrue(rule.matches(null, vNode));
   });
 
-  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');
-
-    fixture.appendChild(h1);
-    fixture.appendChild(h2);
-    fixture.appendChild(h3);
+  it('should return true on regular headings without roles', function () {
+    for (var i = 1; i <= 6; i++) {
+      var vNode = queryFixture('<h' + i + ' id="target"></h' + i + '>');
+      assert.isTrue(rule.matches(null, vNode));
+    }
+  });
 
-    flatTreeSetup(fixture);
-    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 vNode = queryFixture('<h1 role="banner" id="target"></h1>');
+    assert.isFalse(rule.matches(null, vNode));
   });
 
-  it('should return false on headings with their role changes', function() {
-    var h1 = document.createElement('h1');
-    h1.setAttribute('role', 'banner');
-    fixture.appendChild(h1);
-    flatTreeSetup(fixture);
-    assert.isFalse(rule.matches(h1));
+  it('should return true on headings with their role changes to an invalid role', function () {
+    var vNode = queryFixture('<h1 role="bruce" id="target"></h1>');
+    assert.isTrue(rule.matches(null, vNode));
   });
 
-  it('should return true on headings with their role changes to an invalid role', function() {
-    var h1 = document.createElement('h1');
-    h1.setAttribute('role', 'bruce');
-    fixture.appendChild(h1);
-    flatTreeSetup(fixture);
-    assert.isTrue(rule.matches(h1));
+  it('should return true on headings with their role changes to an abstract role', function () {
+    var vNode = queryFixture('<h1 role="widget" id="target"></h1>');
+    assert.isTrue(rule.matches(null, vNode));
   });
 
-  it('should return true on headings with their role changes to an abstract role', function() {
-    var h1 = document.createElement('h1');
-    h1.setAttribute('role', 'widget');
-    fixture.appendChild(h1);
-    flatTreeSetup(fixture);
-    assert.isTrue(rule.matches(h1));
+  it('should return true on headings with explicit role="none" and an empty aria-label to account for presentation conflict resolution', function () {
+    var vNode = queryFixture('<h1 aria-label="" role="none" id="target"></h1>');
+    assert.isTrue(rule.matches(null, vNode));
   });
 });