feat: new rule landmark-complementary-is-top-level

Best practice requiring asides and complementary landmarks to be top level, in line with the ARIA Authoring Practices Guide. Closes #795
dequelabs · Nov 14, 2018 · cc291e6 · cc291e6
1 parent 89d18d0
commit cc291e6
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 2 deletions.
diff --git a/doc/rule-descriptions.md b/doc/rule-descriptions.md
@@ -43,6 +43,7 @@
 | label-title-only | Ensures that every form element is not solely labeled using the title or aria-describedby attributes | Serious | cat.forms, best-practice | true |
 | label | Ensures every form element has a label | Minor, Critical | cat.forms, wcag2a, wcag332, wcag131, section508, section508.22.n | true |
 | landmark-banner-is-top-level | Ensures the banner landmark is at top level | Moderate | cat.semantics, best-practice | true |
+| landmark-complementary-is-top-level | Ensures the complementary landmark or aside is at top level | Moderate | cat.semantics, best-practice | true |
 | landmark-contentinfo-is-top-level | Ensures the contentinfo landmark is at top level | Moderate | cat.semantics, best-practice | true |
 | landmark-main-is-top-level | Ensures the main landmark is at top level | Moderate | cat.semantics, best-practice | true |
 | landmark-no-duplicate-banner | Ensures the document has at most one banner landmark | Moderate | cat.semantics, best-practice | true |

diff --git a/lib/rules/landmark-complementary-is-top-level.json b/lib/rules/landmark-complementary-is-top-level.json
@@ -0,0 +1,18 @@
+{
+  "id": "landmark-complementary-is-top-level",
+  "selector": "aside:not([role]), [role=complementary]",
+  "matches": "landmark-has-body-context.js",
+  "tags": [
+    "cat.semantics",
+    "best-practice"
+  ],
+  "metadata": {
+    "description": "Ensures the complementary landmark or aside is at top level",
+    "help": "Aside must not be contained in another landmark"
+  },
+  "all": [],
+  "any": [
+    "landmark-is-top-level"
+  ],
+  "none": []
+}
diff --git a/lib/rules/landmark-has-body-context.js b/lib/rules/landmark-has-body-context.js
@@ -1,7 +1,7 @@
 const nativeScopeFilter = 'article, aside, main, nav, section';
 
 // Filter elements that, within certain contexts, don't map their role.
-// e.g. a <footer> inside a <main> is not a banner, but in the <body> context it is
+// e.g. a <header> inside a <main> is not a banner, but in the <body> context it is
 return (
 	node.hasAttribute('role') ||
 	!axe.commons.dom.findUpVirtual(virtualNode, nativeScopeFilter)

diff --git a/test/checks/keyboard/landmark-is-top-level.js b/test/checks/keyboard/landmark-is-top-level.js
@@ -13,7 +13,7 @@ describe('landmark-is-top-level', function() {
 		checkContext.reset();
 	});
 
-	it('should return false if the landmark is in another landmark', function() {
+	it('should return false if the banner landmark is in another landmark', function() {
 		var mainLandmark = document.createElement('main');
 		var bannerDiv = document.createElement('div');
 		bannerDiv.setAttribute('role', 'banner');
@@ -23,6 +23,16 @@ describe('landmark-is-top-level', function() {
 		assert.deepEqual(checkContext._data, { role: 'main' });
 	});
 
+	it('should return false if the complementary landmark is in another landmark', function() {
+		var mainLandmark = document.createElement('main');
+		var aside = document.createElement('div');
+		aside.setAttribute('role', 'complementary');
+		aside.appendChild(mainLandmark);
+		fixture.appendChild(aside);
+		assert.isFalse(check.evaluate.call(checkContext, mainLandmark));
+		assert.deepEqual(checkContext._data, { role: 'main' });
+	});
+
 	it('should return false if div with role set to main is in another landmark', function() {
 		var mainDiv = document.createElement('div');
 		mainDiv.setAttribute('role', 'main');