fix(has-at-least-one-main): Rename check to page-has-main, for reusab…

…ility

BREAKING CHANGE: Original has-at-least-one-main check is no longer available

lib/checks/keyboard/page-has-elm-after.js

@@ -0,0 +1,9 @@
+const elmUsedAnywhere = results.some(frameResult => frameResult.result === true);
+
+// If the element exists in any frame, set them all to true
+if (elmUsedAnywhere) {
+  results.forEach(result => {
+      result.result = elmUsedAnywhere;
+  });
+}
+return results;

lib/checks/keyboard/page-has-elm.js

@@ -0,0 +1,7 @@
+if (!options || !options.selector || typeof options.selector !== 'string') {
+  throw new TypeError('visible-in-page requires options.selector to be a string');
+}
+
+const matchingElms = axe.utils.querySelectorAll(virtualNode,
+    options.selector);
+return matchingElms && matchingElms.length > 0;

lib/checks/keyboard/page-has-main.json

@@ -0,0 +1,15 @@
+{
+  "id": "page-has-main",
+  "evaluate": "page-has-elm.js",
+  "after": "page-has-elm-after.js",
+  "options": {
+    "selector": "main:not([role]), [role='main']"
+  },
+  "metadata": {
+    "impact": "moderate",
+    "messages": {
+      "pass": "Page has at least one main landmark",
+      "fail": "Page must have a main landmark"
+    }
+  }
+}

lib/rules/landmark-one-main.json

@@ -9,7 +9,7 @@
 		"help": "Page must contain one main landmark."
 	},
 	"all": [
-		"has-at-least-one-main",
+		"page-has-main",
 		"has-no-more-than-one-main"
 		],
 	"any": [],

test/checks/keyboard/page-has-elm.js

@@ -0,0 +1,99 @@
+describe('page-has-*', function () {
+	'use strict';
+
+	var fixture = document.getElementById('fixture');
+	var checkContext = new axe.testUtils.MockCheckContext();
+	var checkSetup = axe.testUtils.checkSetup;
+	var shadowSupported = axe.testUtils.shadowSupport.v1;
+	var shadowCheckSetup = axe.testUtils.shadowCheckSetup;
+
+	afterEach(function () {
+		fixture.innerHTML = '';
+		checkContext.reset();
+		axe._tree = undefined;
+	});
+
+	describe('evaluate', function () {
+		var evaluate = checks['page-has-main'].evaluate;
+
+		it('throws if there is no selector', function () {
+			assert.throws(function () {
+				var params = checkSetup('<div id="target">No role</div>', undefined);
+				evaluate.apply(checkContext, params);
+			});
+
+			assert.throws(function () {
+				var params = checkSetup('<div id="target">No role</div>', {});
+				evaluate.apply(checkContext, params);
+			});
+
+			assert.throws(function () {
+				var badOptions = { selector: [] };
+				var params = checkSetup('<div id="target">No role</div>', badOptions);
+				evaluate.apply(checkContext, params);
+			});
+		});
+
+		it('returns true if there are any matching elements', function () {
+			var options = { selector: 'b' };
+			var params = checkSetup('<div id="target"><b>No role</b></div>', options);
+			assert.isTrue(evaluate.apply(checkContext, params));
+		});
+
+		it('returns false if there are no matching elements', function () {
+			var options = { selector: 'i' };
+			var params = checkSetup('<div id="target"><b>No role</b></div>', options);
+			assert.isFalse(evaluate.apply(checkContext, params));
+		});
+	});
+
+	describe('after', function () {
+		var after = checks['page-has-main'].after;
+
+		it('sets all results to true if any are true', function () {
+			var results = [{ result: true }, { result: false }, { result: undefined }];
+			assert.deepEqual(after(results), [{ result: true },
+					{ result: true }, { result: true }]);
+		});
+
+		it('Leave the results as is if none of them were true', function () {
+			var results = [{ result: false }, { result: false }, { result: undefined }];
+			assert.equal(after(results), results);
+		});
+	});
+
+	describe('page-has-main', function () {
+		var check = checks['page-has-main'];
+
+		it('should return false if no div has role property', function() {
+			var params = checkSetup('<div id="target">No role</div>', check.options);
+			var mainIsFound = check.evaluate.apply(checkContext, params);
+			assert.isFalse(mainIsFound);
+		});
+
+		it('should return false if div has role not equal to main', function() {
+			var params = checkSetup('<div id="target" role="bananas">Wrong role</div>', check.options);
+			var mainIsFound = check.evaluate.apply(checkContext, params);
+			assert.isFalse(mainIsFound);
+		});
+
+		it('should return true if main landmark exists', function(){
+			var params = checkSetup('<main id="target">main landmark</main>', check.options);
+			var mainIsFound = check.evaluate.apply(checkContext, params);
+			assert.isTrue(mainIsFound);
+		});
+
+		it('should return true if one div has role equal to main', function() {
+			var params = checkSetup('<div id="target" role="main">Div with role main</div>', check.options);
+			var mainIsFound = check.evaluate.apply(checkContext, params);
+			assert.isTrue(mainIsFound);
+		});
+
+		(shadowSupported ? it : xit)
+		('should return true if main is inside of shadow dom', function() {
+			var params = shadowCheckSetup('<div id="target"></div>', '<main>main landmark</main>', check.options);
+			var mainIsFound = check.evaluate.apply(checkContext, params);
+			assert.isTrue(mainIsFound);
+		});
+	});
+});