fix(svg-non-empty-title): update fail message to indicate if the titl…

…e element is empty or missing (#2462) Update fail message to indicate if the title element is empty or missing Closes issue #2452
dequelabs · Aug 19, 2020 · 5b4a935 · 5b4a935
1 parent 86df85e
commit 5b4a935
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 13 deletions.
diff --git a/lib/checks/shared/svg-non-empty-title-evaluate.js b/lib/checks/shared/svg-non-empty-title-evaluate.js
@@ -5,7 +5,22 @@ function svgNonEmptyTitleEvaluate(node, options, virtualNode) {
 		const titleNode = virtualNode.children.find(({ props }) => {
 			return props.nodeName === 'title';
 		});
-		return !!titleNode && visibleVirtual(titleNode) !== '';
+
+		if (!titleNode) {
+			this.data({
+				messageKey: 'noTitle'
+			});
+			return false;
+		}
+
+		if (visibleVirtual(titleNode) === '') {
+			this.data({
+				messageKey: 'emptyTitle'
+			});
+			return false;
+		}
+
+		return true;
 	} catch (e) {
 		return undefined;
 	}

diff --git a/lib/checks/shared/svg-non-empty-title.json b/lib/checks/shared/svg-non-empty-title.json
@@ -4,8 +4,11 @@
 	"metadata": {
 		"impact": "serious",
 		"messages": {
-			"pass": "element has a child that is a title",
-			"fail": "element has no child that is a title",
+			"pass": "Element has a child that is a title",
+			"fail": {
+				"noTitle": "Element has no child that is a title",
+				"emptyTitle": "Element child title is empty"
+			},
 			"incomplete": "Unable to determine element has a child that is a title"
 		}
 	}

diff --git a/test/checks/shared/svg-non-empty-title.js b/test/checks/shared/svg-non-empty-title.js
@@ -2,56 +2,63 @@ describe('svg-non-empty-title tests', function() {
 	'use strict';
 
 	var fixture = document.getElementById('fixture');
+	var checkContext = axe.testUtils.MockCheckContext();
 	var checkSetup = axe.testUtils.checkSetup;
 	var checkEvaluate = axe.testUtils.getCheckEvaluate('svg-non-empty-title');
 
 	afterEach(function() {
 		fixture.innerHTML = '';
+		checkContext.reset();
 	});
 
 	it('returns true if the element has a `title` child', function() {
 		var checkArgs = checkSetup(
 			'<svg id="target"><title>Time II: Party</title></svg>'
 		);
-		assert.isTrue(checkEvaluate.apply(null, checkArgs));
+		assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
 	});
 
 	it('returns true if the `title` child has text nested in another element', function() {
 		var checkArgs = checkSetup(
 			'<svg id="target"><title><g>Time II: Party</g></title></svg>'
 		);
-		assert.isTrue(checkEvaluate.apply(null, checkArgs));
+		assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
 	});
 
 	it('returns false if the element has no `title` child', function() {
 		var checkArgs = checkSetup('<svg id="target"></svg>');
-		assert.isFalse(checkEvaluate.apply(null, checkArgs));
+		assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
+		assert.equal(checkContext._data.messageKey, 'noTitle');
 	});
 
 	it('returns false if the `title` child is empty', function() {
 		var checkArgs = checkSetup('<svg id="target"><title></title></svg>');
-		assert.isFalse(checkEvaluate.apply(null, checkArgs));
+		assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
+		assert.equal(checkContext._data.messageKey, 'emptyTitle');
 	});
 
 	it('returns false if the `title` is a grandchild', function() {
 		var checkArgs = checkSetup(
 			'<svg id="target"><circle><title>Time II: Party</title></circle></svg>'
 		);
-		assert.isFalse(checkEvaluate.apply(null, checkArgs));
+		assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
+		assert.equal(checkContext._data.messageKey, 'noTitle');
 	});
 
 	it('returns false if the `title` child has only whitespace', function() {
 		var checkArgs = checkSetup(
 			'<svg id="target"><title> \t\r\n </title></svg>'
 		);
-		assert.isFalse(checkEvaluate.apply(null, checkArgs));
+		assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
+		assert.equal(checkContext._data.messageKey, 'emptyTitle');
 	});
 
 	it('returns false if there are multiple titles, and the first is empty', function() {
 		var checkArgs = checkSetup(
 			'<svg id="target"><title></title><title>Time II: Party</title></svg>'
 		);
-		assert.isFalse(checkEvaluate.apply(null, checkArgs));
+		assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
+		assert.equal(checkContext._data.messageKey, 'emptyTitle');
 	});
 
 	describe('Serial Virtual Node', function() {
@@ -70,25 +77,29 @@ describe('svg-non-empty-title tests', function() {
 			child.parent = serialNode;
 			child.children = [text];
 			serialNode.children = [child];
+			var checkArgs = [null, {}, serialNode];
 
-			assert.isTrue(checkEvaluate(null, {}, serialNode));
+			assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
 		});
 
 		it('returns false if the element has no `title` child', function() {
 			var serialNode = new axe.SerialVirtualNode({
 				nodeName: 'svg'
 			});
 			serialNode.children = [];
+			var checkArgs = [null, {}, serialNode];
 
-			assert.isFalse(checkEvaluate(null, {}, serialNode));
+			assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
+			assert.equal(checkContext._data.messageKey, 'noTitle');
 		});
 
 		it('returns undefined if the element has empty children', function() {
 			var serialNode = new axe.SerialVirtualNode({
 				nodeName: 'svg'
 			});
+			var checkArgs = [null, {}, serialNode];
 
-			assert.isUndefined(checkEvaluate(null, {}, serialNode));
+			assert.isUndefined(checkEvaluate.apply(checkContext, checkArgs));
 		});
 	});
 });