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

lib/checks/navigation/region.js

@@ -14,7 +14,7 @@ const landmarkRoles = aria.getRolesByType('landmark');
 // Create a list of nodeNames that have a landmark as an implicit role
 const implicitLandmarks = landmarkRoles
 	.reduce((arr, role) => arr.concat(aria.implicitNodes(role)), [])
-	.filter(r => r !== null).map(r => r.toUpperCase());
+	.filter(r => r !== null);
 
 // Check if the current element is the skiplink
 function isSkipLink (node) {
@@ -26,7 +26,10 @@ function isLandmark (node) {
 	if (node.hasAttribute('role')) {
 		return landmarkRoles.includes(node.getAttribute('role').toLowerCase());
 	} else {
-		return implicitLandmarks.includes(node.nodeName.toUpperCase());
+		// Check if the node matches any of the CSS selectors of implicit landmarks
+		return implicitLandmarks.some((implicitSelector) => {
+			return axe.utils.matchesSelector(node, implicitSelector);
+		});
 	}
 }
 

lib/commons/aria/index.js

@@ -640,14 +640,14 @@ lookupTables.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'

package.json

@@ -92,4 +92,4 @@
     "standard-version": "^4.2.0"
   },
   "dependencies": {}
-}
+}

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>