refactor(aria-roledescription): use virtual node (#3570)

* use virtual node

lib/checks/aria/aria-roledescription-evaluate.js

@@ -7,8 +7,8 @@ import { getRole } from '../../commons/aria';
  * @param {String[]} options.supportedRoles List of ARIA roles that support the `aria-roledescription` attribute
  * @return {Mixed} True if the semantic role supports `aria-roledescription`. Undefined if the semantic role is `presentation` or `none`. False otherwise.
  */
-function ariaRoledescriptionEvaluate(node, options = {}) {
-  const role = getRole(node);
+function ariaRoledescriptionEvaluate(node, options = {}, virtualNode) {
+  const role = getRole(virtualNode);
   const supportedRoles = options.supportedRoles || [];
 
   if (supportedRoles.includes(role)) {

test/checks/aria/aria-roledescription.js

@@ -1,81 +1,86 @@
-describe('aria-roledescription', function() {
+describe('aria-roledescription', function () {
   'use strict';
 
-  var fixture = document.getElementById('fixture');
-  var flatTreeSetup = axe.testUtils.flatTreeSetup;
   var checkContext = axe.testUtils.MockCheckContext();
+  var queryFixture = axe.testUtils.queryFixture;
 
-  afterEach(function() {
-    fixture.innerHTML = '';
+  afterEach(function () {
     checkContext.reset();
   });
 
-  it('returns true for elements with an implicit supported role', function() {
-    fixture.innerHTML =
-      '<button aria-roledescription="Awesome Button">Click</button>';
-    flatTreeSetup(fixture);
-    var actual = axe.testUtils
-      .getCheckEvaluate('aria-roledescription')
-      .call(checkContext, fixture.firstChild, {
+  it('returns true for elements with an implicit supported role', function () {
+    var vNode = queryFixture(
+      '<button aria-roledescription="Awesome Button" id="target">Click</button>'
+    );
+    var actual = axe.testUtils.getCheckEvaluate('aria-roledescription').call(
+      checkContext,
+      null,
+      {
         supportedRoles: ['button']
-      });
+      },
+      vNode
+    );
     assert.equal(actual, true);
     assert.isNull(checkContext._data, null);
   });
 
-  it('returns true for elements with an explicit supported role', function() {
-    fixture.innerHTML =
-      '<div role="radio" aria-roledescription="Awesome Radio">Click</div>';
-    flatTreeSetup(fixture);
-    var actual = axe.testUtils
-      .getCheckEvaluate('aria-roledescription')
-      .call(checkContext, fixture.firstChild, {
+  it('returns true for elements with an explicit supported role', function () {
+    var vNode = queryFixture(
+      '<div role="radio" aria-roledescription="Awesome Radio" id="target">Click</div>'
+    );
+    var actual = axe.testUtils.getCheckEvaluate('aria-roledescription').call(
+      checkContext,
+      null,
+      {
         supportedRoles: ['radio']
-      });
+      },
+      vNode
+    );
     assert.equal(actual, true);
     assert.isNull(checkContext._data, null);
   });
 
-  it('returns undefined for elements with an unsupported role', function() {
-    fixture.innerHTML =
-      '<div role="main" aria-roledescription="Awesome Main">The main element</div>';
-    flatTreeSetup(fixture);
+  it('returns undefined for elements with an unsupported role', function () {
+    var vNode = queryFixture(
+      '<div role="main" aria-roledescription="Awesome Main" id="target">The main element</div>'
+    );
     var actual = axe.testUtils
       .getCheckEvaluate('aria-roledescription')
-      .call(checkContext, fixture.firstChild);
+      .call(checkContext, null, {}, vNode);
     assert.equal(actual, undefined);
     assert.isNull(checkContext._data, null);
   });
 
-  it('returns false for elements without role', function() {
-    fixture.innerHTML =
-      '<div aria-roledescription="Awesome Main">The main element</div>';
-    flatTreeSetup(fixture);
+  it('returns false for elements without role', function () {
+    var vNode = queryFixture(
+      '<div aria-roledescription="Awesome Main" id="target">The main element</div>'
+    );
     var actual = axe.testUtils
       .getCheckEvaluate('aria-roledescription')
-      .call(checkContext, fixture.firstChild);
+      .call(checkContext, null, {}, vNode);
     assert.equal(actual, false);
     assert.isNull(checkContext._data, null);
   });
 
-  it('returns false for elements with role=presentation', function() {
-    fixture.innerHTML =
-      '<div role="presentation" aria-roledescription="Awesome Main">The main element</div>';
-    flatTreeSetup(fixture);
+  it('returns false for elements with role=presentation', function () {
+    var vNode = queryFixture(
+      '<div role="presentation" aria-roledescription="Awesome Main" id="target">The main element</div>'
+    );
     var actual = axe.testUtils
       .getCheckEvaluate('aria-roledescription')
-      .call(checkContext, fixture.firstChild);
+      .call(checkContext, null, {}, vNode);
     assert.equal(actual, false);
     assert.isNull(checkContext._data, null);
   });
 
-  it('returns false for elements with role=none', function() {
-    fixture.innerHTML =
-      '<div role="none" aria-roledescription="Awesome Main">The main element</div>';
-    flatTreeSetup(fixture);
+  it('returns false for elements with role=none', function () {
+    var vNode = queryFixture(
+      '<div role="none" aria-roledescription="Awesome Main" id="target">The main element</div>'
+    );
+
     var actual = axe.testUtils
       .getCheckEvaluate('aria-roledescription')
-      .call(checkContext, fixture.firstChild);
+      .call(checkContext, null, {}, vNode);
     assert.equal(actual, false);
     assert.isNull(checkContext._data, null);
   });

test/integration/virtual-rules/aria-roledescription.js

@@ -0,0 +1,95 @@
+describe('aria-roledescription virtual-rule', function () {
+  it('should pass for elements with an implicit supported role', function () {
+    var node = new axe.SerialVirtualNode({
+      nodeName: 'button',
+      attributes: {
+        'aria-roledescription': 'Awesome Button'
+      }
+    });
+
+    var results = axe.runVirtualRule('aria-roledescription', node);
+
+    assert.lengthOf(results.passes, 1);
+    assert.lengthOf(results.violations, 0);
+    assert.lengthOf(results.incomplete, 0);
+  });
+
+  it('should pass for elements with an explicit supported role', function () {
+    var node = new axe.SerialVirtualNode({
+      nodeName: 'div',
+      attributes: {
+        'aria-roledescription': 'Awesome Radio',
+        role: 'radio'
+      }
+    });
+
+    var results = axe.runVirtualRule('aria-roledescription', node);
+
+    assert.lengthOf(results.passes, 1);
+    assert.lengthOf(results.violations, 0);
+    assert.lengthOf(results.incomplete, 0);
+  });
+
+  it('should incomplete for elements with an unsupported role', function () {
+    var node = new axe.SerialVirtualNode({
+      nodeName: 'div',
+      attributes: {
+        'aria-roledescription': 'Awesome Main',
+        role: 'main'
+      }
+    });
+
+    var results = axe.runVirtualRule('aria-roledescription', node);
+
+    assert.lengthOf(results.passes, 0);
+    assert.lengthOf(results.violations, 0);
+    assert.lengthOf(results.incomplete, 1);
+  });
+
+  it('should fail for elements without role', function () {
+    var node = new axe.SerialVirtualNode({
+      nodeName: 'div',
+      attributes: {
+        'aria-roledescription': 'Awesome Main'
+      }
+    });
+
+    var results = axe.runVirtualRule('aria-roledescription', node);
+
+    assert.lengthOf(results.passes, 0);
+    assert.lengthOf(results.violations, 1);
+    assert.lengthOf(results.incomplete, 0);
+  });
+
+  it('should fail for elements with role=presentation', function () {
+    var node = new axe.SerialVirtualNode({
+      nodeName: 'div',
+      attributes: {
+        'aria-roledescription': 'Awesome Main',
+        role: 'presentation'
+      }
+    });
+
+    var results = axe.runVirtualRule('aria-roledescription', node);
+
+    assert.lengthOf(results.passes, 0);
+    assert.lengthOf(results.violations, 1);
+    assert.lengthOf(results.incomplete, 0);
+  });
+
+  it('should fail for elements with role=none', function () {
+    var node = new axe.SerialVirtualNode({
+      nodeName: 'div',
+      attributes: {
+        'aria-roledescription': 'Awesome Main',
+        role: 'none'
+      }
+    });
+
+    var results = axe.runVirtualRule('aria-roledescription', node);
+
+    assert.lengthOf(results.passes, 0);
+    assert.lengthOf(results.violations, 1);
+    assert.lengthOf(results.incomplete, 0);
+  });
+});