fix: use virtual methods where applicable

Until we have bi-directional node/vNode APIs it didn't make sense to use virtual methods everywhere
dequelabs · Feb 9, 2018 · 6ddc4e5 · 6ddc4e5
1 parent 9c7b9f1
commit 6ddc4e5
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 69 deletions.
diff --git a/lib/checks/keyboard/focusable-no-name.js b/lib/checks/keyboard/focusable-no-name.js
@@ -3,4 +3,4 @@ var tabIndex = node.getAttribute('tabindex'),
 if (!inFocusOrder) {
 	return false;
 }
-return !axe.commons.text.accessibleText(node);
+return !axe.commons.text.accessibleTextVirtual(virtualNode);
diff --git a/lib/checks/label/implicit.js b/lib/checks/label/implicit.js
@@ -1,6 +1,6 @@
 
 var label = axe.commons.dom.findUpVirtual(virtualNode, 'label');
 if (label) {
-	return !!axe.commons.text.accessibleText(label);
+	return !!axe.commons.text.accessibleTextVirtual(label);
 }
 return false;
diff --git a/lib/checks/shared/button-has-visible-text.js b/lib/checks/shared/button-has-visible-text.js
@@ -3,7 +3,7 @@ let role = node.getAttribute('role');
 let label;
 
 if (nodeName === 'BUTTON' || (role === 'button' && nodeName !== 'INPUT')) {
-	label = axe.commons.text.accessibleText(node);
+	label = axe.commons.text.accessibleTextVirtual(virtualNode);
 	this.data(label);
 
 	return !!label;

diff --git a/lib/checks/shared/has-visible-text.js b/lib/checks/shared/has-visible-text.js
@@ -1 +1 @@
-return axe.commons.text.accessibleText(node).length > 0;
+return axe.commons.text.accessibleTextVirtual(virtualNode).length > 0;
diff --git a/lib/checks/tables/same-caption-summary.js b/lib/checks/tables/same-caption-summary.js
@@ -1 +1,2 @@
+// passing node.caption to accessibleText instead of using the logic in accessibleTextVirtual on virtualNode
 return !!(node.summary && node.caption) && node.summary === axe.commons.text.accessibleText(node.caption);
diff --git a/test/checks/keyboard/focusable-no-name.js b/test/checks/keyboard/focusable-no-name.js
@@ -2,52 +2,51 @@ describe('focusable-no-name', function () {
 	'use strict';
 
 	var fixture = document.getElementById('fixture');
-	var fixtureSetup = axe.testUtils.fixtureSetup;
+	var checkSetup = axe.testUtils.checkSetup;
+	var shadowCheckSetup = axe.testUtils.shadowCheckSetup;
 	var shadowSupport = axe.testUtils.shadowSupport;
 
+	var checkContext = {
+		_data: null,
+		data: function (d) {
+			this._data = d;
+		}
+	};
+
 	afterEach(function () {
 		fixture.innerHTML = '';
+		axe._tree = undefined;
 	});
 
 	it('should pass if tabindex < 0', function () {
-		fixtureSetup('<a href="#" tabindex="-1"></a>');
-		var node = fixture.querySelector('a');
-		assert.isFalse(checks['focusable-no-name'].evaluate(node));
+		var params = checkSetup('<a href="#" tabindex="-1" id="target"></a>');
+		assert.isFalse(checks['focusable-no-name'].evaluate.apply(checkContext, params));
 	});
 
 	it('should pass element is not natively focusable', function () {
-		fixtureSetup('<span role="link" href="#"></span>');
-		var node = fixture.querySelector('span');
-		assert.isFalse(checks['focusable-no-name'].evaluate(node));
+		var params = checkSetup('<span role="link" href="#" id="target"></span>');
+		assert.isFalse(checks['focusable-no-name'].evaluate.apply(checkContext, params));
 	});
 
 	it('should fail if element is tabbable with no name - native', function () {
-		fixtureSetup('<a href="#"></a>');
-		var node = fixture.querySelector('a');
-		assert.isTrue(checks['focusable-no-name'].evaluate(node));
+		var params = checkSetup('<a href="#" id="target"></a>');
+		assert.isTrue(checks['focusable-no-name'].evaluate.apply(checkContext, params));
 	});
 
-	it('should fail if element is tabable with no name - ARIA', function () {
-		fixtureSetup('<span tabindex="0" role="link" href="#"></spam>');
-		var node = fixture.querySelector('span');
-		assert.isTrue(checks['focusable-no-name'].evaluate(node));
+	it('should fail if element is tabbable with no name - ARIA', function () {
+		var params = checkSetup('<span tabindex="0" role="link" id="target" href="#"></spam>');
+		assert.isTrue(checks['focusable-no-name'].evaluate.apply(checkContext, params));
 	});
 
-	it('should pass if the element is tabable but has an accessible name', function () {
-		fixtureSetup('<a href="#" title="Hello"></a>');
-		var node = fixture.querySelector('a');
-		assert.isFalse(checks['focusable-no-name'].evaluate(node));
+	it('should pass if the element is tabbable but has an accessible name', function () {
+		var params = checkSetup('<a href="#" title="Hello" id="target"></a>');
+		assert.isFalse(checks['focusable-no-name'].evaluate.apply(checkContext, params));
 	});
 
 	(shadowSupport.v1 ? it : xit)('should pass if the content is passed in with shadow DOM', function () {
-		var node = document.createElement('div');
-		node.innerText = 'Content!';
-		var shadow = node.attachShadow({ mode: 'open' });
-		shadow.innerHTML = '<a href="#"><slot></slot></a>';
-		fixtureSetup(node);
-
-		var link = shadow.querySelector('a');
-		assert.isFalse(checks['focusable-no-name'].evaluate(link));
+		var params = shadowCheckSetup('<div>Content!</div>', '<a href="#" id="target"><slot></slot></a>');
+
+		assert.isFalse(checks['focusable-no-name'].evaluate.apply(checkContext, params));
 	});
 
 });
diff --git a/test/checks/shared/button-has-visible-text.js b/test/checks/shared/button-has-visible-text.js
@@ -29,14 +29,14 @@ describe('button-has-visible-text', function () {
 	});
 
 	it('should return true if ARIA button has text', function () {
-		var checkArgs = checkSetup('<div role="button">Text</div>>', '[role=button]');
+		var checkArgs = checkSetup('<div role="button">Text</div>', '[role=button]');
 
 		assert.isTrue(checks['button-has-visible-text'].evaluate.apply(checkContext, checkArgs));
 		assert.deepEqual(checkContext._data, 'Text');
 	});
 
 	it('should return false if ARIA button has no text', function () {
-		var checkArgs = checkSetup('<div role="button"></div>>', '[role=button]');
+		var checkArgs = checkSetup('<div role="button"></div>', '[role=button]');
 
 		assert.isFalse(checks['button-has-visible-text'].evaluate.apply(checkContext, checkArgs));
 	});

diff --git a/test/checks/shared/has-visible-text.js b/test/checks/shared/has-visible-text.js
@@ -2,28 +2,34 @@ describe('has-visible-text', function () {
 	'use strict';
 
 	var fixture = document.getElementById('fixture');
-	var fixtureSetup = axe.testUtils.fixtureSetup;
+	var checkSetup = axe.testUtils.checkSetup;
+
+	var checkContext = {
+		_data: null,
+		data: function (d) {
+			this._data = d;
+		}
+	};
 
 	afterEach(function () {
 		fixture.innerHTML = '';
+		axe._tree = undefined;
+		checkContext._data = null;
 	});
 
 	it('should return false if there is no visible text', function () {
-		fixtureSetup('<object></object>');
-		var node = document.querySelector('object');
-		assert.isFalse(checks['has-visible-text'].evaluate(node));
+		var params = checkSetup('<object id="target"></object>');
+		assert.isFalse(checks['has-visible-text'].evaluate.apply(checkContext, params));
 	});
 
 	it('should return false if there is text, but its hidden', function () {
-		fixtureSetup('<object><span style="display:none">hello!</span></object>');
-		var node = document.querySelector('object');
-		assert.isFalse(checks['has-visible-text'].evaluate(node));
+		var params = checkSetup('<object id="target"><span style="display:none">hello!</span></object>');
+		assert.isFalse(checks['has-visible-text'].evaluate.apply(checkContext, params));
 	});
 
 	it('should return true if there is visible text', function () {
-		fixtureSetup('<object>hello!</object>');
-		var node = document.querySelector('object');
-		assert.isTrue(checks['has-visible-text'].evaluate(node));
+		var params = checkSetup('<object id="target">hello!</object>');
+		assert.isTrue(checks['has-visible-text'].evaluate.apply(checkContext, params));
 	});
 
 });
diff --git a/test/checks/tables/same-caption-summary.js b/test/checks/tables/same-caption-summary.js
@@ -2,59 +2,64 @@ describe('same-caption-summary', function () {
 	'use strict';
 
 	var fixture = document.getElementById('fixture');
-	var fixtureSetup = axe.testUtils.fixtureSetup;
+	var checkSetup = axe.testUtils.checkSetup;
+	var shadowCheckSetup = axe.testUtils.shadowCheckSetup;
 	var shadowSupport = axe.testUtils.shadowSupport;
 
+	var checkContext = {
+		_data: null,
+		data: function (d) {
+			this._data = d;
+		}
+	};
+
+
 	afterEach(function () {
 		fixture.innerHTML = '';
+		axe._tree = undefined;
 	});
 
 	it('should return false there is no caption', function () {
-		fixtureSetup('<table summary="hi"><tr><td></td></tr></table>');
-		var node = fixture.querySelector('table');
+		var params = checkSetup('<table summary="hi" id="target"><tr><td></td></tr></table>');
 
-		assert.isFalse(checks['same-caption-summary'].evaluate(node));
+		assert.isFalse(checks['same-caption-summary'].evaluate.apply(checkContext, params));
 
 	});
 
 	it('should return false there is no summary', function () {
-		fixtureSetup('<table><caption>Hi</caption><tr><td></td></tr></table>');
-		var node = fixture.querySelector('table');
+		var params = checkSetup('<table id="target"><caption>Hi</caption><tr><td></td></tr></table>');
 
-		assert.isFalse(checks['same-caption-summary'].evaluate(node));
+		assert.isFalse(checks['same-caption-summary'].evaluate.apply(checkContext, params));
 
 	});
 
 	it('should return false if summary and caption are different', function () {
-		fixtureSetup('<table summary="bye"><caption>Hi</caption><tr><td></td></tr></table>');
-		var node = fixture.querySelector('table');
+		var params = checkSetup('<table summary="bye" id="target"><caption>Hi</caption><tr><td></td></tr></table>');
 
-		assert.isFalse(checks['same-caption-summary'].evaluate(node));
+		assert.isFalse(checks['same-caption-summary'].evaluate.apply(checkContext, params));
 
 	});
 
 	it('should return true if summary and caption are the same', function () {
-		fixtureSetup('<table summary="Hi"><caption>Hi</caption><tr><td></td></tr></table>');
-		var node = fixture.querySelector('table');
+		var params = checkSetup('<table summary="Hi" id="target"><caption>Hi</caption><tr><td></td></tr></table>');
 
-		assert.isTrue(checks['same-caption-summary'].evaluate(node));
+		assert.isTrue(checks['same-caption-summary'].evaluate.apply(checkContext, params));
 	});
 
 	(shadowSupport.v1 ? it : xit)('should match slotted caption elements', function () {
-		var node = document.createElement('div');
-		node.innerHTML = '<span slot="caption">Caption</span>' +
-			'<span slot="one">Data element 1</span>' +
-			'<span slot="two">Data element 2</span>';
-
-		var root = node.attachShadow({ mode: 'open' });
-		var table = document.createElement('table');
-		table.innerHTML = '<caption><slot name="caption"></slot></caption>' +
-				'<tr><td><slot name="one"></slot></td><td><slot name="two"></slot></td></tr>';
-		table.setAttribute('summary', 'Caption');
-		root.appendChild(table);
-		fixtureSetup(node);
-
-		assert.isTrue(checks['same-caption-summary'].evaluate(table));
+		var params = shadowCheckSetup(
+			'<div>' +
+				'<span slot="caption">Caption</span>' +
+				'<span slot="one">Data element 1</span>' +
+				'<span slot="two">Data element 2</span>' +
+			'</div>',
+			'<table summary="Caption" id="target">' +
+				'<caption><slot name="caption"></slot></caption>' +
+				'<tr><td><slot name="one"></slot></td><td><slot name="two"></slot></td></tr>' +
+			'</table>'
+		);
+
+		assert.isTrue(checks['same-caption-summary'].evaluate.apply(checkContext, params));
 	});
 
 });