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/
dequelabs · Aug 9, 2021 · 7270d92 · 7270d92
1 parent a9e03c8
commit 7270d92
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 5 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: {
@@ -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,30 @@ 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 true if given element can have any role', function() {
     var node = document.createElement('div');
     flatTreeSetup(node);