From a1f637f3f5ebf0e483fd21865bd2191c24ccb87a Mon Sep 17 00:00:00 2001
From: Steven Lambert <2433219+straker@users.noreply.github.com>
Date: Mon, 23 Aug 2021 09:41:37 -0600
Subject: [PATCH] fix(aria-allowed-role): Update allowed roles based on ARIA
 spec updates (#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>
---
 lib/standards/html-elms.js                    | 15 +++++---
 .../aria/is-aria-role-allowed-on-element.js   | 36 +++++++++++++++++--
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/lib/standards/html-elms.js b/lib/standards/html-elms.js
index 7d889a26f8..3b854e1b71 100644
--- 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
index c9f031f3ed..964bc45220 100644
--- 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);