fix(rules/region): Treat <section> as a landmark if it has an accessi…

…ble name #640 (#642)

* fix(rules/region): Treat <section> as a landmark if it has an accessible name #640

* chore(checks/region): Add clarifying comment

lib/checks/navigation/region.js

@@ -3,15 +3,26 @@
 var landmarkRoles = axe.commons.aria.getRolesByType('landmark'),
 	firstLink = node.querySelector('a[href]');
 
+// Create a list of nodeNames that have a landmark as an implicit role
+const implicitLandmarks = landmarkRoles
+	.reduce((arr, role) => arr.concat(axe.commons.aria.implicitNodes(role)), [])
+	.filter(r => r !== null);
+
 function isSkipLink(n) {
 	return firstLink &&
 		axe.commons.dom.isFocusable(axe.commons.dom.getElementByReference(firstLink, 'href')) &&
 		firstLink === n;
 }
 
-function isLandmark(n) {
-	var role = n.getAttribute('role');
-	return role && (landmarkRoles.indexOf(role) !== -1);
+function isLandmark(node) {
+	if (node.hasAttribute('role')) {
+		return landmarkRoles.includes(node.getAttribute('role').toLowerCase());
+	} else {
+		// Check if the node matches any of the CSS selectors of implicit landmarks
+		return implicitLandmarks.some((implicitSelector) => {
+			return axe.utils.matchesSelector(node, implicitSelector);
+		});
+	}
 }
 
 function checkRegion(n) {

lib/commons/aria/index.js

@@ -640,14 +640,14 @@ lookupTable.role = {
 		type: 'abstract'
 	},
 	'region': {
-		type: 'structure',
+		type: 'landmark',
 		attributes: {
 			allowed: ['aria-expanded']
 		},
 		owned: null,
 		nameFrom: ['author'],
 		context: null,
-		implicit: ['section']
+		implicit: ['section[aria-label]', 'section[aria-labelledby]', 'section[title]']
 	},
 	'roletype': {
 		type: 'abstract'

test/integration/full/region/region-fail.html

@@ -25,6 +25,9 @@ <h1 id="mainheader" tabindex="0">This is a header.</h1>
 	<li>Home</li>
 	<li>Other</li>
 </ul>
+<section>
+	<p>Content</p>
+</section>
 <div id="mocha"></div>
 <script src="region-fail.js"></script>
 <script src="/test/integration/adapter.js"></script>

test/integration/full/region/region-pass.html

@@ -25,6 +25,16 @@ <h1 id="mainheader" tabindex="0">This is a header.</h1>
 	<li>Home</li>
 	<li>Other</li>
 </ul>
+<section aria-labelledby="hdng">
+	<h1 id="hdng">Section heading</h1>
+	<p>Content</p>
+</section>
+<section aria-label="section 2">
+	<p>Content</p>
+</section>
+<section title="section 3">
+	<p>Content</p>
+</section>
 <div id="mocha" role="complementary"></div>
 <script src="region-pass.js"></script>
 <script src="/test/integration/adapter.js"></script>