fix(aria-allowed-role): Update allowed roles based on ARIA spec updat…

…es (#3124) * fix(aria-allowed-role): Update allowed roles based on ARIA spec updates * `<b>` now allows any roles * `<nav>` now also allows `menu`, `menubar`, `tablist` * `<svg>` now allows any roles Based on ARIA spec: https://www.w3.org/TR/html-aria/ * fix(aria-allowed-role): Update progress element to not allow any roles Co-authored-by: Timo Gasda <gasda@amazon.com>
dequelabs · Aug 23, 2021 · 00f6efc · 00f6efc
1 parent 544b6d5
commit 00f6efc
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 6 deletions.
diff --git a/lib/standards/html-elms.js b/lib/standards/html-elms.js
@@ -98,7 +98,7 @@ const htmlElms = {
   },
   b: {
     contentTypes: ['phrasing', 'flow'],
-    allowedRoles: false
+    allowedRoles: true
   },
   base: {
     allowedRoles: false,
@@ -612,7 +612,14 @@ const htmlElms = {
   },
   nav: {
     contentTypes: ['sectioning', 'flow'],
-    allowedRoles: ['doc-index', 'doc-pagelist', 'doc-toc'],
+    allowedRoles: [
+      'doc-index',
+      'doc-pagelist',
+      'doc-toc',
+      'menu',
+      'menubar',
+      'tablist'
+    ],
     shadowRoot: true
   },
   noscript: {
@@ -685,7 +692,7 @@ const htmlElms = {
   },
   progress: {
     contentTypes: ['phrasing', 'flow'],
-    allowedRoles: true,
+    allowedRoles: false,
     implicitAttrs: {
       'aria-valuemax': '100',
       'aria-valuemin': '0',
@@ -822,7 +829,7 @@ const htmlElms = {
   },
   svg: {
     contentTypes: ['embedded', 'phrasing', 'flow'],
-    allowedRoles: ['application', 'document', 'img'],
+    allowedRoles: true,
     chromiumRole: 'SVGRoot',
     namingMethods: ['svgTitleText']
   },

diff --git a/test/commons/aria/is-aria-role-allowed-on-element.js b/test/commons/aria/is-aria-role-allowed-on-element.js
@@ -22,12 +22,12 @@ describe('aria.isAriaRoleAllowedOnElement', function() {
     assert.equal(actual, expected);
   });
 
-  it('returns false for SVG with role alertdialog', function() {
+  it('returns true for SVG with role alertdialog', function() {
     var node = document.createElement('svg');
     var role = 'alertdialog';
     node.setAttribute('role', role);
     flatTreeSetup(node);
-    assert.isFalse(axe.commons.aria.isAriaRoleAllowedOnElement(node, role));
+    assert.isTrue(axe.commons.aria.isAriaRoleAllowedOnElement(node, role));
   });
 
   it('returns true for OBJECT with role application', function() {
@@ -162,6 +162,38 @@ describe('aria.isAriaRoleAllowedOnElement', function() {
     assert.isFalse(axe.commons.aria.isAriaRoleAllowedOnElement(node, role));
   });
 
+  it('returns true when B has role navigation', function() {
+    var node = document.createElement('b');
+    var role = 'navigation';
+    node.setAttribute('role', role);
+    flatTreeSetup(node);
+    assert.isTrue(axe.commons.aria.isAriaRoleAllowedOnElement(node, role));
+  });
+
+  it('returns true when NAV has role menubar', function() {
+    var node = document.createElement('nav');
+    var role = 'menubar';
+    node.setAttribute('role', role);
+    flatTreeSetup(node);
+    assert.isTrue(axe.commons.aria.isAriaRoleAllowedOnElement(node, role));
+  });
+
+  it('returns true when NAV has role tablist', function() {
+    var node = document.createElement('nav');
+    var role = 'tablist';
+    node.setAttribute('role', role);
+    flatTreeSetup(node);
+    assert.isTrue(axe.commons.aria.isAriaRoleAllowedOnElement(node, role));
+  });
+
+  it('returns false when PROGRESS has role button', function() {
+    var node = document.createElement('progress');
+    var role = 'button';
+    node.setAttribute('role', role);
+    flatTreeSetup(node);
+    assert.isFalse(axe.commons.aria.isAriaRoleAllowedOnElement(node, role));
+  });
+
   it('returns true if given element can have any role', function() {
     var node = document.createElement('div');
     flatTreeSetup(node);