fix(allowed-role): area without href can have a button or link role (#…

…3275) * fix(allowed-role): area without href can have a button or link role * chore: remove failing test
dequelabs · Nov 12, 2021 · bf7e60a · bf7e60a
1 parent 1f01309
commit bf7e60a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/lib/standards/html-elms.js b/lib/standards/html-elms.js
@@ -48,8 +48,16 @@ const htmlElms = {
     allowedRoles: true
   },
   area: {
+    variant: {
+      href: {
+        matches: '[href]',
+        allowedRoles: false
+      },
+      default: {
+        allowedRoles: ['button', 'link']
+      }
+    },
     contentTypes: ['phrasing', 'flow'],
-    allowedRoles: false,
     namingMethods: ['altText']
   },
   article: {

diff --git a/test/commons/aria/is-aria-role-allowed-on-element.js b/test/commons/aria/is-aria-role-allowed-on-element.js
@@ -223,12 +223,4 @@ describe('aria.isAriaRoleAllowedOnElement', function() {
     var actual = axe.commons.aria.isAriaRoleAllowedOnElement(node, 'link');
     assert.isTrue(actual);
   });
-
-  it('returns false if elements implicit role does not match the role', function() {
-    var node = document.createElement('area');
-    node.setAttribute('role', 'link');
-    flatTreeSetup(node);
-    var actual = axe.commons.aria.isAriaRoleAllowedOnElement(node, 'link');
-    assert.isFalse(actual);
-  });
 });
diff --git a/test/integration/rules/aria-allowed-role/aria-allowed-role.html b/test/integration/rules/aria-allowed-role/aria-allowed-role.html
@@ -243,3 +243,11 @@ <h1 role="text" id="fail-text-1">ok</h1>
 <button role="text" id="fail-text-2">ok</button>
 <a href="#" role="text" id="fail-text-3">ok</a>
 <main role="text" id="fail-text-4">ok</main>
+
+<img usemap="#my-map">
+<map name="my-map">
+  <area shape="circle" coords="5,5,10" role="button" id="pass-imgmap-1">
+  <area shape="circle" coords="5,15,10" role="link" id="pass-imgmap-2">
+  <area shape="circle" coords="15,5,10" href="#" role="button" id="fail-imgmap-1">
+  <area shape="circle" coords="15,15,10" role="checkbox" id="fail-imgmap-2">
+</map>
diff --git a/test/integration/rules/aria-allowed-role/aria-allowed-role.json b/test/integration/rules/aria-allowed-role/aria-allowed-role.json
@@ -75,7 +75,9 @@
     ["#pass-graphics-symbol"],
     ["#pass-img-valid-role-aria-label"],
     ["#pass-img-valid-role-title"],
-    ["#pass-img-valid-role-aria-labelledby"]
+    ["#pass-img-valid-role-aria-labelledby"],
+    ["#pass-imgmap-1"],
+    ["#pass-imgmap-2"]
   ],
   "violations": [
     ["#fail-dd-no-role"],
@@ -105,7 +107,9 @@
     ["#fail-img-invalid-role-aria-label"],
     ["#fail-img-invalid-role-title"],
     ["#fail-img-invalid-role-aria-labelledby"],
-    ["#fail-img-no-accessible-name-present"]
+    ["#fail-img-no-accessible-name-present"],
+    ["#fail-imgmap-1"],
+    ["#fail-imgmap-2"]
   ],
   "incomplete": [["#incomplete1"], ["#incomplete2"]]
 }