Treat the toolbar role as if it descended from widget

Author: jessebeach

__mocks__/genInteractives.js

@@ -104,7 +104,13 @@ const abstractRoles = roleNames
 const nonAbstractRoles = roleNames
   .filter(role => !roles.get(role).abstract);
 
-const interactiveRoles = roleNames
+const interactiveRoles = []
+  .concat(
+    roleNames,
+    // 'toolbar' does not descend from widget, but it does support
+    // aria-activedescendant, thus in practice we treat it as a widget.
+    'toolbar',
+  )
   .filter(role => !roles.get(role).abstract)
   .filter(role => roles.get(role).superClass.some(
     klasses => klasses.includes('widget')),
@@ -114,7 +120,10 @@ const nonInteractiveRoles = roleNames
   .filter(role => !roles.get(role).abstract)
   .filter(role => !roles.get(role).superClass.some(
     klasses => klasses.includes('widget')),
-  );
+  )
+  // 'toolbar' does not descend from widget, but it does support
+  // aria-activedescendant, thus in practice we treat it as a widget.
+  .filter(role => !['toolbar'].includes(role));
 
 export function genElementSymbol (
   openingElement: Object,

__tests__/src/rules/no-noninteractive-element-handlers-test.js

@@ -207,6 +207,7 @@ ruleTester.run('no-noninteractive-element-handlers', rule, {
     { code: '<div role="select" onClick={() => {}} />;' },
     { code: '<div role="structure" onClick={() => {}} />;' },
     { code: '<div role="tablist" onClick={() => {}} />;' },
+    { code: '<div role="toolbar" onClick={() => {}} />;' },
     { code: '<div role="tree" onClick={() => {}} />;' },
     { code: '<div role="treegrid" onClick={() => {}} />;' },
     { code: '<div role="widget" onClick={() => {}} />;' },
@@ -281,7 +282,6 @@ ruleTester.run('no-noninteractive-element-handlers', rule, {
     { code: '<div role="tabpanel" onClick={() => {}} />;', errors: [expectedError] },
     { code: '<div role="term" onClick={() => {}} />;', errors: [expectedError] },
     { code: '<div role="timer" onClick={() => {}} />;', errors: [expectedError] },
-    { code: '<div role="toolbar" onClick={() => {}} />;', errors: [expectedError] },
     { code: '<div role="tooltip" onClick={() => {}} />;', errors: [expectedError] },
   ].map(parserOptionsMapper),
 });

src/util/isInteractiveElement.js

@@ -19,7 +19,12 @@ type ElementCallbackMap = {
 };
 
 const interactiveRoles = new Set(
-  [...roles.keys()]
+    [].concat(
+      [...roles.keys()],
+      // 'toolbar' does not descend from widget, but it does support
+      // aria-activedescendant, thus in practice we treat it as a widget.
+      'toolbar',
+    )
     .filter(name => !roles.get(name).abstract)
     .filter(name => roles.get(name).superClass.some(
       klasses => klasses.includes('widget')),

src/util/isInteractiveRole.js

@@ -4,11 +4,15 @@ import {
 import type { Node } from 'ast-types-flow';
 import { getProp, getLiteralPropValue } from 'jsx-ast-utils';
 
-const VALID_ROLES = [...roles.keys()]
+const interactiveRoles = [...roles.keys()]
   .filter(name => !roles.get(name).abstract)
   .filter(name => roles.get(name).superClass.some(
     klasses => klasses.includes('widget')),
   );
+
+// 'toolbar' does not descend from widget, but it does support
+// aria-activedescendant, thus in practice we treat it as a widget.
+interactiveRoles.push('toolbar');
 /**
  * Returns boolean indicating whether the given element has a role
  * that is associated with an interactive component. Used when an element
@@ -33,10 +37,13 @@ const isInteractiveRole = (
     return false;
   }
 
+  let isInteractive = false;
   const normalizedValues = String(value).toLowerCase().split(' ');
-  const isInteractive = normalizedValues.every(
-    val => VALID_ROLES.indexOf(val) > -1,
-  );
+  if (normalizedValues.length > 0) {
+    // The last role value is a series takes precedence.
+    let val = normalizedValues[normalizedValues.length - 1];
+    isInteractive = interactiveRoles.indexOf(val) > -1;
+  }
 
   return isInteractive;
 };