fix(main-is-top-level): Rename check to landmark-is-top-level for gre…

…ater reuse BREAKING CHANGE: The check main-is-top-level is no longer available
dequelabs · Mar 7, 2018 · b405af1 · b405af1
1 parent 7b66768
commit b405af1
Show file tree

Hide file tree

Showing 20 changed files with 110 additions and 283 deletions.
diff --git a/doc/rule-descriptions.md b/doc/rule-descriptions.md
@@ -34,8 +34,8 @@
 | input-image-alt | Ensures &lt;input type=&quot;image&quot;&gt; 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 | true |
 | label | Ensures every form element has a label | cat.forms, wcag2a, wcag332, wcag131, section508, section508.22.n | true |
-| landmark-banner-is-top-level | A banner landmark identifies site-oriented content at the beginning of each page within a website | best-practice | true |
-| landmark-contentinfo-is-top-level | A contentinfo landmark is a way to identify common information at the bottom of each page within a website | best-practice | true |
+| landmark-banner-is-top-level | The banner landmark should not be contained in another landmark | best-practice | true |
+| landmark-contentinfo-is-top-level | The contentinfo landmark should not be contained in another landmark | best-practice | true |
 | landmark-main-is-top-level | The main landmark should not be contained in another landmark | best-practice | true |
 | landmark-no-duplicate-banner | Ensures the document has no more than one banner landmark | best-practice | true |
 | landmark-no-duplicate-contentinfo | Ensures the document has no more than one contentinfo landmark | best-practice | true |

diff --git a/lib/checks/keyboard/banner-is-top-level.js b/lib/checks/keyboard/banner-is-top-level.js
diff --git a/lib/checks/keyboard/banner-is-top-level.json b/lib/checks/keyboard/banner-is-top-level.json
diff --git a/lib/checks/keyboard/contentinfo-is-top-level.js b/lib/checks/keyboard/contentinfo-is-top-level.js
diff --git a/lib/checks/keyboard/contentinfo-is-top-level.json b/lib/checks/keyboard/contentinfo-is-top-level.json
diff --git a/lib/checks/keyboard/main-is-top-level.js → lib/checks/keyboard/landmark-is-top-level.js b/lib/checks/keyboard/main-is-top-level.js → lib/checks/keyboard/landmark-is-top-level.js
@@ -1,5 +1,10 @@
 var landmarks = axe.commons.aria.getRolesByType('landmark');
 var parent = axe.commons.dom.getComposedParent(node);
+
+this.data({ 
+	role: node.getAttribute('role') || axe.commons.aria.implicitRole(node)
+});
+
 while (parent){
 	var role = parent.getAttribute('role');
 	if (!role && (parent.tagName.toLowerCase() !== 'form')){

diff --git a/lib/checks/keyboard/landmark-is-top-level.json b/lib/checks/keyboard/landmark-is-top-level.json
@@ -0,0 +1,11 @@
+{
+  "id": "landmark-is-top-level",
+  "evaluate": "landmark-is-top-level.js",
+  "metadata": {
+    "impact": "moderate",
+    "messages": {
+      "pass": "The {{=it.data.role }} landmark is at the top level.",
+      "fail": "The {{=it.data.role }} landmark is contained in another landmark."
+    }
+  }
+}
diff --git a/lib/checks/keyboard/main-is-top-level.json b/lib/checks/keyboard/main-is-top-level.json
diff --git a/lib/rules/landmark-banner-is-top-level.json b/lib/rules/landmark-banner-is-top-level.json
@@ -1,16 +1,17 @@
 {
   "id": "landmark-banner-is-top-level",
-  "selector": "[role=banner], header",
+  "selector": "header:not([role]), [role=banner]",
+  "matches": "landmark-has-body-context.js",
   "tags": [
     "best-practice"
   ],
   "metadata": {
-    "description": "A banner landmark identifies site-oriented content at the beginning of each page within a website",
+    "description": "The banner landmark should not be contained in another landmark",
     "help": "Banner landmark must be at top level"
   },
   "all": [],
   "any": [
-    "banner-is-top-level"
+    "landmark-is-top-level"
   ],
   "none": []
 }
diff --git a/lib/rules/landmark-contentinfo-is-top-level.json b/lib/rules/landmark-contentinfo-is-top-level.json
@@ -1,16 +1,17 @@
 {
   "id": "landmark-contentinfo-is-top-level",
-  "selector": "[role=contentinfo], footer",
+  "selector": "footer:not([role]), [role=contentinfo]",
+  "matches": "landmark-has-body-context.js",
   "tags": [
     "best-practice"
   ],
   "metadata": {
-    "description": "A contentinfo landmark is a way to identify common information at the bottom of each page within a website",
+    "description": "The contentinfo landmark should not be contained in another landmark",
     "help": "Contentinfo landmark must be at top level"
   },
   "all": [],
   "any": [
-    "contentinfo-is-top-level"
+    "landmark-is-top-level"
   ],
   "none": []
 }
diff --git a/lib/rules/landmark-has-body-context.js b/lib/rules/landmark-has-body-context.js
@@ -0,0 +1,6 @@
+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
+return (node.hasAttribute('role') ||
+  !axe.commons.dom.findUpVirtual(virtualNode, nativeScopeFilter));
diff --git a/lib/rules/landmark-main-is-top-level.json b/lib/rules/landmark-main-is-top-level.json
@@ -1,6 +1,6 @@
 {
   "id": "landmark-main-is-top-level",
-  "selector": "main, [role=main]",
+  "selector": "main:not([role]), [role=main]",
   "tags": [
 	"best-practice"
   ],
@@ -10,7 +10,7 @@
   },
   "all": [],
   "any": [
-    "main-is-top-level"
+    "landmark-is-top-level"
   ],
   "none": []
 }
diff --git a/test/checks/keyboard/banner-is-top-level.js b/test/checks/keyboard/banner-is-top-level.js
diff --git a/test/checks/keyboard/contentinfo-is-top-level.js b/test/checks/keyboard/contentinfo-is-top-level.js