feat(landmark-one-main): add rule ensuring one main landmark in document (#498)

* feat(landmark-one-main): add rule ensuring one main landmark in document

* fix: rename integration tests

* fix: move checks from 'any' to 'all'

* fix: add missing 'after' check

* fix: update to pass virtualnode in to check

* fix: change incorrect rule name in integration tests

* fix: remove line for debugging

* fix: correct faulty check tests

* test: add shadowCheckSetup util

* test: fix main tests for shadowdom

* fix: resolve timeout issues

* fix: add event listener

* fix: change where to check for passes

* style: comment code for comprehension

* test: add test for second violation node

Author: sulsanaul

doc/rule-descriptions.md

@@ -33,6 +33,7 @@
 | input-image-alt | Ensures <input type="image"> elements have alternate text | cat.text-alternatives, wcag2a, wcag111, section508, section508.22.a | true |
 | label-title-only | Ensures that every form element is not solely labeled using the title or aria-describedby attributes | cat.forms, best-practice | false |
 | label | Ensures every form element has a label | cat.forms, wcag2a, wcag332, wcag131, section508, section508.22.n | true |
+| landmark-one-main | Ensures a navigation point to the primary content of the page. If the page contains iframes, each iframe should contain either no main landmarks or just one. | best-practice | true |
 | landmark-main-is-top-level | The main landmark should not be contained in another landmark | best-practice | true |
 | layout-table | Ensures presentational <table> elements do not use <th>, <caption> elements or the summary attribute | cat.semantics, wcag2a, wcag131 | true |
 | link-in-text-block | Links can be distinguished without relying on color | cat.color, experimental, wcag2a, wcag141 | true |

lib/checks/keyboard/has-at-least-one-main-after.js

@@ -0,0 +1,16 @@
+var hasMain = false;
+
+//iterate through results from each document
+//stops if any document contains a main landmark
+for (var i = 0; i < results.length && !hasMain; i++) {
+	hasMain = results[i].data;
+}
+
+//if any document contains a main landmark, set all documents to pass the check
+//otherwise, fail all documents
+//since this is a page level rule, all documents either pass or fail the requirement
+for (var i = 0; i < results.length; i++) {
+	results[i].result = hasMain;
+}
+
+return results;

lib/checks/keyboard/has-at-least-one-main.js

@@ -0,0 +1,3 @@
+const mains = axe.utils.querySelectorAll(virtualNode, 'main,[role=main]');
+this.data(!!mains[0]);
+return !!mains[0];

lib/checks/keyboard/has-at-least-one-main.json

@@ -0,0 +1,12 @@
+{
+	"id": "has-at-least-one-main",
+	"evaluate": "has-at-least-one-main.js",
+	"after": "has-at-least-one-main-after.js",
+	"metadata": {
+		"impact": "moderate",
+		"messages": {
+		  "pass": "Document has at least one main landmark",
+		  "fail": "Document has no main landmarks"
+		}
+	}
+}

lib/checks/keyboard/has-no-more-than-one-main.js

@@ -0,0 +1,2 @@
+const mains = axe.utils.querySelectorAll(virtualNode, 'main,[role=main]');
+return mains.length<=1;

lib/checks/keyboard/has-no-more-than-one-main.json

@@ -0,0 +1,11 @@
+{
+	"id": "has-no-more-than-one-main",
+	"evaluate": "has-no-more-than-one-main.js",
+	"metadata": {
+		"impact": "moderate",
+		"messages": {
+		"pass": "Document has no more than one main landmark",
+		"fail": "Document has more than one main landmark"
+		}
+	}
+}

lib/rules/landmark-one-main.json

@@ -0,0 +1,17 @@
+{
+	"id": "landmark-one-main",
+	"selector": "html",
+	"tags": [
+		"best-practice"
+	],
+	"metadata": {
+		"description": "Ensures a navigation point to the primary content of the page. If the page contains iframes, each iframe should contain either no main landmarks or just one.",
+		"help": "Page must contain one main landmark."
+	},
+	"all": [
+		"has-at-least-one-main",
+		"has-no-more-than-one-main"
+		],
+	"any": [],
+	"none": []
+}

test/checks/keyboard/has-at-least-one-main.js

@@ -0,0 +1,58 @@
+describe('has-at-least-one-main', function () {
+	'use strict';
+
+	var fixture = document.getElementById('fixture');
+	var checkContext = new axe.testUtils.MockCheckContext();
+	var checkSetup = axe.testUtils.checkSetup;
+
+	afterEach(function () {
+		fixture.innerHTML = '';
+		checkContext.reset();
+	});
+
+	it('should return false if no div has role property', function() {
+		var params = checkSetup('<div id = "target">No role</div>');
+		var mainIsFound = checks['has-at-least-one-main'].evaluate.apply(checkContext, params);
+		assert.isFalse(mainIsFound);
+		assert.deepEqual(checkContext._data, mainIsFound);
+	});
+	
+	it('should return false if div has empty role', function() {
+		var params = checkSetup('<div id = "target" role = "">Empty role</div>');
+		var mainIsFound = checks['has-at-least-one-main'].evaluate.apply(checkContext, params);
+		assert.isFalse(mainIsFound);
+		assert.equal(checkContext._data, 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>');
+		var mainIsFound = checks['has-at-least-one-main'].evaluate.apply(checkContext, params);
+		assert.isFalse(mainIsFound);
+		assert.equal(checkContext._data, mainIsFound);
+	});
+	
+	it('should return true if main landmark exists', function(){
+		var params = checkSetup('<main id = "target">main landmark</main>');
+		var mainIsFound = checks['has-at-least-one-main'].evaluate.apply(checkContext, params);
+		assert.isTrue(mainIsFound);
+		assert.equal(checkContext._data, 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>');
+		var mainIsFound = checks['has-at-least-one-main'].evaluate.apply(checkContext, params);
+		assert.isTrue(mainIsFound);
+		assert.equal(checkContext._data, mainIsFound);
+	});
+	
+	it('should return true if any document has a main landmark', function() {
+		var results = [{data: false, result: false}, {data: true, result: true}];
+		assert.isTrue(checks['has-at-least-one-main'].after(results)[0].result && checks['has-at-least-one-main'].after(results)[1].result);
+	});
+	
+	it('should return false if no document has a main landmark', function() {
+		var results = [{data: false, result: false}, {data: false, result: false}];
+		assert.isFalse(checks['has-at-least-one-main'].after(results)[0].result && checks['has-at-least-one-main'].after(results)[1].result);
+	});
+
+});

test/checks/keyboard/has-no-more-than-one-main.js

@@ -0,0 +1,45 @@
+describe('has-no-more-than-one-main', function () {
+	'use strict';
+
+	var fixture = document.getElementById('fixture');
+	var checkContext = new axe.testUtils.MockCheckContext();
+	var checkSetup = axe.testUtils.checkSetup;
+	var shadowCheckSetup = axe.testUtils.shadowCheckSetup;
+	var shadowSupported = axe.testUtils.shadowSupport.v1;
+
+	afterEach(function () {
+		fixture.innerHTML = '';
+		checkContext.reset();
+	});
+
+	it('should return false if there is more than one element with role main', function () {
+		var params = checkSetup('<div id="target"><div role="main"></div><div role="main"></div></div>');
+		assert.isFalse(checks['has-no-more-than-one-main'].evaluate.apply(checkContext, params));
+
+	});
+	
+	it('should return false if there is more than one main element', function () {
+		var params = checkSetup('<div id="target"><main></main><main></main></div>');
+		assert.isFalse(checks['has-no-more-than-one-main'].evaluate.apply(checkContext, params));
+	});
+
+	it('should return true if there is only one element with role main', function(){
+		var params = checkSetup('<div role="main" id="target"></div>');
+		assert.isTrue(checks['has-no-more-than-one-main'].evaluate.apply(checkContext, params));
+	});
+	
+	it('should return true if there is only one main element', function(){
+		var params = checkSetup('<main id="target"></main>');
+		assert.isTrue(checks['has-no-more-than-one-main'].evaluate.apply(checkContext, params));
+	});
+
+	(shadowSupported ? it : xit)
+	('should return false if there is a second main element inside the shadow dom', function () {
+		var params = shadowCheckSetup(
+			'<div role="main" id="target"></div>',
+			'<div role="main"></div>'
+		);
+		assert.isFalse(checks['has-no-more-than-one-main'].evaluate.apply(checkContext, params));
+	});
+
+});

test/integration/full/landmark-one-main/frames/level1-fail.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en" id="violation2">
+<head>
+	<meta charset="utf8">
+	<script src="/axe.js"></script>
+</head>
+<body>
+	<p>No main content here either</p>
+</body>
+</html>