fix(meta-viewport): Show attribute in message (#1061)

A user reported the meta-viewport check had a confusing failure message, so I changed it to pass along the failing attribute:

"Fix the following: user-scalable="no" on <meta> tag disables zooming"

Closes #1045

## Reviewer checks

**Required fields, to be filled out by PR reviewer(s)**
- [x] Follows the commit message policy, appropriate for next version
- [x] Has documentation updated, a DU ticket, or requires no documentation change
- [x] Includes new tests, or was unnecessary
- [x] Code is reviewed for security by: Jey (@JKODU)

lib/checks/mobile/meta-viewport-scale.js

@@ -26,10 +26,12 @@ if (
 }
 
 if (!lowerBound && result['user-scalable'] === 'no') {
+	this.data('user-scalable=no');
 	return false;
 }
 
 if (result['maximum-scale'] && parseFloat(result['maximum-scale']) < minimum) {
+	this.data('maximum-scale');
 	return false;
 }
 

lib/checks/mobile/meta-viewport.json

@@ -8,7 +8,7 @@
     "impact": "critical",
     "messages": {
       "pass": "<meta> tag does not disable zooming on mobile devices",
-      "fail": "<meta> tag disables zooming on mobile devices"
+      "fail": "{{=it.data}} on <meta> tag disables zooming on mobile devices"
     }
   }
 }

test/checks/mobile/meta-viewport-scale.js

@@ -2,25 +2,28 @@ describe('meta-viewport', function() {
 	'use strict';
 
 	var fixture = document.getElementById('fixture');
+	var checkContext = axe.testUtils.MockCheckContext();
 
 	afterEach(function() {
 		fixture.innerHTML = '';
+		checkContext.reset();
 	});
 	describe('; separator', function() {
 		it('should return false on user-scalable=no', function() {
 			fixture.innerHTML =
 				'<meta name="viewport" content="foo=bar, cats=dogs, user-scalable=no">';
 			var node = fixture.querySelector('meta');
 
-			assert.isFalse(checks['meta-viewport'].evaluate(node));
+			assert.isFalse(checks['meta-viewport'].evaluate.call(checkContext, node));
+			assert.deepEqual(checkContext._data, 'user-scalable=no');
 		});
 
 		it('should return false on user-scalable=no', function() {
 			fixture.innerHTML =
 				'<meta name="viewport" content="foo=bar, cats=dogs, user-scalable=no, more-stuff=ok">';
 			var node = fixture.querySelector('meta');
 
-			assert.isFalse(checks['meta-viewport'].evaluate(node));
+			assert.isFalse(checks['meta-viewport'].evaluate.call(checkContext, node));
 		});
 
 		it('should return true on user-scalable=yes', function() {
@@ -37,14 +40,16 @@ describe('meta-viewport', function() {
 			var node = fixture.querySelector('meta');
 
 			assert.isTrue(
-				checks['meta-viewport'].evaluate(node, { scaleMinimum: 2 })
+				checks['meta-viewport'].evaluate.call(checkContext, node, {
+					scaleMinimum: 2
+				})
 			);
 
 			fixture.innerHTML =
 				'<meta name="viewport" content="foo=bar, maximum-scale=3, cats=dogs">';
 			node = fixture.querySelector('meta');
 
-			assert.isTrue(checks['meta-viewport'].evaluate(node));
+			assert.isTrue(checks['meta-viewport'].evaluate.call(checkContext, node));
 		});
 
 		it('should return false on maximum-scale < options.scaleMinimum', function() {
@@ -53,15 +58,18 @@ describe('meta-viewport', function() {
 			var node = fixture.querySelector('meta');
 
 			assert.isFalse(
-				checks['meta-viewport'].evaluate(node, { scaleMinimum: 2 })
+				checks['meta-viewport'].evaluate.call(checkContext, node, {
+					scaleMinimum: 2
+				})
 			);
+			assert.deepEqual(checkContext._data, 'maximum-scale');
 		});
 
 		it('should return true if neither user-scalable or maximum-scale are set', function() {
 			fixture.innerHTML = '<meta name="viewport" content="foo=bar, cats=dogs">';
 			var node = fixture.querySelector('meta');
 
-			assert.isTrue(checks['meta-viewport'].evaluate(node));
+			assert.isTrue(checks['meta-viewport'].evaluate.call(checkContext, node));
 		});
 	});
 
@@ -71,38 +79,42 @@ describe('meta-viewport', function() {
 				'<meta name="viewport" content="foo=bar, cats=dogs, user-scalable=no">';
 			var node = fixture.querySelector('meta');
 
-			assert.isFalse(checks['meta-viewport'].evaluate(node));
+			assert.isFalse(checks['meta-viewport'].evaluate.call(checkContext, node));
+			assert.deepEqual(checkContext._data, 'user-scalable=no');
 		});
 
 		it('should return false on user-scalable=no', function() {
 			fixture.innerHTML =
 				'<meta name="viewport" content="foo=bar, cats=dogs, user-scalable=no, more-stuff=ok">';
 			var node = fixture.querySelector('meta');
 
-			assert.isFalse(checks['meta-viewport'].evaluate(node));
+			assert.isFalse(checks['meta-viewport'].evaluate.call(checkContext, node));
+			assert.deepEqual(checkContext._data, 'user-scalable=no');
 		});
 
 		it('should return true on user-scalable=yes', function() {
 			fixture.innerHTML =
 				'<meta name="viewport" content="foo=bar, cats=dogs, user-scalable=yes, more-stuff=ok">';
 			var node = fixture.querySelector('meta');
 
-			assert.isTrue(checks['meta-viewport'].evaluate(node));
+			assert.isTrue(checks['meta-viewport'].evaluate.call(checkContext, node));
 		});
 
 		it('should return true if maximum-scale >= options.scaleMinimum', function() {
 			fixture.innerHTML =
 				'<meta name="viewport" content="foo=bar, maximum-scale=5, cats=dogs">';
 			var node = fixture.querySelector('meta');
 
-			assert.isTrue(checks['meta-viewport'].evaluate(node));
+			assert.isTrue(checks['meta-viewport'].evaluate.call(checkContext, node));
 
 			fixture.innerHTML =
 				'<meta name="viewport" content="foo=bar, maximum-scale=2, cats=dogs">';
 			node = fixture.querySelector('meta');
 
 			assert.isTrue(
-				checks['meta-viewport'].evaluate(node, { scaleMinimum: 2 })
+				checks['meta-viewport'].evaluate.call(checkContext, node, {
+					scaleMinimum: 2
+				})
 			);
 		});
 
@@ -112,15 +124,17 @@ describe('meta-viewport', function() {
 			var node = fixture.querySelector('meta');
 
 			assert.isFalse(
-				checks['meta-viewport'].evaluate(node, { scaleMinimum: 2 })
+				checks['meta-viewport'].evaluate.call(checkContext, node, {
+					scaleMinimum: 2
+				})
 			);
 		});
 
 		it('should return true if neither user-scalable or maximum-scale are set', function() {
 			fixture.innerHTML = '<meta name="viewport" content="foo=bar, cats=dogs">';
 			var node = fixture.querySelector('meta');
 
-			assert.isTrue(checks['meta-viewport'].evaluate(node));
+			assert.isTrue(checks['meta-viewport'].evaluate.call(checkContext, node));
 		});
 	});
 });